/* Chetopp scrapbook landing, adapted from approved HTML preview. */
:root {
      --dark:#204247;
      --cream:#fffdf3;
      --pink:#ed1b54;
      --powder:#d6e5e1;
      --avenir: Avenir, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    }
    *,*::before,*::after {box-sizing:border-box}
    html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
    body{font-family:var(--avenir);background:var(--powder)}
    .scene{position:fixed;inset:0;isolation:isolate;display:grid;place-items:center;width:100vw;height:100vh;height:100svh;overflow:hidden;background:var(--powder)}
    .scene::before{position:absolute;inset:0;content:"";pointer-events:none;background:radial-gradient(ellipse at 55% 36%,rgba(255,255,255,.13),transparent 58%)}
    /* The background collage is always behind the green card, across the entire viewport. */
    .background-patch-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
    .patch--background{filter:drop-shadow(0 4px 4px rgba(20,44,47,.17))}
    /* Two foreground embroidered patches overlap the opposite corners of the green card. */
    .patch-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:8}
    .patch{
      display:block;position:absolute;opacity:0;object-fit:contain;transform-origin:center;
      pointer-events:none;user-select:none;-webkit-user-drag:none;
      filter:drop-shadow(0 7px 6px rgba(25,51,54,.26));will-change:transform,opacity;
      width:152px;height:152px;
    }
    .patch--tl{left:-59px;top:-47px}
    .patch--br{right:-96px;bottom:-89px}
    .panel{
      position:relative;z-index:5;text-align:center;color:var(--cream);
      width:min(464px,calc(100vw - 42px));max-height:calc(100svh - 20px);
      padding:clamp(25px,3.5vh,40px) clamp(26px,4vw,43px) clamp(23px,3.5vh,38px);
      display:flex;flex-direction:column;align-items:center;
      border-radius:22px;background:var(--dark);
      box-shadow:0 24px 70px rgba(24,54,59,.25),0 3px 12px rgba(24,54,59,.10);
      -webkit-font-smoothing:antialiased;
    }
    .brand-logo{display:block;object-fit:contain;width:min(238px,61vw);height:auto;filter:drop-shadow(0 1px 0 rgba(255,253,243,.15))}
    .brand-line{margin:4px 0 0;font-family:var(--avenir);font-size:13px;font-weight:400;line-height:1.4;letter-spacing:.24em;color:var(--cream)}
    h1{font-family:var(--avenir);font-size:clamp(23px,2.35vw,29px);font-weight:800;text-transform:uppercase;letter-spacing:.006em;line-height:1.12;margin:31px 0 0;color:var(--cream)}
    .intro{font-size:15px;font-weight:400;line-height:1.5;margin:20px 0 0;color:var(--cream)}
    .intro strong{font-weight:700}
    .actions{width:100%;display:flex;flex-direction:column;align-items:stretch}
    .button{
      display:flex;align-items:center;justify-content:center;gap:12px;min-height:51px;width:100%;
      padding:10px 14px;border-radius:9px;border:1.5px solid transparent;
      font:700 15px/1.2 var(--avenir);text-decoration:none;outline-offset:4px;
      transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
    }
    .button:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.15)}
    .button:focus-visible{outline:3px solid #fff}
    .button svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
    .button--email{color:var(--cream);background:var(--pink);border-color:var(--pink);margin-top:17px}
    .button--email:hover{background:#d70c44}
    .follow{font-size:14px;font-weight:400;line-height:1.45;color:var(--cream);margin:23px 0 13px}
    .button--instagram{background:var(--cream);color:var(--dark);border-color:var(--cream)}
    .button--instagram:hover{background:#eeeadd}
    .footline{margin:19px 0 0;color:var(--cream);opacity:.7;font-size:9.5px;letter-spacing:.19em;line-height:1.2;font-weight:400}
    @media(max-width:640px){
      .panel{width:min(388px,calc(100vw - 50px));padding:clamp(17px,3.4svh,27px) clamp(18px,5vw,31px);border-radius:18px}
      .patch{width:94px;height:94px}
      .patch--tl{left:-9px;top:-29px}
      .patch--br{right:-8px;bottom:-62px}
      .brand-logo{width:clamp(154px,52vw,218px)}
      .brand-line{font-size:12px;letter-spacing:.22em;margin-top:2px}
      h1{font-size:clamp(21px,5.3vw,26px);margin-top:clamp(16px,3.2svh,25px)}
      .intro{font-size:clamp(12.5px,3.55vw,14px);margin-top:clamp(12px,2.2svh,17px)}
      .button{font-size:13.5px;min-height:clamp(43px,5.7svh,49px)}
      .button--email{margin-top:clamp(12px,2.1svh,16px)}
      .follow{font-size:clamp(11.5px,3.4vw,13.5px);margin:clamp(13px,2.4svh,19px) 0 10px}
      .footline{display:none}
    }
    @media(max-height:650px){
      .panel{padding-top:13px;padding-bottom:13px}
      .patch{width:79px;height:79px}
      .patch--tl{left:-8px;top:-19px}
      .patch--br{right:-8px;bottom:-44px}
      .brand-logo{width:min(166px,43vw)}
      .brand-line{font-size:11px}
      h1{margin-top:11px;font-size:22px}
      .intro{margin-top:11px;font-size:12px}
      .button{min-height:39px;font-size:12px}
      .button--email{margin-top:10px}
      .follow{margin:11px 0 7px;font-size:11px}
      .footline{margin-top:9px}
    }
    @media(max-height:450px) and (orientation:landscape){
      .panel{width:min(660px,calc(100vw - 50px));padding:10px 20px;border-radius:15px}
      .patch{width:68px;height:68px}
      .patch--tl{left:-14px;top:-10px}
      .patch--br{right:-14px;bottom:-35px}
      .brand-logo{width:108px}.brand-line{font-size:9px;margin-top:0}
      h1{margin-top:7px;font-size:18px}.intro{font-size:11px;margin-top:7px}
      .button{min-height:30px;padding:4px 12px;font-size:10.5px}
      .button svg{width:15px;height:15px}.button--email{margin-top:5px}
      .follow{margin:6px 0 5px;font-size:10px}.footline{display:none}
    }
    @media(prefers-reduced-motion:reduce){.patch{will-change:auto}.button{transition:none}}

    @media(max-width:380px){
      .button--email{font-size:clamp(10px,3vw,12px);gap:7px;padding-inline:7px}
      .button--email svg{width:17px;height:17px}
      .footline{font-size:7.5px;letter-spacing:.1em}
    }