/* ============ C&J CREATIONS · DESIGN TOKENS ============
   Palette drawn from the product itself: black enamel ink,
   14k gold (warmer than 24k), and the cream of a jewelry card. */
:root{
  /* Light showroom theme (V3). Token names kept from the dark build for
     stability: --ink is now the page background, --cream is now the text. */
  --ink:#faf7f1;          /* showroom white */
  --surface:#ffffff;      /* display-case white */
  --line:#e6dccb;         /* hairline on light */
  --gold:#b8923f;         /* 14k body tone, deepened for light bg */
  --gold-hi:#d9b96a;      /* high polish */
  --gold-lo:#8a6a2a;      /* recessed carve */
  --cream:#2a2118;        /* espresso text */
  --taupe:#7d6c55;        /* secondary text */
  --cj-red:#9e1b24;       /* C&J logo red */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --blackletter:'Grenze Gotisch','Cormorant Garamond',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}
img,svg{display:block;max-width:100%}

/* ============ SHARED PIECES ============ */
.wrap{max-width:720px;margin:0 auto;padding:0 22px}
.gold-text{
  background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,var(--gold-lo) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.eyebrow{
  font-family:var(--sans);font-weight:500;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.eyebrow::before{
  content:"";display:inline-block;width:13px;height:13px;margin-right:9px;
  vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23b8923f'%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%239e1b24'/%3E%3C/svg%3E") no-repeat center/contain;
}
.kapa{
  height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M0 12L13 0L26 12Z' fill='%23b8923f' fill-opacity='.8'/%3E%3C/svg%3E") repeat-x center bottom/26px 12px;
}
.section{padding:72px 0}
.section h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(28px,7vw,40px);line-height:1.15;
  margin-bottom:18px;
}
.section p.lede{color:var(--taupe);max-width:52ch}
.divider{display:flex;justify-content:center;padding:6px 0}
.divider svg{width:190px;height:22px;opacity:.9}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .gold-text{animation:none !important}
  .hero-rise{animation:none !important;opacity:1 !important}
}

/* ============ TOP BAR ============ */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  border-bottom:1px solid rgba(255,255,255,.22);
  font-size:clamp(10px,3vw,11.5px);letter-spacing:.14em;text-transform:uppercase;
  color:#f0e6d2;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.topbar .wrap{max-width:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:14px}
.topbar span{white-space:nowrap}
.topbar .trust{color:var(--gold-hi)}
/* Chrome keeps reporting the status bar's height as safe-area-inset-top even
   after the Fullscreen API has taken the status bar away, which would leave a
   band of nothing above the trust line. An installed app is the opposite case
   — there the inset is real — so only the fullscreen state cancels it. The
   class is set from fullscreenchange; no media feature separates the two. */
body.is-full .topbar .wrap{padding-top:14px}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;
  align-items:center;justify-content:center;text-align:center;
  overflow:hidden;padding:96px 0 72px;background:#171009;
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 85% at 50% 44%,rgba(16,11,6,.1) 0%,rgba(16,11,6,.3) 52%,rgba(16,11,6,.82) 100%),
    linear-gradient(180deg,rgba(16,11,6,.5),rgba(16,11,6,.12) 42%,rgba(16,11,6,.55));
}
.hero .wrap{position:relative;z-index:2}
.hero-rise{opacity:0;animation:rise .9s ease forwards}
.hero .logo-stack{
  position:relative;display:block;width:min(230px,58vw);aspect-ratio:1;
  margin:0 auto;border-radius:50%;
  box-shadow:0 0 80px rgba(217,185,106,.38),0 8px 34px rgba(0,0,0,.55);
}
.hero .logo-stack img{
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  opacity:0;transition:opacity 1.4s ease;
}
.hero .logo-stack img.on{opacity:1}
.hero h1{line-height:0;margin:0 0 26px}
.hero .aloha{
  margin-top:24px;font-family:var(--serif);font-style:italic;
  font-size:21px;letter-spacing:.12em;color:var(--gold-hi);
  text-shadow:0 1px 16px rgba(0,0,0,.6);
}
.hero .tag{
  margin-top:10px;
  font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:#f0e6d2;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero .tag b{color:#ffffff;font-weight:500}
.hero .est{
  margin-top:20px;font-family:var(--serif);font-style:italic;
  font-size:17px;color:var(--gold-hi);text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero .tag span,.hero .est span{white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.2s}.d3{animation-delay:.35s}
@media (prefers-reduced-motion:no-preference){
  .gold-text{animation:shimmer 7s linear infinite}
  @keyframes shimmer{to{background-position:200% center}}
}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;transition:transform .2s ease,box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-gold{
  color:var(--ink);
  background:linear-gradient(120deg,var(--gold-lo),var(--gold) 45%,var(--gold-hi));
  box-shadow:0 4px 20px rgba(201,162,75,.22);
}
.btn-line{color:var(--gold);border:1px solid var(--gold-lo)}
.btn-line:hover{border-color:var(--gold)}
button.btn{border:0;cursor:pointer}
button.btn-line{border:1px solid var(--gold-lo);background:none}

/* Sticky action bar */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:1fr 64px 64px;
  background:#1c1610;border-top:1px solid rgba(217,185,106,.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:0;height:56px;font-family:var(--sans);font-weight:500;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.actionbar svg{width:16px;height:16px;flex:none}
.actionbar .ab-call{color:#1c1610;background:linear-gradient(120deg,var(--gold-lo),var(--gold) 45%,var(--gold-hi))}
.actionbar .ab-dir{color:var(--gold-hi);border-left:1px solid rgba(217,185,106,.25)}
.actionbar .ab-dir svg,.ab-tray svg{width:18px;height:18px}
.ab-tray{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:56px;background:#1c1610;border:0;cursor:pointer;color:var(--gold-hi);
  border-left:1px solid rgba(217,185,106,.25);
}
.tray-badge{
  position:absolute;top:8px;right:10px;min-width:17px;height:17px;
  padding:0 4px;border-radius:999px;background:var(--cj-red);color:#fff;
  font-size:10.5px;font-weight:600;line-height:17px;text-align:center;
}

/* ============ GUARANTEE ============ */
.guarantee{position:relative;overflow:hidden;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.guarantee::before{
  content:"";position:absolute;right:-46px;top:-46px;width:230px;height:230px;
  transform:rotate(18deg);opacity:.08;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8923f' stroke-width='.7'%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.1' ry='5.2' transform='rotate(288 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E") no-repeat center/contain;
}
.guarantee h2{margin-bottom:10px}
.guarantee .big{
  font-family:var(--serif);font-size:clamp(22px,5.6vw,30px);
  font-weight:500;line-height:1.35;max-width:24ch;margin:0 auto 14px;
}
.guarantee .since{font-style:italic;font-family:var(--serif);color:var(--taupe);font-size:16px}

/* ============ STORY ============ */
.story .cols{display:grid;gap:26px}
.story .fact{
  border-left:1px solid var(--gold-lo);padding-left:18px;
  font-size:14px;color:var(--taupe);
}
.story .fact b{display:block;color:var(--gold);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2px}

/* ============ COLLECTION ============ */
.collection .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;margin:0;text-align:center;
  box-shadow:0 2px 16px rgba(70,52,20,.07);
  transition:border-color .25s ease,transform .25s ease;
}
.tile:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.tile figcaption{padding:13px 12px 15px}
.tile h3{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.03em}
.tile .sub{margin-top:4px;font-size:12px;color:var(--taupe);line-height:1.5}
.collection .note{
  margin-top:20px;text-align:center;font-size:13px;color:var(--taupe);
  font-style:italic;font-family:var(--serif);
}

/* ============ THE CASE · GALLERY + TRAY ============ */
.gallery .grid-g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.gcard{
  display:flex;flex-direction:column;color:var(--cream);
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;margin:0;cursor:pointer;box-shadow:0 2px 16px rgba(70,52,20,.07);
  transition:border-color .25s ease,transform .25s ease;
}
.gcard:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.gcard .add-btn{margin-top:auto}
.gcard img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gcard .gname{font-family:var(--serif);font-size:15.5px;padding:10px 10px 9px;text-align:center}
.add-btn{
  display:block;width:calc(100% - 20px);margin:8px 10px 12px;padding:9px 0;
  font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;text-align:center;color:var(--gold-lo);background:none;
  border:1px solid var(--gold-lo);border-radius:2px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.gcard:hover .add-btn,.add-btn:hover{color:#fff;background:var(--gold);border-color:var(--gold)}
.gallery .note{
  margin-top:20px;text-align:center;font-size:13px;color:var(--taupe);
  font-style:italic;font-family:var(--serif);
}
/* ============ RIGHT-CLICK MENU ============
   z-index clears the tray panel (49) — a menu that can open over anything
   must paint over everything. */
.ctxmenu{
  position:fixed;top:0;left:0;z-index:60;min-width:196px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:6px;box-shadow:0 14px 38px rgba(42,33,24,.22);display:none;
}
.ctxmenu.open{display:block}
.ctxmenu button,.ctxmenu a{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;padding:9px 10px;border-radius:7px;
  text-decoration:none;
  font-family:var(--sans);font-weight:400;font-size:14.5px;color:var(--cream);
}
.ctxmenu button:hover,.ctxmenu a:hover{background:rgba(184,146,63,.11)}
.ctxmenu button[disabled]{color:var(--taupe);opacity:.55;cursor:default}
.ctxmenu button[disabled]:hover{background:none}
.ctxmenu hr{border:none;border-top:1px solid var(--line);margin:5px 7px}
.ctxmenu svg{
  width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

.tray-backdrop{position:fixed;inset:0;background:rgba(20,14,8,.5);z-index:48}
.tray-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:49;background:var(--surface);
  border-top:2px solid var(--gold);border-radius:14px 14px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  max-height:72vh;overflow:auto;box-shadow:0 -12px 40px rgba(0,0,0,.25);
}
.tray-head{display:flex;justify-content:space-between;align-items:center}
.tray-head h3{font-family:var(--serif);font-weight:500;font-size:24px}
.tray-close{background:none;border:0;font-size:26px;color:var(--taupe);cursor:pointer;line-height:1}
.tray-list{list-style:none;margin:12px 0 0}
.tray-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.tray-list .tname{flex:1}
.tray-list .tspec{display:block;font-size:12.5px;color:var(--taupe);line-height:1.4}
.tqty{display:flex;align-items:center;gap:9px}
.tqty button{width:26px;height:26px;border:1px solid var(--line);background:var(--ink);border-radius:2px;color:var(--cream);cursor:pointer;font-size:15px;line-height:1}
.trm{background:none;border:0;color:var(--cj-red);cursor:pointer;font-size:17px}
.tray-empty{color:var(--taupe);font-size:14.5px;margin:16px 0 4px}
.tray-note{color:var(--taupe);font-size:12.5px;line-height:1.55;margin:14px 0 16px}
.tray-cta{
  display:block;text-align:center;padding:15px 0;
  font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#1c1610;border-radius:2px;
  background:linear-gradient(120deg,var(--gold-lo),var(--gold) 45%,var(--gold-hi));
}
.tray-cta.disabled{opacity:.45;pointer-events:none}
[hidden]{display:none !important}

/* ============ REVIEWS ============ */
.reviews{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reviews .score{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.reviews .score .num{font-family:var(--serif);font-size:44px;line-height:1}
.reviews .stars{color:var(--gold);letter-spacing:3px;font-size:15px}
.reviews .src{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.quote{border-left:1px solid var(--gold-lo);padding-left:18px;margin-bottom:22px}
.quote p{font-family:var(--serif);font-size:19px;line-height:1.5}
.quote cite{display:block;margin-top:6px;font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}

/* ============ VAULT · AS SEEN IN ============ */
.vault{text-align:center}
.vault .frames{display:grid;gap:14px;margin-top:34px}
.frame{
  position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;background:var(--surface);
}
.frame .fvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(16,11,6,.72));
}
.frame .flabel{
  position:absolute;left:0;right:0;bottom:9px;z-index:1;text-align:center;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#f0e6d2;
}
.vault .series{
  margin-top:22px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);
}
.vault .series b{color:var(--gold);font-weight:500}

/* ============ CUSTOM ORDERS ============ */
.custom .steps{display:grid;gap:22px;margin:34px 0}
.step{display:flex;gap:18px;align-items:flex-start;text-align:left}
.step .n{
  font-family:var(--serif);font-size:30px;color:var(--gold);line-height:1;
  min-width:34px;border-bottom:1px solid var(--gold-lo);padding-bottom:6px;
}
.step h3{font-family:var(--serif);font-weight:500;font-size:19px;margin-bottom:4px}
.step p{color:var(--taupe);font-size:15px}
.custom .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.deposit-panel{
  border:1px solid var(--gold-lo);border-radius:3px;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(201,162,75,.07),transparent 60%),
    var(--surface);
  padding:26px 20px;margin-top:6px;
}
.deposit-panel .eyebrow{margin-bottom:8px}
.deposit-panel .dp-price{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,8vw,42px);line-height:1;margin-bottom:12px;
}
.deposit-panel .dp-price small{
  font-family:var(--sans);font-weight:300;font-size:15px;
  color:var(--taupe);letter-spacing:.04em;
}
.deposit-panel .dp-copy{color:var(--taupe);font-size:15px;max-width:52ch;margin-bottom:22px}
.deposit-panel .dp-copy b{color:var(--cream);font-weight:400}

/* ============ VISIT ============ */
.visit{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.visit .shop-photo{width:100%;height:auto;border:1px solid var(--line);border-radius:3px;margin-top:26px;display:block}
.visit .info{display:grid;gap:30px;margin-top:30px}
.visit h3{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:10px}
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--taupe)}
.hours td:last-child{text-align:right;color:var(--cream)}
.hours tr.closed td:last-child{color:var(--taupe);font-style:italic;font-family:var(--serif)}
.addr p{color:var(--taupe)}
.addr p b{color:var(--cream);font-weight:400}
.addr .links{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ============ WAYS TO PAY ============ */
.pay .grid-p{display:grid;gap:16px;margin-top:34px}
.pay-card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;
  padding:24px 20px 22px;overflow:hidden;
  box-shadow:0 2px 16px rgba(70,52,20,.07);
}
.pay-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi),var(--gold-lo));
}
.pay-card .kind{
  font-family:var(--sans);font-weight:500;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.pay-card h3{
  font-family:var(--serif);font-weight:500;font-size:25px;
  line-height:1.2;margin:5px 0 9px;
}
.pay-card .what{color:var(--taupe);font-size:15px;margin-bottom:16px}
.pay-card ul{list-style:none}
.pay-card li{
  padding:10px 0;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--taupe);
}
.pay-card .btn{margin-top:20px}
.pay-card b{color:var(--cream);font-weight:400}
.fineprint{margin-top:28px;font-size:11.5px;line-height:1.7;color:var(--taupe)}
.fineprint p + p{margin-top:10px}
.fineprint b{font-weight:500}

/* ============ START YOUR ORDER ============ */
.order .form{
  border:1px solid var(--gold-lo);border-radius:3px;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(201,162,75,.07),transparent 60%),
    var(--surface);
  padding:26px 20px;margin-top:32px;
}
.fields{display:grid;gap:22px}
.field label{
  display:block;margin-bottom:5px;
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.field input,.field select,.field textarea{
  width:100%;padding:9px 2px;
  font-family:var(--sans);font-weight:300;font-size:16px;
  color:var(--cream);background:none;
  border:none;border-bottom:1px solid var(--line);border-radius:0;
  -webkit-appearance:none;appearance:none;
}
/* appearance:none takes the native caret with it, so the select gets its own. */
.field select{
  padding-right:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238a6a2a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.field textarea{resize:vertical;min-height:66px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#a4917a}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field .hint{margin-top:6px;font-size:12.5px;color:var(--taupe)}
.field.bad input,.field.bad select{border-bottom-color:var(--cj-red)}
.field.bad .hint{color:var(--cj-red)}
/* The spelling, echoed back at the size it will be read at. A name plate is
   cut once, so the customer proofs it here rather than at the counter. */
.carve{
  margin-top:16px;padding:16px 12px;text-align:center;
  border:1px dashed var(--gold-lo);border-radius:3px;
}
.carve .cap{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);
}
.carve .word{
  font-family:var(--serif);font-weight:600;color:var(--gold-lo);
  font-size:clamp(30px,9vw,46px);line-height:1.25;
  margin-top:8px;word-break:break-word;
}
.order .send{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.order .ride,.order .said{margin-top:12px;font-size:12.5px}
.order .ride{color:var(--taupe)}
.order .said{color:var(--gold-lo);min-height:19px}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:34px 0 calc(76px + env(safe-area-inset-bottom));text-align:center}
footer .fname{font-size:20px;letter-spacing:.06em}
footer .fname .f-cj{font-family:var(--serif);font-weight:600;color:var(--cj-red)}
footer .fname .f-cre{font-family:var(--blackletter);color:var(--cream)}
footer p{font-size:12px;color:var(--taupe);margin-top:8px;letter-spacing:.06em}


/* ============ PRODUCT VIEW ============
   A second view in the same file. Home stays in the DOM while a piece is open
   so the tray, the photographs and the scroll position all survive the trip. */
.pdp-head{
  position:sticky;top:0;z-index:30;background:var(--ink);
  border-bottom:1px solid var(--line);
}
.pdp-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:13px;padding-bottom:13px}
.pdp-head .back{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lo)}
.pdp-head .back:hover{color:var(--gold)}
.pdp-head .mark{font-size:18px;letter-spacing:.06em;white-space:nowrap}
.pdp-head .f-cj{font-family:var(--serif);font-weight:600;color:var(--cj-red)}
.pdp-head .f-cre{font-family:var(--blackletter);color:var(--cream)}
body.on-product .topbar{display:none}

.pdp{display:grid;gap:34px;padding:22px 0 10px}
.crumb{padding:16px 0 0;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe)}
.crumb a{color:var(--taupe)}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 7px;opacity:.6}

/* ---- gallery ---- */
.gal{position:relative}
/* One photograph at a time, the full width of the column, nothing of the next
   one showing. Below the two-column breakpoint the gallery also cancels the
   wrap's side padding so the picture runs edge to edge on a phone, and gives
   that padding back to the caption underneath. The gap stays declared at zero
   because the scroll maths below reads it. */
.gal{margin-inline:-22px}
.gal-track{
  display:flex;gap:0;padding:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{
  flex:0 0 100%;scroll-snap-align:center;position:relative;
  background:var(--surface);overflow:hidden;aspect-ratio:1;
}
.gal-slide img,.gal-slide video{width:100%;height:100%;object-fit:cover}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#f5ecdb;
  background:linear-gradient(180deg,transparent,rgba(16,11,6,.72));
}
.gal-num{
  position:absolute;top:10px;right:10px;z-index:2;padding:4px 10px;border-radius:999px;
  background:rgba(28,22,16,.66);color:#f0e6d2;font-size:11px;letter-spacing:.12em;
}
.play{
  position:absolute;inset:0;margin:auto;width:62px;height:62px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:#1c1610;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 26px rgba(0,0,0,.3);
}
.play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.play.playing{opacity:0;pointer-events:none}
.gal-arrow{display:none}
.shotnote{margin:16px 22px 0;font-family:var(--serif);font-style:italic;
  font-size:13px;line-height:1.55;color:var(--taupe);text-align:center}

/* ---- info column ---- */
.info h1{font-family:var(--serif);font-weight:500;
  font-size:clamp(29px,7vw,42px);line-height:1.12;margin:9px 0 10px}
.ref{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.price{
  margin:22px 0 0;padding:20px;border:1px solid var(--gold-lo);border-radius:3px;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(201,162,75,.08),transparent 60%),
    var(--surface);
}
.price .big{font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,6.5vw,34px);line-height:1.15}
.price .sub{margin-top:8px;font-size:14.5px;color:var(--taupe);max-width:46ch}
.price .fin{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;color:var(--taupe)}
.price .fin b{color:var(--cream);font-weight:400}
.info .lede{margin-top:24px;color:var(--taupe);max-width:56ch}
.spec{list-style:none;margin-top:22px}
.spec li{position:relative;padding:11px 0 11px 26px;
  border-bottom:1px solid var(--line);font-size:15px}
.spec li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;
  transform:rotate(45deg);background:var(--gold)}
.status{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lo)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(184,146,63,.18)}

/* ---- options: same field treatment as the order form ---- */
.opts{display:grid;gap:20px;margin-top:26px}
.opt label,.qty-row > span{display:block;margin-bottom:5px;font-family:var(--sans);
  font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.opt select,.opt input{
  width:100%;padding:9px 2px;font-family:var(--sans);font-weight:300;font-size:16px;
  color:var(--cream);background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.opt select{padding-right:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238a6a2a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 2px center}
.opt input::placeholder{color:#a4917a}
.opt select:focus,.opt input:focus{outline:none;border-bottom-color:var(--gold)}
/* The lettering block is the order form's, borrowed whole. These three only
   change the hand it is set in, so the proof matches the piece. */
.carve .word.script{font-style:italic}
.carve .word.oldenglish{font-family:var(--blackletter)}
.carve .word.block{letter-spacing:.02em}
.qty-row{margin-top:24px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px}
.qty button{width:44px;height:44px;border:0;background:var(--surface);color:var(--cream);
  font-size:19px;line-height:1;cursor:pointer}
.qty output{min-width:46px;text-align:center;font-size:16px;height:44px;line-height:44px;
  background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.buy{display:grid;gap:12px;margin-top:26px}
.buy .btn{width:100%}
.p-said{margin-top:12px;min-height:19px;font-size:12.5px;color:var(--gold-lo)}

/* ---- trust + accordions ---- */
.pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;text-align:center}
.pdp-trust div{font-size:11.5px;letter-spacing:.1em;color:var(--taupe);line-height:1.5}
.pdp-trust b{display:block;color:var(--gold);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px}
.acc{margin-top:8px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:17px 30px 17px 0;position:relative;
  font-family:var(--serif);font-size:19px;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s ease}
.acc details[open] summary::after{transform:rotate(-135deg);top:30px}
.acc .body{padding:0 0 20px;color:var(--taupe);font-size:14.5px}
.acc .body p + p{margin-top:11px}
.acc .body b{color:var(--cream);font-weight:400}

/* ---- full screen ----
   Today's photographs are 640px square exports, so the card is not cropping
   them and full screen is not revealing hidden edges. What it buys is the
   piece alone on a black field at the width of the screen, with the browser's
   own pinch zoom for the enamel and the letter cuts. It also means John's
   session can be shot in any shape without a square card deciding what gets
   seen. The corner glyph is the only thing that says the frame opens, so it
   sits on photographs and not on the clip, which already shows a play button. */
.gal-slide:has(img){cursor:zoom-in}
.gal-slide:has(img)::after{
  content:"";position:absolute;top:10px;left:10px;z-index:2;
  width:30px;height:30px;border-radius:999px;pointer-events:none;
  background:rgba(28,22,16,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0e6d2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5'/%3E%3Cpath d='M20 9V4h-5'/%3E%3Cpath d='M4 15v5h5'/%3E%3Cpath d='M20 15v5h-5'/%3E%3C/svg%3E") no-repeat center/15px;
}
.gal-slide:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
body.lb-on{overflow:hidden}
.lightbox{
  position:fixed;inset:0;z-index:70;display:flex;background:#0f0b06;
  padding:calc(env(safe-area-inset-top) + 4px) 0 calc(env(safe-area-inset-bottom) + 4px);
}
.lb-track{
  flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{
  flex:0 0 100%;scroll-snap-align:center;padding:14px;
  display:flex;align-items:center;justify-content:center;
}
.lb-slide img,.lb-slide video{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.lb-num{
  position:absolute;top:calc(env(safe-area-inset-top) + 22px);left:18px;z-index:3;
  font-size:12px;letter-spacing:.14em;color:#f0e6d2;
}
.lb-close{
  position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:12px;z-index:3;
  width:42px;height:42px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(240,230,210,.14);color:#f0e6d2;font-size:26px;line-height:1;
}
.lb-arrow{display:none}
@media (min-width:760px){
  .lb-arrow{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:46px;height:46px;border:0;border-radius:999px;cursor:pointer;
    background:rgba(240,230,210,.14);color:#f0e6d2;
  }
  .lb-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
  .lb-arrow.prev{left:16px}
  .lb-arrow.next{right:16px}
  .lb-arrow[disabled]{opacity:.22;pointer-events:none}
}

/* ---- more from the case ---- */
.more{border-top:1px solid var(--line);margin-top:44px;padding:44px 0 0}
.more h2{font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,6vw,34px);margin:10px 0 22px}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 46%;max-width:230px;scroll-snap-align:start;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;color:var(--cream);
  display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease}
.rail a:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.rail img{width:100%;aspect-ratio:1;object-fit:cover}
.rail .rn{font-family:var(--serif);font-size:16px;padding:11px 11px 3px;line-height:1.25}
.rail .rc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);padding:6px 11px 13px;margin-top:auto}
#product{padding-bottom:40px}

/* ============ WIDER SCREENS ============ */
@media (min-width:560px){
  .collection .grid{grid-template-columns:repeat(3,1fr)}
  .gallery .grid-g{grid-template-columns:repeat(4,1fr)}
  .vault .frames{grid-template-columns:repeat(3,1fr)}
  .visit .info{grid-template-columns:1fr 1fr}
  .story .cols{grid-template-columns:1.4fr 1fr;align-items:start}
  .pay .grid-p{grid-template-columns:1fr 1fr}
  /* Side by side the two cards run different lengths, so the buttons
     are pushed to a shared baseline rather than floating mid-card. */
  .pay-card{display:flex;flex-direction:column}
  .pay-card ul{margin-bottom:20px}
  .pay-card .btn{margin-top:auto;align-self:flex-start}
  .fields{grid-template-columns:1fr 1fr}
  .field.wide{grid-column:1 / -1}
}
@media (min-width:620px){
  .rail a{flex:0 0 31%}
}
@media (min-width:960px){
  .wrap{max-width:980px}
  .section{padding:88px 0}
  .pdp{grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;padding-top:26px}
  /* Room to read the whole spec sheet without the photograph scrolling away.
     In a column it is a framed card again, not a full-bleed picture. */
  .gal{position:sticky;top:78px;margin-inline:0}
  .gal-slide{border:1px solid var(--line);border-radius:3px}
  .shotnote{margin-inline:0}
  .gal-arrow{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--gold-lo);cursor:pointer;
  }
  .gal-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
  .gal-arrow.prev{left:12px}
  .gal-arrow.next{right:12px}
  .gal-arrow[disabled]{opacity:.3;pointer-events:none}
  .buy{grid-template-columns:1fr 1fr}
  .buy .btn{width:auto}
  .rail a{flex:0 0 23%}
}
@media (min-width:1100px){
  .breakout{
    width:min(1240px,calc(100vw - 64px));
    position:relative;left:50%;transform:translateX(-50%);
  }
}