@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@300;400;500&display=swap');
  :root{
    --ink:#f4efe6;
    --dim:rgba(244,239,230,.55);
    --glass:rgba(8,8,7,.48);
    --stroke:rgba(244,239,230,.14);
    --rust:#d08a5a;
    --shimmer:linear-gradient(100deg,#ecdcc0 0%,#e6b98a 16%,#d98f8a 30%,#d08a5a 44%,#e6c187 58%,#bcc6b0 72%,#a7bac6 86%,#c3b7cc 100%);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:#05040a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
  canvas{position:fixed;inset:0;display:block;cursor:none;z-index:2}

  /* custom round glowing cursor */
  #cursor{position:fixed;top:0;left:0;width:22px;height:22px;border-radius:50%;
    background:radial-gradient(circle at 50% 45%,rgba(232,201,138,.95),rgba(208,138,90,.85));
    box-shadow:0 0 14px 4px rgba(208,138,90,.55),0 0 34px 10px rgba(208,138,90,.28);
    pointer-events:none;z-index:9999;opacity:0;
    transition:width .22s ease,height .22s ease,background .22s ease,box-shadow .22s ease,opacity .3s ease;
    mix-blend-mode:screen;will-change:transform}
  #cursor.hover{width:40px;height:40px;
    box-shadow:0 0 20px 6px rgba(208,138,90,.6),0 0 48px 16px rgba(208,138,90,.32)}
  #cursor.down{width:16px;height:16px}
  body{cursor:none}
  a,button,.tool,.mini,[data-view]{cursor:none}
  @media(hover:none){#cursor{display:none} body,canvas,a,button{cursor:auto}}
  #bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center 40%;
    background-repeat:no-repeat}
  #scrim{position:fixed;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(4,6,4,.42) 0%,rgba(4,6,4,.18) 30%,rgba(4,6,4,.30) 65%,rgba(4,6,4,.55) 100%)}

  /* ---- intro ---- */
  #intro{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:18px;text-align:center;
    background:radial-gradient(120% 120% at 50% 40%,rgba(30,20,50,.4),rgba(5,4,10,.92));
    transition:opacity 1.1s ease;color:var(--ink)}
  #intro h1{font-weight:300;font-size:clamp(30px,7vw,64px);letter-spacing:.14em;
    background:linear-gradient(90deg,#ffd9a0,#ff9ecd,#9ad7ff,#c6ffb0);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:hue 8s linear infinite}
  @keyframes hue{to{filter:hue-rotate(360deg)}}
  #intro p{color:var(--dim);font-size:15px;letter-spacing:.03em;max-width:340px;line-height:1.6}
  #enter{margin-top:10px;padding:14px 34px;border:1px solid var(--stroke);border-radius:999px;
    background:rgba(255,255,255,.04);color:var(--ink);font-size:15px;letter-spacing:.12em;
    cursor:pointer;backdrop-filter:blur(8px);transition:.3s}
  #enter:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);letter-spacing:.18em}
  .faded{opacity:0!important;pointer-events:none!important}

  /* ---- HUD ---- */
  #hud{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;
    display:flex;gap:8px;padding:8px;border-radius:999px;
    background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
    transition:opacity .6s;flex-wrap:nowrap;justify-content:center;white-space:nowrap}
  .tool{display:flex;flex-direction:column;align-items:center;gap:2px;
    width:64px;padding:9px 6px;border-radius:16px;cursor:pointer;color:var(--dim);
    transition:.22s;user-select:none;border:1px solid transparent}
  .tool .ic{font-size:22px;line-height:1}
  .tool .lb{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
  .tool:hover{color:var(--ink);background:rgba(255,255,255,.05)}
  .tool.on{color:var(--ink);background:rgba(255,255,255,.11);border-color:var(--stroke)}

  .nav{padding:11px 20px;border-radius:999px;color:var(--dim);font-size:13px;
    letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
    transition:.22s;border:1px solid transparent;white-space:nowrap}
  .nav:hover{color:var(--ink);background:rgba(255,255,255,.06)}
  .cta{color:#fff;border-color:transparent;
    background:linear-gradient(120deg,rgba(208,138,90,.92),rgba(150,86,52,.92))}
  .cta:hover{background:linear-gradient(120deg,rgba(224,154,104,1),rgba(168,98,60,1));
    transform:translateY(-1px);letter-spacing:.2em}

  /* hamburger (hidden on desktop) */
  #navToggle{display:none;position:fixed;top:16px;right:16px;z-index:22;
    width:48px;height:48px;border-radius:50%;cursor:pointer;
    background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
    flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
  #navToggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .3s ease,opacity .2s ease}
  #navToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #navToggle.open span:nth-child(2){opacity:0}
  #navToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  #corner{position:fixed;top:18px;right:18px;z-index:20;display:flex;gap:8px}
  .mini{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
    color:var(--dim);cursor:pointer;font-size:17px;transition:.22s}
  .mini:hover{color:var(--ink);transform:translateY(-2px)}
  #brand{position:fixed;top:20px;left:20px;z-index:20;color:var(--dim);
    font-size:12px;letter-spacing:.3em;pointer-events:none}
  #brand .bu{position:relative;display:inline-block;color:transparent}
  #brand .bu::after{content:"";position:absolute;left:.05em;right:.32em;bottom:.18em;height:1px;
    border-radius:1px;background:var(--dim)}

  /* ---- content views ---- */
  #views{position:fixed;inset:0;z-index:15;display:grid;place-items:center;
    padding:84px 18px 110px;pointer-events:none;box-sizing:border-box}
  .view{grid-area:1/1;width:100%;max-width:860px;justself:center;justify-self:center;
    max-height:calc(100vh - 194px);max-height:calc(100dvh - 194px);overflow-y:auto;
    opacity:0;transform:translateY(16px) scale(.99);pointer-events:none;
    transition:opacity .7s ease,transform .7s ease;padding:44px 56px;border-radius:28px;
    background:rgba(10,9,8,.62);border:1px solid var(--stroke);backdrop-filter:blur(20px);
    color:var(--ink);scrollbar-width:none;box-sizing:border-box}
  .view::-webkit-scrollbar{display:none}
  .view.active{opacity:1;transform:none;pointer-events:auto}
  #view-order{max-width:960px;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .view h1{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(28px,5vw,44px);
    letter-spacing:.01em;line-height:1.12;margin-bottom:18px;
    background:var(--shimmer);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .view h2{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:12px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--rust);margin:30px 0 14px}
  .view p{font-size:15.5px;line-height:1.75;color:rgba(244,239,230,.82);margin-bottom:14px}
  .view .lede{font-size:17px;color:var(--ink)}
  .sig{font-family:'Fraunces',serif;font-style:italic;color:var(--dim);font-size:14px;margin-top:24px}
  .beat{margin:0 0 4px;line-height:1.5}
  .beat.strong{color:var(--ink);font-family:'Fraunces',serif;font-size:16.5px}
  .heart{color:var(--rust);font-size:15px}

  /* about page: written as a letter, one left-aligned column */
  .letter{text-align:left}
  .letter h1{text-align:left;margin-bottom:26px;max-width:600px;margin-left:auto;margin-right:auto}
  .letter > p{max-width:600px;margin-left:auto;margin-right:auto;text-align:left}
  .letter .opening{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(19px,2.3vw,23px);
    line-height:1.55;color:var(--ink);margin:0 auto 22px;text-align:left}
  .about-photo{display:block;width:100%;max-width:600px;height:340px;object-fit:cover;object-position:center 35%;
    margin:0 auto 30px;border-radius:16px;
    box-shadow:0 18px 44px rgba(0,0,0,.45);filter:saturate(1.05) contrast(1.02)}
  .letter .accent{color:var(--rust);font-style:italic}
  .letter em{color:var(--rust);font-style:normal}
  .stanza{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(18px,2.2vw,22px);
    line-height:1.6;color:var(--ink);margin:24px auto !important}
  .stanza .accent{font-style:italic}
  .closing{margin-top:30px !important;color:var(--ink)}
  .signoff{font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:clamp(24px,3vw,30px);color:var(--dim);text-align:left;
    max-width:600px;margin:6px auto 0 !important;letter-spacing:.03em}
  .signoff-t{color:var(--rust);font-size:1.4em;margin-left:3px}

  #view-home{padding-top:30px}
  .home-mark{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(34px,8vw,58px);
    text-align:center;margin-bottom:16px;
    background:var(--shimmer);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .home-sub{text-align:center;max-width:430px;margin:0 auto 28px}

  /* home hero: chain sits above the wordmark in normal flow */
  .hero-mark{position:relative;margin:-18px 0 8px;overflow:visible}
  .hero-chain{display:block;width:126%;max-width:126%;margin:-6% -13% 3% -13%;height:auto;
    pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
  .home-mark .us{position:relative;display:inline-block;width:.55em;height:1em;font-size:1em;
    color:transparent;-webkit-text-fill-color:transparent;overflow:hidden;vertical-align:baseline}
  .home-mark .us::after{content:"";position:absolute;left:0;right:0;top:.72em;height:.05em;
    border-radius:2px;background:linear-gradient(90deg,#d08a5a,#e6c187,#cdd0bd)}

  /* process ribbon */
  .ribbon{display:flex;gap:8px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:14px 0 6px}
  .portal{width:120px;text-align:center;opacity:0;transform:translateY(10px);animation:rise .8s ease forwards}
  .portal img{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:center 60%;
    border:2px solid rgba(208,138,90,.55);
    box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 4px rgba(208,138,90,.10),0 0 30px rgba(208,138,90,.26);
    filter:saturate(1.02) contrast(1.05);transition:.4s}
  .portal:hover img{border-color:rgba(224,154,104,.9);
    box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 5px rgba(208,138,90,.16),0 0 44px rgba(208,138,90,.5);
    transform:scale(1.07)}
  .portal .cap{margin-top:11px;font-size:10.5px;letter-spacing:.05em;color:var(--dim);line-height:1.4}
  .portal .cap b{display:block;font-family:'Fraunces',serif;font-size:13.5px;color:var(--ink);font-weight:400;margin-bottom:2px}
  .arr{align-self:center;color:var(--rust);opacity:.6;font-size:16px;margin-top:42px}
  @keyframes rise{to{opacity:1;transform:none}}

  /* FAQ accordion */
  .faq{max-width:620px;margin:34px auto 4px}
  .faq-title{text-align:center;font-family:'Fraunces',serif;font-weight:300;
    font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--rust);margin-bottom:14px}
  .faq-item{border-top:1px solid var(--stroke)}
  .faq-item:last-child{border-bottom:1px solid var(--stroke)}
  .faq-item summary{list-style:none;cursor:pointer;padding:16px 4px;
    font-family:'Fraunces',serif;font-size:17px;color:var(--ink);
    display:flex;justify-content:space-between;align-items:center;gap:12px;transition:color .2s}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";color:var(--rust);font-size:20px;font-family:'Inter',sans-serif;
    flex-shrink:0;transition:transform .25s}
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-item summary:hover{color:var(--rust)}
  .faq-a{padding:0 4px 18px}
  .faq-a p{font-size:14.5px;line-height:1.7;color:var(--dim);margin:0}

  /* process timeline */
  .timeline{max-width:620px;margin:20px auto 8px}
  .tstep{display:grid;grid-template-columns:46px 150px 1fr;gap:22px;align-items:center;padding:20px 0;
    opacity:0;transform:translateY(12px);animation:rise .8s ease forwards}
  .tstep:nth-child(1){animation-delay:.05s}
  .tstep:nth-child(2){animation-delay:.16s}
  .tstep:nth-child(3){animation-delay:.27s}
  .tstep:nth-child(4){animation-delay:.38s}
  .tstep:nth-child(5){animation-delay:.49s}
  .trail{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center}
  .tnum{font-family:'Fraunces',serif;font-size:16px;color:var(--rust);
    width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(208,138,90,.4);background:rgba(208,138,90,.06);flex-shrink:0}
  .trail::after{content:"";width:1px;flex:1;margin-top:8px;
    background:linear-gradient(180deg,rgba(208,138,90,.4),rgba(208,138,90,.06))}
  .tstep:last-child .trail::after{display:none}
  .tphoto img{width:150px;height:150px;object-fit:cover;border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.06);
    filter:saturate(1.04) contrast(1.02);transition:.4s}
  .tstep:hover .tphoto img{transform:scale(1.03);box-shadow:0 16px 38px rgba(0,0,0,.6)}
  .ttxt h3{font-family:'Fraunces',serif;font-weight:400;font-size:22px;color:var(--ink);margin-bottom:6px}
  .ttxt p{font-size:14.5px;line-height:1.6;color:var(--dim);margin:0}
  @media(max-width:560px){
    .view{padding-left:24px;padding-right:24px}
    .hero-chain{width:calc(100% + 48px);max-width:calc(100% + 48px);
      margin-left:-24px;margin-right:-24px}
    .tstep{grid-template-columns:38px 96px 1fr;gap:14px;padding:16px 0}
    .tnum{width:34px;height:34px;font-size:14px}
    .tphoto img{width:96px;height:96px}
    .ttxt h3{font-size:18px}
    .ttxt p{font-size:13px}
  }

  /* product gallery */
  .metal-toggle{display:inline-flex;gap:5px;margin:2px auto 16px;padding:5px;border-radius:999px;
    background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
  .metal-toggle button{padding:8px 18px;border:none;border-radius:999px;background:transparent;color:var(--dim);
    font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
  .metal-toggle button.on{background:rgba(255,255,255,.13);color:var(--ink)}
  .metal-choice{display:flex;gap:6px;padding:5px;border-radius:12px;
    background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
  .metal-choice button{flex:1;padding:11px 8px;border:none;border-radius:8px;background:transparent;color:var(--dim);
    font-family:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}
  .metal-choice button:hover{color:var(--ink)}
  .metal-choice button.on{background:rgba(208,138,90,.18);color:var(--ink);border:1px solid rgba(208,138,90,.4)}
  .piece-wrap{text-align:center;margin:2px 0 14px}
  .piece{width:min(360px,88%);height:300px;object-fit:cover;object-position:center 42%;
    border-radius:20px;margin:0 auto;display:block;
    border:1px solid var(--stroke);box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 42px rgba(208,138,90,.12)}
  .center{text-align:center}

  .btn{display:inline-block;padding:14px 34px;border-radius:999px;border:1px solid var(--stroke);
    background:rgba(255,255,255,.09);color:var(--ink);font-size:13px;letter-spacing:.16em;
    text-transform:uppercase;cursor:pointer;transition:.25s;text-decoration:none}
  .btn:hover{background:rgba(255,255,255,.18);letter-spacing:.2em;transform:translateY(-1px)}
  .btn.gold{background:linear-gradient(120deg,rgba(208,138,90,.92),rgba(150,86,52,.92));border-color:transparent}
  .btn.gold:hover{background:linear-gradient(120deg,rgba(224,154,104,1),rgba(168,98,60,1))}

  .step{display:flex;gap:16px;margin-bottom:18px;align-items:flex-start}
  .step .n{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--rust);color:var(--rust);
    display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:15px}
  .step .tx b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px;font-weight:500}
  .step .tx span{color:var(--dim);font-size:14px;line-height:1.6}
  .finePrint{font-size:11px;line-height:1.65;color:var(--dim);opacity:.7;font-style:italic;
    max-width:none;margin:6px 0 6px;padding-left:50px}

  .price{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--stroke);font-size:15px}
  .priceNote{font-size:12px;font-style:italic;color:var(--dim);opacity:.75;margin:10px 0 0}
  /* recently-made gallery */
  .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:6px 0 12px}
  .gal-item{margin:0;overflow:hidden;border-radius:14px;border:1px solid var(--stroke);
    background:rgba(255,255,255,.03);cursor:pointer}
  .gal-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
    transition:transform .5s ease;filter:saturate(1.03)}
  .gal-item:hover img{transform:scale(1.06)}
  /* lightbox */
  .lightbox{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
    background:rgba(6,5,4,.88);backdrop-filter:blur(6px);padding:24px;cursor:zoom-out}
  .lightbox.open{display:flex}
  .lightbox img{max-width:min(92vw,900px);max-height:88vh;border-radius:14px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:default;
    animation:lbin .3s ease}
  @keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  .lightbox-close{position:fixed;top:20px;right:24px;z-index:9999;
    width:46px;height:46px;border-radius:50%;border:1px solid var(--stroke);
    background:rgba(20,18,16,.7);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:.2s}
  .lightbox-close:hover{background:rgba(208,138,90,.25);border-color:var(--rust)}
  .gal-note{text-align:center;font-size:13px;color:var(--dim);margin:2px 0 6px}
  .gal-note a{color:var(--rust);text-decoration:none}
  .gal-note a:hover{text-decoration:underline}
  @media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}
  .contact{text-align:center;margin:32px auto 4px;padding-top:24px;border-top:1px solid var(--stroke);max-width:520px}
  .page-cta{text-align:center;margin:34px auto 4px}
  .letter .contact{text-align:left;max-width:600px}
  .contact > p{font-size:13px;color:var(--dim);margin:0 0 8px}
  .contact-links{font-family:'Fraunces',serif;font-size:15px;letter-spacing:.02em}
  .contact-links a{color:var(--ink);text-decoration:none;transition:color .2s}
  .contact-links a:hover{color:var(--rust)}
  .contact-links .dot{color:var(--rust);margin:0 10px;opacity:.6}
  .price:last-of-type{border-bottom:none}
  .price b{font-family:'Fraunces',serif;font-weight:400}
  .price .amt{color:var(--rust);font-family:'Fraunces',serif}

  .field{margin-bottom:14px}
  .field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
  .field input,.field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:.2s}
  .field input::placeholder,.field textarea::placeholder{color:rgba(244,239,230,.3)}
  .field input:focus,.field textarea:focus{border-color:var(--rust);background:rgba(255,255,255,.07)}
  .field textarea{resize:vertical;min-height:82px}
  .thanks{text-align:center;padding:22px 0}
  .thanks .big{font-family:'Fraunces',serif;font-size:28px;margin-bottom:10px}

  .nav.current{color:var(--ink);background:rgba(255,255,255,.05)}

  /* mobile: hamburger replaces the pill */
  @media(max-width:640px){
    #navToggle{display:flex}
    #hud{left:auto;right:16px;top:74px;bottom:auto;transform:translateY(-12px);
      flex-direction:column;gap:6px;padding:12px;width:min(72vw,260px);max-width:none;
      align-items:stretch;border-radius:20px;
      opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
    #hud.open{opacity:1;pointer-events:auto;transform:translateY(0)}
    #hud .nav{padding:14px 18px;border-radius:14px;text-align:center;font-size:14px}
    #hud .nav.current{background:rgba(255,255,255,.08)}
  }