/* ====================================================================
   Pieroni's: home sections (Phase 2). The Living Engraving, below the counter.
   Everything sits on calm engraved water; panels are plates, art is inked in.
   ==================================================================== */
:root{
  --hcg:url(art/corner-g-tl.webp) left 5px top 5px/22px no-repeat, url(art/corner-g-tr.webp) right 5px top 5px/22px no-repeat, url(art/corner-g-bl.webp) left 5px bottom 5px/22px no-repeat, url(art/corner-g-br.webp) right 5px bottom 5px/22px no-repeat;
  --hcd:url(art/corner-d-tl.webp) left 0 top 0/30px no-repeat, url(art/corner-d-tr.webp) right 0 top 0/30px no-repeat, url(art/corner-d-bl.webp) left 0 bottom 0/30px no-repeat, url(art/corner-d-br.webp) right 0 bottom 0/30px no-repeat;
}
.sec{position:relative; padding:clamp(72px, 10vw, 140px) var(--gut); max-width:1400px; margin:0 auto}
.sec-head{max-width:760px; margin:0 auto clamp(36px,4vw,56px); text-align:center}
.eyebrow{margin:0 0 14px; font:italic 500 19px/1.2 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; letter-spacing:.01em}
.sec-title{margin:0; font:500 clamp(36px, 4.2vw, 64px)/1.02 var(--serif); letter-spacing:-.018em; font-variation-settings:'opsz' 40; color:var(--paper); text-wrap:balance}
.sec-title em{font-style:italic; font-weight:400; color:var(--leaf)}
.sec-lede{margin:18px auto 0; max-width:36em; font-size:18px; line-height:1.65; color:rgba(244,239,228,.86); text-wrap:pretty}
.sec-head .h-orn{margin:18px auto 0}
.sec-more{margin:34px 0 0; text-align:center} .sec-more.left{text-align:left}
.tbc{font-style:italic; color:var(--silver); opacity:.8}
.btn-line{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border:1px solid var(--gold); color:var(--paper); text-decoration:none; font:600 15.5px/1 var(--sans);
  background:var(--tex-hatch), rgba(1,22,40,.7); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px var(--hair-soft); transition:transform .16s var(--ease-out), border-color .2s ease, background-color .2s ease}
.btn-line::after{content:""; width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg); transition:transform .3s var(--ease-out)}
.btn-line:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .btn-line:hover{border-color:var(--leaf)} .btn-line:hover::after{transform:translateX(3px) rotate(45deg)} }
@media (min-resolution: 2dppx){ .sec-title{font-variation-settings:'opsz' 72} }

/* a quiet plate behind each section so text never sits on busy water */
.sec::before{content:""; position:absolute; inset:24px 0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(1,17,31,.72), rgba(1,17,31,0) 75%)}

/* ---------- strip ---------- */
.strip{position:relative; padding:0 var(--gut); margin-top:-20px}
.strip-in{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:18px 26px; padding:22px 30px;
  background:var(--hcg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.92), rgba(1,22,40,.95)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.25)}
.strip-item{display:flex; align-items:center; justify-content:center; gap:14px; margin:0; font-size:15px; line-height:1.4; color:rgba(244,239,228,.88)}
.strip-item img{width:62px; height:40px; object-fit:contain}
.strip-item svg{width:26px; height:26px; color:var(--gold); margin:0 6px}
.strip-item b{color:var(--paper); font-weight:600}
.strip-item a{color:var(--leaf)}
.strip-orn{width:9px; height:9px; border:1px solid var(--gold); transform:rotate(45deg)}

/* ---------- range plates ---------- */
.plates{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.plate-card{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 30px 32px;
  background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5);
  box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.25), 0 30px 60px -36px #000; transition:transform .5s var(--ease-out), box-shadow .4s ease}
.plate-art{width:min(220px, 70%); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; margin-bottom:22px; background:radial-gradient(circle,#063257,#011a2e 72%);
  box-shadow:0 0 0 1px var(--gold), 0 0 0 5px rgba(1,22,40,.9), 0 0 0 6px var(--hair), 0 20px 40px -20px #000}
.plate-art img{width:78%; height:78%; object-fit:contain; -webkit-mask-image:radial-gradient(circle closest-side,#000 76%,transparent); mask-image:radial-gradient(circle closest-side,#000 76%,transparent); transition:transform .9s var(--ease-out)}
.plate-card h3{margin:0 0 12px; font:500 clamp(24px,2vw,30px)/1.1 var(--serif); font-variation-settings:'opsz' 40}
.plate-card h3 em{font-style:italic; color:var(--leaf)}
.plate-card p:not(.eyebrow){margin:0 0 22px; color:rgba(244,239,228,.84); font-size:16px; line-height:1.6; max-width:30em}
.plate-card .btn-line{margin-top:auto}
.plate-card .eyebrow{font-size:16px; margin-bottom:8px}
@media (hover:hover) and (pointer:fine){ .plate-card:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.4), 0 40px 70px -36px #000} .plate-card:hover .plate-art img{transform:scale(1.05) rotate(-2deg)} }

/* ---------- specials board ---------- */
.board{list-style:none; margin:0 auto 40px; padding:0; max-width:1100px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border:1px solid rgba(201,164,92,.5); background:var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.92), rgba(1,22,40,.96)); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.22)}
.board-day{position:relative; padding:30px 28px 28px; text-align:center}
.board-day + .board-day{border-left:1px solid var(--hair-soft)}
.bd-day{display:block; font:italic 500 17px/1 var(--serif); color:var(--silver); margin-bottom:12px}
.board-day h3{margin:0 0 10px; font:500 26px/1.1 var(--serif); font-variation-settings:'opsz' 40}
.board-day p{margin:0; color:rgba(244,239,228,.82); font-size:15.5px}
.bd-flag{display:none}
.board-day.is-today{background:linear-gradient(180deg, rgba(240,217,160,.14), rgba(240,217,160,.03))}
.board-day.is-today::before{content:""; position:absolute; inset:6px; border:1px solid rgba(240,217,160,.55); pointer-events:none}
.board-day.is-today .bd-flag{display:inline-block; margin-top:14px; padding:6px 16px 6px 12px; background:linear-gradient(180deg,#f3dda2,#c9a45c); color:#0b1c2a; font:600 12px/1 var(--sans); letter-spacing:.06em; font-variant:small-caps; text-transform:lowercase; clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%)}
.board-day.is-today .bd-day{color:var(--leaf)}
.shelf{max-width:1180px; margin:0 auto}

.shelf .card{opacity:1; transform:none}

/* ---------- salmon ---------- */
.salmon{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(36px,5vw,90px); align-items:center}
.salmon-art{position:relative; display:grid; place-items:center}
.salmon-medal{width:min(100%, 480px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle,#073a64,#011a2e 70%); box-shadow:0 0 0 1px var(--gold), 0 0 0 8px rgba(1,22,40,.9), 0 0 0 9px var(--hair), 0 0 0 22px rgba(1,22,40,.5), 0 0 0 23px var(--hair-soft), 0 50px 90px -40px #000}
.salmon-medal::before{content:""; position:absolute; inset:-23px; border-radius:50%; background:url(art/ring.webp) center/100% no-repeat; opacity:.55; filter:brightness(.8);
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 88%, #000 90%); mask-image:radial-gradient(circle closest-side, transparent 88%, #000 90%); animation:spin 90s linear infinite}
.salmon-medal img{width:80%; height:80%; object-fit:contain; -webkit-mask-image:radial-gradient(circle closest-side,#000 74%,transparent); mask-image:radial-gradient(circle closest-side,#000 74%,transparent)}
.gt-seal{position:absolute; right:0; bottom:2%; width:clamp(132px, 13vw, 176px); aspect-ratio:1; margin:0; display:grid; place-items:center; filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.gt-seal img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.gt-seal span{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:60%; aspect-ratio:1; border-radius:50%; background:rgba(1,22,40,.9); box-shadow:0 0 0 1px var(--gold); text-align:center; font:italic 500 11.5px/1.15 var(--serif); color:var(--leaf); padding:6px}
.gt-seal span b{display:block; font:600 15px/1 var(--serif); font-style:normal; color:var(--paper); margin:2px 0}
.salmon-copy .sec-lede{margin-left:0}
.cure{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:c}
.cure li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 6px 12px; position:relative}
.cure li + li::before{content:""; position:absolute; left:-10px; top:42px; width:8px; height:8px; border:1px solid var(--gold); transform:rotate(45deg); background:var(--deep)}
.cure-art{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#063257,#011a2e 72%); box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(1,22,40,.9), 0 0 0 5px var(--hair-soft); overflow:hidden}
.cure-art img{width:82%; height:82%; object-fit:contain; -webkit-mask-image:radial-gradient(circle closest-side,#000 76%,transparent); mask-image:radial-gradient(circle closest-side,#000 76%,transparent)}
.cure b{font:500 19px/1.1 var(--serif); margin-top:6px} .cure small{font-size:13px; color:var(--silver)}
.salmon-buy{margin-top:30px; padding:24px 26px; background:var(--hcg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.92), rgba(1,22,40,.96)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.22)}
.sizes{display:flex; flex-wrap:wrap; gap:8px}
.size{min-height:44px; padding:0 16px; border:1px solid var(--hair-soft); background:var(--tex-hatch), rgba(1,22,40,.6); color:var(--paper); cursor:pointer; font:500 14.5px/1 var(--sans); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px rgba(201,164,92,.16); transition:transform .16s var(--ease-out)}
.size:active{transform:scale(.97)}
.size[aria-checked="true"]{background:var(--tex-paper), #f4efe4; color:var(--ink); box-shadow:inset 0 0 0 3px #f4efe4, inset 0 0 0 4px rgba(138,106,44,.5)}
.size[disabled]{opacity:.45; cursor:not-allowed}
.salmon-row{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:20px}
.salmon-row .price{font-size:40px; color:var(--leaf)}
.add-gold{width:auto; padding:0 26px; height:54px; background:var(--tex-hatch), linear-gradient(180deg,#f3dda2,#d1ad66 60%,#bd964d); color:#0b1c2a; box-shadow:inset 0 0 0 1px rgba(11,28,42,.3), inset 0 0 0 4px rgba(246,226,172,.45)}
.add-gold svg{width:22px; height:22px}
.add-gold[disabled]{filter:grayscale(.5) brightness(.8); cursor:not-allowed}
.salmon-note{margin:14px 0 0; font-size:14px; color:var(--silver)}

/* ---------- story strip ---------- */
.gens{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative}
.gens::before{content:""; position:absolute; left:8%; right:8%; top:62px; height:9px; background:var(--rule-orn)}
.gen{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 10px}
.gen-year{font:500 clamp(54px,6vw,92px)/1 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 72; font-variant-numeric:oldstyle-nums; text-shadow:0 0 30px rgba(1,22,40,.9); background:radial-gradient(ellipse at center, rgba(1,22,40,.95) 40%, rgba(1,22,40,0) 70%); padding:0 18px}
.gen-rule{width:1px; height:34px; background:linear-gradient(var(--gold), transparent); margin:10px 0}
.gen-names{font:italic 500 21px/1.2 var(--serif); color:var(--paper)}
.awards-line{display:flex; align-items:center; justify-content:center; gap:20px; margin:48px 0 0; text-align:center}
.awards-line img{width:44px; height:auto} .awards-line img.flip{transform:scaleX(-1)}
.awards-line b{display:block; font:italic 500 22px/1.2 var(--serif); color:var(--leaf); font-weight:400}
.awards-line span span{display:block; margin-top:6px; color:var(--silver); font-size:15px; font-variant-numeric:oldstyle-nums}

/* ---------- promise ---------- */
.promise{padding-top:20px; padding-bottom:20px}
.promise-plate{margin:0 auto; max-width:940px; padding:clamp(40px,6vw,74px) clamp(24px,6vw,90px); text-align:center; border-radius:50% / 22%;
  background:var(--tex-grain), var(--tex-guil), radial-gradient(ellipse at 50% 40%, rgba(6,50,87,.95), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.55);
  box-shadow:inset 0 0 0 6px rgba(1,22,40,.8), inset 0 0 0 7px rgba(201,164,92,.25), 0 40px 80px -40px #000}
.promise-plate blockquote{margin:0; font:italic 400 clamp(24px,2.6vw,36px)/1.35 var(--serif); color:var(--paper); font-variation-settings:'opsz' 40; text-wrap:balance}
.promise-plate figcaption{margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--leaf); font:500 15px/1 var(--sans); letter-spacing:.02em}
.promise-plate figcaption img{width:130px; height:auto; opacity:.85}

/* ---------- delivery ---------- */
.dl-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:start}
.dl-copy .sec-lede{margin-left:0}
.post-big{margin-top:28px}
.post-hint{margin:10px 0 0; font-size:14px; color:var(--silver)}
.dl-help{margin:18px 0 0; color:var(--silver); font-size:15px} .dl-help a{color:var(--leaf)}
.arran-card{padding:30px 30px 32px; background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.22), 0 30px 60px -36px #000}
.arran-art{display:block; width:100%; height:auto; max-height:170px; object-fit:contain; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.route{display:flex; align-items:center; gap:12px; margin:16px 0 18px; font:italic 500 17px/1 var(--serif); color:var(--leaf)}
.route-line{flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px); position:relative}
.route-line::after{content:""; position:absolute; right:-2px; top:-4px; width:8px; height:8px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); transform:rotate(45deg)}
.arran-card h3{margin:0 0 10px; font:500 28px/1.1 var(--serif)} .arran-card h3 em{font-style:italic; color:var(--leaf)}
.arran-card p{margin:0; color:rgba(244,239,228,.85); line-height:1.6}
.box-steps{margin-top:clamp(56px,7vw,96px)}
.box-head{display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:30px; text-align:left}
.box-head img{width:96px; height:auto}
.box-head h3{margin:0; font:500 clamp(28px,3vw,40px)/1.05 var(--serif)}
.box-head .eyebrow{margin-bottom:6px}
.steps-rail{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; position:relative}
.steps-rail::before{content:""; position:absolute; left:10%; right:10%; top:27px; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent)}
.steps-rail li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 14px}
.rail-n{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font:italic 500 18px/1 var(--serif); color:var(--leaf); background:radial-gradient(circle,#063257,#011a2e 72%); box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(1,22,40,.95), 0 0 0 5px var(--hair-soft); margin-bottom:16px; position:relative}
.steps-rail b{font:500 19px/1.2 var(--serif); margin-bottom:8px}
.steps-rail p{margin:0; font-size:14.5px; line-height:1.55; color:rgba(244,239,228,.8)}
.steps-rail a{color:var(--leaf)}

/* ---------- trade ---------- */
.trade-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:start}
.trade-copy .sec-lede{margin-left:0}
.points{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:20px 28px}
.points li{display:flex; flex-direction:column; gap:6px; padding-left:22px; position:relative}
.points li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg)}
.points b{font:500 20px/1.2 var(--serif)}
.points span{color:rgba(244,239,228,.82); font-size:15.5px; line-height:1.55}
.trade-cta{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin:34px 0 0}
.docket{position:relative; padding:28px 28px 30px; background:var(--tex-paper), radial-gradient(130% 90% at 50% 0%, #fdf9f0, #efe5cf); color:var(--ink); box-shadow:0 0 0 1px #8a6a2c, 0 40px 70px -36px #000; transform:rotate(1.2deg)}
.docket::before{content:""; position:absolute; inset:5px; border:1px solid rgba(138,106,44,.5); pointer-events:none; background:var(--hcd)}
.docket-art{display:block; width:62%; height:auto; margin:-6px auto 6px; filter:brightness(.45) sepia(.5) saturate(1.4)}
.docket-head{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid rgba(138,106,44,.45)}
.docket-head b{font:500 22px/1 var(--serif)} .docket-head span{font:italic 500 14px var(--serif); color:var(--ink-2)}
.docket dl{margin:0}
.docket dl > div{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 0; border-bottom:1px dashed rgba(13,29,41,.22)}
.docket dt{font-weight:600; font-size:15px} .docket dd{grid-column:1 / -1; margin:0; display:flex; justify-content:space-between; gap:12px; color:var(--ink-2); font-size:14px}
.docket dd b{color:var(--ink); font:600 16px/1 var(--serif)}
.chef{margin:clamp(56px,7vw,96px) auto 0; max-width:1000px; display:grid; grid-template-columns:240px 1fr; gap:clamp(24px,4vw,56px); align-items:center}
.chef-photo{aspect-ratio:4/5; border-radius:50% / 40%; overflow:hidden; box-shadow:0 0 0 1px var(--gold), 0 0 0 6px rgba(1,22,40,.9), 0 0 0 7px var(--hair), 0 30px 60px -30px #000; position:relative}
.chef-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(.92)}
.chef-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(201,164,92,.35), rgba(3,40,71,.55)); mix-blend-mode:color}
.chef blockquote{margin:0; font:italic 400 clamp(24px,2.4vw,32px)/1.35 var(--serif); color:var(--paper)}
.chef figcaption{margin-top:16px; color:var(--silver)} .chef figcaption b{display:block; color:var(--leaf); font:500 19px/1.2 var(--serif)}

/* ---------- deli shelf ---------- */
.shelf-wrap{position:relative; max-width:1180px; margin:0 auto}
.shelf-row{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px, 1fr); grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:6px 4px 18px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent}
.shelf-row .card{scroll-snap-align:start}

/* ---------- guide ---------- */
.guide-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,80px); align-items:center}
.guide-grid .sec-lede{margin-left:0}
.recipe-card{position:relative; padding:28px 30px 32px; text-align:center; background:var(--tex-paper), radial-gradient(130% 90% at 50% 0%, #fdf9f0, #efe5cf); color:var(--ink); box-shadow:0 0 0 1px #8a6a2c, 0 40px 70px -36px #000}
.recipe-card::before{content:""; position:absolute; inset:5px; border:1px solid rgba(138,106,44,.5); pointer-events:none; background:var(--hcd)}
.recipe-card img{display:block; width:min(360px, 90%); height:auto; margin:0 auto 10px; filter:brightness(.42) sepia(.6) saturate(1.5)}
.recipe-meta{display:flex; justify-content:center; gap:18px; margin:0 0 8px; font:italic 500 15px var(--serif); color:#5c4519}
.recipe-meta span + span::before{content:""; display:inline-block; width:5px; height:5px; border:1px solid #8a6a2c; transform:rotate(45deg); margin:0 10px 2px 0}
.recipe-card h3{margin:0 0 10px; font:500 36px/1.05 var(--serif); font-variation-settings:'opsz' 40}
.recipe-card p{margin:0 auto 20px; max-width:30em; color:var(--ink-2); line-height:1.6}
.recipe-card .btn-line{color:#0b1c2a; background:transparent; border-color:#8a6a2c; box-shadow:inset 0 0 0 3px #f4efe4, inset 0 0 0 4px rgba(138,106,44,.35)}
.recipe-card .btn-line::after{border-color:#8a6a2c}

/* ---------- visit ---------- */
.visit-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(32px,5vw,80px); align-items:center}
.visit-art{position:relative; padding:22px; background:var(--hcg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.9), rgba(1,22,40,.95)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.22), 0 30px 60px -36px #000}
.visit-art img{display:block; width:100%; height:auto; -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%, #000 70%, transparent); mask-image:radial-gradient(ellipse 60% 62% at 50% 50%, #000 70%, transparent)}
.visit-copy .sec-lede{margin-left:0}
.visit-copy .sec-title{font-size:clamp(32px,3.4vw,52px)}
.open-now{margin:20px 0 0; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid var(--hair); font-size:15px}
.open-now::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--silver)}
.open-now.is-open::before{background:#8fd19e; box-shadow:0 0 10px #8fd19e}
.open-now b{color:var(--paper)}
.visit-cols{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:28px 0 30px}
.phones{margin:0} .phones div{margin-bottom:14px}
.phones dt{font:italic 500 16px var(--serif); color:var(--leaf)} .phones dd{margin:4px 0 0}
.phones a{color:var(--paper); font:500 22px/1.2 var(--serif); text-decoration:none; font-variant-numeric:lining-nums; display:inline-block; padding:6px 0}
.hours h3{margin:0 0 10px; font:italic 500 18px var(--serif); color:var(--leaf)}
.hours table,.foot-hours{border-collapse:collapse; width:100%; font-size:15px}
.hours td,.foot-hours td{padding:5px 0; border-bottom:1px solid var(--hair-soft)}
.hours td + td,.foot-hours td + td{text-align:right; font-variant-numeric:tabular-nums; color:rgba(244,239,228,.88)}
.hours tr.today td,.foot-hours tr.today td{color:var(--leaf); font-weight:600}
.hours-note{margin:10px 0 0; font-size:13px; color:var(--silver); font-style:italic}

/* ---------- order ---------- */
.order{text-align:center}
.order-badges{list-style:none; margin:0 auto 36px; padding:0; display:flex; justify-content:center; gap:clamp(20px,5vw,70px); flex-wrap:wrap}
.order-badges li{display:flex; flex-direction:column; align-items:center; gap:12px; font:italic 500 18px var(--serif); color:var(--leaf)}
.order-badges img{width:110px; height:80px; object-fit:contain}
.order-cta{display:flex; justify-content:center; align-items:center; gap:26px; flex-wrap:wrap; margin:30px 0 0}
.news{max-width:620px; margin:56px auto 0; padding:30px 34px; background:var(--hcg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.9), rgba(1,22,40,.95)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.22)}
.news h3{margin:0 0 8px; font:500 26px/1.15 var(--serif)} .news p{margin:0 0 18px; color:rgba(244,239,228,.84)}

/* ---------- footer ---------- */
.foot2{position:relative; z-index:2; margin-top:40px; padding:56px var(--gut) calc(30px + env(safe-area-inset-bottom)); background:var(--tex-guil), linear-gradient(180deg, rgba(1,17,31,.92), #010d18); border-top:1px solid var(--hair)}
.foot2::before{content:""; position:absolute; left:var(--gut); right:var(--gut); top:-5px; height:9px; background:var(--rule-orn)}
.foot-top{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin-bottom:44px}
.foot-badge{width:84px; height:84px; border-radius:50%; box-shadow:0 0 0 1px var(--gold), 0 0 0 5px rgba(1,22,40,.9), 0 0 0 6px var(--hair)}
.foot-motto{margin:6px 0 0; font:italic 400 clamp(26px,3vw,40px)/1.1 var(--serif); color:var(--paper)}
.foot-orn{width:170px; height:auto; opacity:.85}
.foot-cols{max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px}
.foot-cols h2{margin:0 0 14px; font:italic 500 19px var(--serif); color:var(--leaf)}
.foot-cols nav a{display:block; padding:7px 0; color:rgba(244,239,228,.86); text-decoration:none; font-size:15px}
@media (hover:hover) and (pointer:fine){ .foot-cols nav a:hover{color:var(--leaf)} }
.foot-cols p{margin:0 0 12px; color:rgba(244,239,228,.86); font-size:15px; line-height:1.6}
.foot-cols p a{color:var(--paper)}
.foot-tel a{display:inline-block; padding:6px 0}
.foot-base{max-width:1300px; margin:40px auto 0; padding-top:18px; border-top:1px solid var(--hair-soft); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--silver)}
.foot-base p{margin:0} .foot-base a{color:var(--silver); display:inline-block; padding:8px 0}

/* ---------- header menu button + menu plate ---------- */
.menu-btn{width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--hair); background:var(--tex-hatch), rgba(1,26,46,.55); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px var(--hair-soft); cursor:pointer}
.mb-lines,.mb-lines::before,.mb-lines::after{display:block; width:20px; height:1.5px; background:var(--leaf); position:relative}
.mb-lines::before,.mb-lines::after{content:""; position:absolute; left:0} .mb-lines::before{top:-6px} .mb-lines::after{top:6px; width:13px}
.menu-btn:active{transform:scale(.96)}
.menu-plate{position:fixed; margin:0; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; padding:0; border:0; color:var(--paper);
  background:var(--tex-grain), var(--tex-guil), radial-gradient(ellipse at 50% 30%, #06345b, #011a2e 70%); opacity:0; transform:scale(1.02); transition:opacity .3s ease, transform .4s var(--ease-out)}
.menu-plate.open{opacity:1; transform:none}
.menu-in{position:relative; height:100%; overflow-y:auto; padding:calc(20px + env(safe-area-inset-top)) var(--gut) 40px; max-width:900px; margin:0 auto; display:flex; flex-direction:column}
.menu-in::before{content:""; position:fixed; inset:12px; border:1px solid rgba(201,164,92,.3); pointer-events:none; background:var(--hcg)}
.menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px}
.menu-nav{display:flex; flex-direction:column}
.menu-big{display:block; padding:12px 0; font:500 clamp(30px,5vw,48px)/1.1 var(--serif); color:var(--paper); text-decoration:none; border-bottom:1px solid var(--hair-soft)}
@media (hover:hover) and (pointer:fine){ .menu-big:hover{color:var(--leaf)} }
.menu-sub{display:flex; flex-wrap:wrap; gap:4px 18px; padding:10px 0 16px; border-bottom:1px solid var(--hair-soft)}
.menu-sub a{color:rgba(244,239,228,.82); text-decoration:none; padding:8px 0; font-size:15.5px}
.menu-foot{margin-top:auto; padding-top:28px; color:var(--silver); font-size:15px}
.menu-foot strong{color:var(--paper)}
.menu-tel{display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:10px 0; color:var(--leaf); font:500 24px var(--serif); text-decoration:none}
.menu-tel svg{width:22px; height:22px}
@media (min-width: 1181px){ .menu-btn{display:none} }
@media (max-width: 1180px){ .bar-nav a:not(.bar-tel){display:none} }

/* ---------- phones ---------- */
@media (max-width: 860px){
  .sec{padding:72px var(--gut)}
  .sec-title{font-size:clamp(32px, 9vw, 42px)}
  .sec-lede{font-size:16.5px}
  .strip{margin-top:0} .strip-in{grid-template-columns:1fr; justify-items:start; gap:14px; padding:20px} .strip-orn{display:none} .strip-item{justify-content:flex-start}
  .plates{display:grid; grid-auto-flow:column; grid-auto-columns:84%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gut) * -1); padding:4px var(--gut) 16px; overscroll-behavior-x:contain; scrollbar-width:none}
  .plate-card{scroll-snap-align:center}
  .board{grid-template-columns:1fr} .board-day + .board-day{border-left:0; border-top:1px solid var(--hair-soft)}
  .salmon,.dl-grid,.trade-grid,.guide-grid,.visit-grid{grid-template-columns:1fr}
  .salmon-medal{width:min(86%, 340px)}
  .cure{grid-template-columns:repeat(2,minmax(0,1fr))} .cure li + li::before{display:none}
  .salmon-row{flex-wrap:wrap} .add-gold{flex:1 1 100%; justify-content:center}
  .gens{grid-template-columns:1fr; gap:28px} .gens::before{display:none}
  .awards-line{gap:10px} .awards-line img{width:30px}
  .promise-plate{border-radius:40px}
  .steps-rail{grid-template-columns:1fr; gap:22px} .steps-rail::before{left:27px; right:auto; top:10px; bottom:10px; width:1px; height:auto; background:linear-gradient(transparent, var(--gold) 6%, var(--gold) 94%, transparent)}
  .steps-rail li{flex-direction:row; align-items:flex-start; text-align:left; gap:16px; padding:0} .steps-rail li > b, .steps-rail li > p{display:block}
  .steps-rail li{display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto; column-gap:16px} .rail-n{grid-row:1 / 3; margin:0}
  .box-head{flex-direction:column; text-align:center}
  .points{grid-template-columns:1fr}
  .docket{transform:none}
  .chef{grid-template-columns:1fr; text-align:center} .chef-photo{width:200px; margin:0 auto}
  .shelf-row{grid-auto-columns:46%; margin:0 calc(var(--gut) * -1); padding:6px var(--gut) 18px}
  .visit-cols{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr} .foot-base{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){ .salmon-medal::before{animation:none} .plate-card,.plate-art img{transition:none} .menu-plate{transition:opacity .2s ease; transform:none} }
.rm .salmon-medal::before{animation:none}
.paused .salmon-medal::before{animation-play-state:paused}
/* the plate-wipe: engraved art is inked onto the page as it arrives */
.ink{clip-path:circle(0% at 50% 50%); opacity:0; filter:blur(3px)}
.ink.inked{clip-path:circle(75% at 50% 50%); opacity:1; filter:none; transition:clip-path 1.2s var(--ease-io), opacity .7s ease, filter .9s ease}
.docket-art.ink.inked,.recipe-card img.ink.inked{filter:brightness(.42) sepia(.6) saturate(1.5)}
.docket-art.ink.inked{filter:brightness(.45) sepia(.5) saturate(1.4)}
@media (max-width: 860px){
  .bar{gap:8px}
  .menu-btn{width:44px; height:44px; flex:none}
  .basket-btn{gap:6px; padding:0 5px 0 8px; flex:none}
  .brand{min-width:0} .brand-name{white-space:nowrap}
}
@media (max-width: 380px){ .brand-sub{display:none} .brand img{width:32px; height:32px} .brand-name{font-size:17px} }

/* ================= Phase 2b: one continuous descent ================= */
.tbc{display:none!important}
.sec{padding:clamp(56px, 6vw, 96px) var(--gut)}
.join-tight{padding-top:0}
.sec-head.left{text-align:left; margin-left:0; max-width:820px}
.sec-head.left .sec-lede{margin-left:0}
h1,h2,h3,.award-t,.steps-rail b,.gen-names{text-wrap:balance}
p,.sec-lede{text-wrap:pretty}

/* shore joins between sections: a coastline drawn on arrival, and an engraved vignette on it */
.join{position:relative; max-width:1200px; height:clamp(120px, 14vw, 190px); margin:0 auto; display:grid; place-items:center; pointer-events:none}
.join .coast{position:absolute; left:var(--gut); right:var(--gut); top:58%; width:calc(100% - 2 * var(--gut)); height:60px; overflow:visible}
.join .coast path{fill:none; stroke:var(--gold); stroke-width:1.1; stroke-opacity:.7; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1)}
.join.drawn .coast path{stroke-dashoffset:0}
.join img{position:relative; height:auto; opacity:0; transform:translateY(8px); transition:opacity .9s ease .25s, transform 1.2s var(--ease-out) .25s}
.join.drawn img{opacity:1; transform:none}
.join-harbour img{width:min(520px, 70%); -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 66%, transparent); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 66%, transparent)}
.join-boat img{width:120px; margin-left:-20%; animation:sail 16s ease-in-out infinite alternate}
.join-ferry img{width:min(300px, 50%); margin-left:24%}
@keyframes sail{from{translate:-40px 0; rotate:-1deg} 50%{rotate:1.2deg} to{translate:60px 0; rotate:-.6deg}}
.paused .join-boat img{animation-play-state:paused}
.rm .join img,.rm .join .coast path{transition:none; opacity:1; stroke-dashoffset:0; transform:none} .rm .join-boat img{animation:none}
@media (prefers-reduced-motion: reduce){ .join img,.join .coast path{transition:none; opacity:1; stroke-dashoffset:0; transform:none} .join-boat img{animation:none} }

/* specials: products live in their day; the next special day is lit when today has none */
.board-day{display:flex; flex-direction:column; align-items:center}
.bd-next{display:none; position:absolute; top:-1px; right:18px; padding:6px 12px 8px; background:linear-gradient(180deg,#f3dda2,#c9a45c); color:#0b1c2a; font:600 12px/1 var(--sans); letter-spacing:.06em; font-variant:small-caps; text-transform:lowercase; clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.board-day.is-next .bd-next{display:block}
.board-day.is-next{background:linear-gradient(180deg, rgba(240,217,160,.08), rgba(240,217,160,0))}
.board-day.is-next::after{content:""; position:absolute; left:28px; right:28px; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.day-shelf{list-style:none; margin:18px 0 0; padding:0; width:100%; display:grid; gap:10px}
.day-shelf:empty{display:none}
.day-shelf .card{width:100%; opacity:1; transform:none}
.specials-next{text-align:center; margin:-14px auto 26px; max-width:40em; font:italic 500 18px/1.4 var(--serif); color:var(--leaf)}
.specials-next:empty{display:none}
.specials-wide{list-style:none; padding:0; max-width:1100px; margin:0 auto; display:grid; gap:14px}
.specials-wide .card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:18px; align-items:center; width:auto; opacity:1; transform:none; padding:14px}
.specials-wide .card .card-photo{aspect-ratio:16/10}
.specials-wide .card .card-name{font:500 24px/1.2 var(--serif); min-height:0}
.specials-wide .wide-day{display:block; font:italic 500 15px var(--serif); color:#7a5a1a; margin-bottom:6px}

/* story: three engraved date plates on a coastline drawn as you arrive */
.gens-wrap{position:relative; max-width:1100px; margin:0 auto}
.gens-coast{position:absolute; left:0; right:0; top:70px; width:100%; height:80px; overflow:visible; pointer-events:none}
.gens-coast path{fill:none; stroke:var(--gold); stroke-opacity:.6; stroke-width:1.1; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.gens-wrap.drawn .gens-coast path{stroke-dashoffset:0}
.gens::before{content:none}
.gen-plate{position:relative; width:min(220px, 90%); aspect-ratio:3/2; border-radius:50%; overflow:hidden; display:grid; place-items:center; margin-bottom:14px; background:radial-gradient(ellipse, #063257, #011a2e 72%);
  box-shadow:0 0 0 1px var(--gold), 0 0 0 5px rgba(1,22,40,.92), 0 0 0 6px var(--hair), 0 24px 44px -24px #000}
.gen-plate img{width:88%; height:88%; object-fit:contain; -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent)}
.gen-year{background:none; padding:0; font-size:clamp(48px,5vw,76px)}
.gen-names{margin-top:6px}
.award-medal{display:flex; align-items:center; justify-content:center; gap:20px; margin:48px auto 0; text-align:left}
.am-art{width:96px; height:96px; flex:none; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#063257,#011a2e 72%); box-shadow:0 0 0 1px var(--gold), 0 0 0 5px rgba(1,22,40,.9), 0 0 0 6px var(--hair)}
.am-art img{width:84%; height:84%; object-fit:contain}
.am-txt b{display:block; font:italic 400 24px/1.2 var(--serif); color:var(--leaf)}
.am-txt span{display:block; margin-top:6px; color:var(--silver); font-size:15.5px}

.arran-days{margin:12px 0 0!important; padding-top:12px; border-top:1px solid var(--hair-soft); color:var(--paper)!important}
.arran-days b{color:var(--leaf)}
figure.docket{margin:0}
.chef-photo{box-shadow:0 0 0 1px var(--gold), 0 0 0 6px rgba(1,22,40,.9), 0 0 0 7px var(--gold), 0 0 0 12px rgba(1,22,40,.6), 0 0 0 13px var(--hair-soft), 0 30px 60px -30px #000}
.chef-photo img{filter:none}
.chef-photo::after{content:none}

/* deli shelf: arrows and a soft edge so it reads as a shelf you can move along */
.shelf-wrap{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px}
.shelf-wrap .shelf-row{-webkit-mask-image:linear-gradient(90deg, #000 92%, transparent); mask-image:linear-gradient(90deg, #000 92%, transparent)}
.shelf-arrow{width:46px; height:46px; border-radius:50%; border:1px solid var(--gold); background:radial-gradient(circle,#063257,#011a2e 72%); cursor:pointer; display:grid; place-items:center; box-shadow:0 0 0 4px rgba(1,22,40,.9), 0 0 0 5px var(--hair-soft); transition:transform .16s var(--ease-out)}
.shelf-arrow span{width:10px; height:10px; border-top:1.5px solid var(--leaf); border-right:1.5px solid var(--leaf); transform:rotate(45deg); margin-left:-4px}
.shelf-arrow.prev span{transform:rotate(-135deg); margin-left:4px}
.shelf-arrow:active{transform:scale(.94)}
.shelf-arrow[disabled]{opacity:.3; cursor:default}

.guide-grid.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.visit-addr{margin:10px 0 0; font:500 18px/1.4 var(--sans); color:var(--paper); letter-spacing:.005em}
.phones a{font:600 20px/1.2 var(--sans); letter-spacing:.01em}

.menu-in{padding-bottom:56px}
.menu-plate{background:var(--tex-guil), radial-gradient(ellipse at 50% 30%, #06345b, #011a2e 70%)}
.menu-motion{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; margin:12px 0 4px; border:1px solid var(--hair); background:rgba(1,22,40,.6); color:var(--paper); cursor:pointer; font:500 15px var(--sans)}
.menu-motion svg{width:16px; height:16px; color:var(--leaf)}
.foot-base .sep{display:inline-block; width:24px}
.bar.is-solid{background:var(--tex-guil), #011628; transition:box-shadow .12s ease}
.price{font-variation-settings:'opsz' 18}

@media (max-width: 860px){
  .join{height:110px} .join-boat img{width:84px} .join-harbour img{width:86%}
  .gens-coast{display:none}
  .gen-plate{width:min(240px, 80%)}
  .award-medal{flex-direction:column; text-align:center}
  .shelf-wrap{grid-template-columns:minmax(0,1fr)} .shelf-arrow{display:none} .shelf-wrap .shelf-row{-webkit-mask-image:none; mask-image:none}
  .guide-grid.flip{grid-template-columns:1fr}
  .visit-copy .sec-title{font-variation-settings:'opsz' 36}
  .specials-wide .card{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .foot-cols{grid-template-columns:1fr}
  .foot-hours td{white-space:nowrap}
}
.ink-lr{clip-path:inset(0 100% 0 0); opacity:0}
.ink-lr.inked{clip-path:inset(0 0 0 0); opacity:1; transition:clip-path 1.3s var(--ease-io), opacity .5s ease}
/* pause control: on phones only while the hero is in view (it also lives in the menu); never under the toast */
.motion{bottom:max(24px, env(safe-area-inset-bottom)); transition:opacity .3s ease, visibility .3s}
.motion.is-away,.toast.show ~ .motion{opacity:0!important; visibility:hidden; pointer-events:none}

/* ===================== Phase 3: the full shop ===================== */
/* view switching: the product page replaces the long home page; the sea stays, settled deep */
body.view-product main > :not(#productView):not(#buyRail):not(.toast):not(#announce):not(#motionBtn),
body.view-product .sun, body.view-product .boat{display:none!important}

/* the shop toolbar: search, sort and a running count */
.tools{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:18px 0 4px}
.search{position:relative; flex:1 1 300px; max-width:460px; margin:0}
.search input{width:100%; height:48px; padding:0 46px 0 46px; border:1px solid rgba(201,164,92,.45); border-radius:0; color:var(--paper);
  background:var(--tex-guil), rgba(1,22,40,.72); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px rgba(201,164,92,.16);
  font:500 15.5px/1 var(--sans); -webkit-appearance:none; appearance:none; transition:border-color .2s ease, box-shadow .2s ease}
.search input::placeholder{color:rgba(244,239,228,.62)}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{outline:none; border-color:#e9cf8e; box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px rgba(233,207,142,.45), 0 0 0 3px rgba(233,207,142,.28)}
.search-ico{position:absolute; left:15px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:#c9a45c; pointer-events:none}
.search-clear{position:absolute; right:4px; top:4px; width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent; color:var(--paper); cursor:pointer}
.search-clear svg{width:16px; height:16px}
.search-clear:hover{color:#e9cf8e}
.sort{display:inline-flex; align-items:center; gap:10px; font:italic 500 16px/1 var(--serif); color:var(--leaf)}
.sort select{height:48px; padding:0 40px 0 14px; border:1px solid rgba(201,164,92,.45); border-radius:0; color:var(--paper); font:500 14.5px/1 var(--sans); cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a45c' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat, rgba(1,22,40,.72);
  box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px rgba(201,164,92,.16)}
.sort select:focus-visible{outline:2px solid #e9cf8e; outline-offset:2px}
.sort select option{background:#011628; color:#f4efe4}
.result-count{margin:0 0 0 auto; font:500 13.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:rgba(244,239,228,.72)}
.empty-search{grid-column:1/-1}

/* cards link to their own page */
a.card-photo{display:block; color:inherit}
.card-name a{color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .35s var(--ease-out)}
.card-name a:hover, .card-name a:focus-visible{background-size:100% 1px}
.card-name a:focus-visible{outline:2px solid #8a6a2c; outline-offset:2px}

/* the product page: a mounted photograph beside an engraved plate */
.pdp{position:relative; z-index:2; max-width:1260px; margin:0 auto; padding:calc(var(--bar-h) + 30px) var(--gut) 96px; color:var(--paper)}
.pdp[hidden]{display:none}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 26px; font:500 13.5px/1.3 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:rgba(244,239,228,.74)}
.crumbs a{color:#e9cf8e; text-decoration:none; padding:6px 0}
.crumbs a:hover{text-decoration:underline; text-underline-offset:4px}
.crumb-sep{width:5px; height:5px; background:#c9a45c; transform:rotate(45deg); opacity:.8}
#pdpCrumb{color:var(--paper); text-transform:none; letter-spacing:.01em; font-size:14.5px}
.pdp-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:52px; align-items:start}
.gallery{position:sticky; top:calc(var(--bar-h) + 24px)}
.g-main{position:relative; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:1/1; padding:0;
  outline-offset:4px; border:14px solid transparent;
  background:var(--tex-paper) padding-box, linear-gradient(#f4efe4,#efe5cf) padding-box, var(--tex-paper) border-box, linear-gradient(#fbf6ea,#eadfc6) border-box;
  box-shadow:0 0 0 1px #8a6a2c, inset 0 0 0 1px rgba(138,106,44,.55), 0 50px 90px -40px #000}
.g-main::-webkit-scrollbar{display:none}
.g-main:focus-visible{outline:2px solid #e9cf8e}
.gallery::after{content:""; position:absolute; left:0; right:0; top:0; aspect-ratio:1/1; pointer-events:none; background:var(--hcd); margin:3px; opacity:.9}
.g-slide{flex:0 0 100%; margin:0; scroll-snap-align:start; background:#efe5cf; overflow:hidden}
.g-slide img{width:100%; height:100%; object-fit:cover; display:block}
.g-empty{display:grid; place-items:center}
.g-empty img{width:42%; height:auto; object-fit:contain; opacity:.55; filter:sepia(.4)}
.g-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.g-thumb{width:68px; height:68px; padding:3px; border:1px solid rgba(201,164,92,.35); background:rgba(1,22,40,.6); cursor:pointer; transition:border-color .2s ease, transform .2s var(--ease-out)}
.g-thumb img{width:100%; height:100%; object-fit:cover; display:block; opacity:.72; transition:opacity .2s ease}
.g-thumb:hover img, .g-thumb[aria-current="true"] img{opacity:1}
.g-thumb[aria-current="true"]{border-color:#e9cf8e; box-shadow:0 0 0 1px #e9cf8e}
.g-thumb:focus-visible{outline:2px solid #e9cf8e; outline-offset:2px}

.pdp-info{position:relative; padding:42px 42px 36px;
  background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.95), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5);
  box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22), 0 50px 90px -40px #000}
.pdp-title{margin:0; font:500 clamp(34px,3.3vw,52px)/1.04 var(--serif); letter-spacing:-.016em; font-variation-settings:'opsz' 48; color:var(--paper); text-wrap:balance}
.pdp-rule{display:block; width:150px; height:auto; margin:16px 0 18px}
.pdp-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 18px; margin:0}
.pdp-price .price{font-size:34px; color:#e9cf8e}
.pdp-stock{font:500 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#9fd0b4}
.pdp-stock.out{color:#f0b49a}
.pdp-variants{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0}
.pdp-variants[hidden]{display:none}
.pdp-buy{display:flex; align-items:stretch; gap:12px; margin-top:24px}
.pdp-buy[hidden]{display:none}
.pdp-buy .add-gold{flex:1 1 auto; justify-content:center}
.qty{display:inline-flex; align-items:center; height:54px; border:1px solid rgba(201,164,92,.5); background:rgba(1,22,40,.6); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px rgba(201,164,92,.14)}
.qty button{width:46px; height:100%; border:0; background:transparent; color:var(--paper); font:400 24px/1 var(--serif); cursor:pointer}
.qty button:hover:not(:disabled){color:#e9cf8e}
.qty button:disabled{opacity:.38; cursor:default}
.qty button:focus-visible{outline:2px solid #e9cf8e; outline-offset:-4px}
.qty output{min-width:30px; text-align:center; font:600 17px/1 var(--sans); font-variant-numeric:tabular-nums}
.pdp-inbasket{min-height:24px; margin:14px 0 0; font:500 14.5px/1.5 var(--sans); color:#e9cf8e}
.pdp-inbasket svg{width:16px; height:16px; vertical-align:-3px}
.linkish{border:0; background:none; padding:0 0 1px; margin-left:4px; color:var(--paper); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.pdp-desc{margin-top:22px; padding-top:22px; border-top:1px solid var(--hair-soft); font:400 16.5px/1.68 var(--sans); color:rgba(244,239,228,.9); max-width:62ch}
.pdp-desc:empty{display:none}
.pdp-desc p{margin:0 0 12px}
.pdp-desc ul, .pdp-desc ol{margin:0 0 12px; padding-left:20px}
.pdp-desc a{color:#e9cf8e}
.pdp-desc strong, .pdp-desc b{color:var(--paper); font-weight:600}
.pdp-notes{display:grid; gap:12px; margin-top:24px; padding-top:22px; border-top:1px solid var(--hair-soft)}
.pdp-note{display:flex; align-items:center; gap:16px; margin:0; font:400 14.5px/1.55 var(--sans); color:rgba(244,239,228,.86)}
.pdp-note img{flex:0 0 76px; width:76px; height:auto}
.pdp-note svg{flex:0 0 76px; width:22px; height:22px; color:#c9a45c}
.pdp-note a{color:#e9cf8e}
.related{margin-top:96px}
.related .sec-title{font-size:clamp(28px,2.6vw,40px); margin-bottom:26px}
.pdp-back{margin:44px 0 0; text-align:center}
.pdp-back .btn-line{display:inline-flex}

/* the sticky buy rail */
.buyrail{position:fixed; z-index:40; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); width:min(760px, calc(100% - 32px)); display:flex; align-items:center; gap:14px; padding:9px 9px 9px 10px;
  background:var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.98), rgba(1,22,40,.99)); border:1px solid rgba(201,164,92,.55);
  box-shadow:inset 0 0 0 4px rgba(1,22,40,.8), inset 0 0 0 5px rgba(201,164,92,.2), 0 30px 60px -20px #000;
  transform:translate(-50%, calc(100% + 40px)); visibility:hidden; transition:transform .5s var(--ease-out), visibility 0s .5s}
.buyrail.show{transform:translate(-50%, 0); visibility:visible; transition:transform .5s var(--ease-out), visibility 0s}
body:not(.view-product) .buyrail{display:none}
.buyrail img{width:56px; height:56px; object-fit:cover; border:2px solid #efe5cf; box-shadow:0 0 0 1px #8a6a2c}
.rail-t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px}
.rail-t b{font:500 19px/1.15 var(--serif); color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rail-t span{font:500 13.5px/1.2 var(--sans); color:#e9cf8e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.buyrail .add-gold{height:50px; flex:0 0 auto}
.buyrail.show ~ .motion{opacity:0!important; visibility:hidden; pointer-events:none}
@media (prefers-reduced-motion: reduce){ .buyrail, .buyrail.show{transition:none} }

@media (max-width: 860px){
  .pdp{padding:calc(var(--bar-h) + 16px) var(--gut) 120px}
  .crumbs{margin-bottom:16px; font-size:12.5px}
  #pdpCrumb{display:none}
  #pdpCat + .crumb-sep{display:none}
  .pdp-grid{grid-template-columns:minmax(0,1fr); gap:22px}
  .gallery{position:relative; top:auto; margin:0 calc(var(--gut) * -1)}
  .g-main{border-width:8px}
  .gallery::after{display:none}
  .g-thumbs{padding:0 var(--gut); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .g-thumb{flex:0 0 56px; width:56px; height:56px}
  .pdp-info{padding:28px 22px 26px}
  .pdp-title{font-size:clamp(30px,8.4vw,40px)}
  .pdp-price .price{font-size:30px}
  .pdp-buy{flex-wrap:wrap}
  .pdp-buy .add-gold{flex:1 1 160px}
  .pdp-note img{flex-basis:60px; width:60px}
  .pdp-note svg{flex-basis:60px}
  .related{margin-top:64px}
  .tools{gap:10px}
  .search{flex:1 1 100%; max-width:none}
  .sort{flex:1 1 auto}
  .sort select{flex:1 1 auto}
  .result-count{margin-left:0; width:100%}
  .buyrail{left:0; bottom:0; width:100%; transform:translateY(calc(100% + 10px)); padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom)); border-width:1px 0 0; gap:12px}
  .buyrail.show{transform:translateY(0)}
  .buyrail img{width:46px; height:46px}
  .rail-t b{font-size:16px}
  .buyrail .add-gold{height:48px; padding:0 18px}
  body.view-product .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
.pdp-inbasket:empty{min-height:0; margin:0}
.g-thumbs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px}
.g-thumbs::-webkit-scrollbar{display:none}
.g-thumb{flex:0 0 64px; width:64px; height:64px}
a.add{text-decoration:none}
.add-call{background:transparent!important; color:#0b1c2a; box-shadow:inset 0 0 0 1px #8a6a2c, inset 0 0 0 3px #f4efe4, inset 0 0 0 4px rgba(138,106,44,.3)!important}
.add-call svg{width:16px; height:16px}
.filters[hidden]{display:none!important}
.price.price-ask{font:italic 500 18px/1.2 var(--serif); color:#5b4a2a}
.pdp-price .price.price-ask{font:italic 500 26px/1.2 var(--serif); color:#e9cf8e}

/* ===== Phase 3b fixes ===== */
/* 2b-M1: the founding year must read 1943 at every size: sturdy optical size, lining figures */
.gen-year{font-weight:600; font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums; letter-spacing:.01em}
.order-badges li{font-weight:600; font-variation-settings:'opsz' 18}
.hero-kicker span:last-child{font-variant-numeric:lining-nums}
/* P3-S1: engraved stand-in for photo-less products */
.card-photo img.card-engr{object-fit:contain; padding:14%; opacity:.42!important; filter:sepia(.5) contrast(1.1); background:var(--tex-paper), #efe5cf}
.g-slide.g-engr img{width:46%; height:auto; margin:auto; object-fit:contain; opacity:.45; filter:sepia(.5)}
.g-slide.g-engr{display:grid; place-items:center}
/* P3-M2: no iOS zoom on focus */
#shopSearch, #shopSort, .search input, .sort select, input, select, textarea{font-size:16px}
/* P3-S6: no tracked capitals */
.crumbs{font:500 14px/1.3 var(--sans); letter-spacing:.01em; text-transform:none}
#pdpCrumb{font-size:14px}
.pdp-stock, .result-count{text-transform:none; letter-spacing:.01em; font-size:14px}
/* P3-S4: while searching, the dial and plaques let go of their category */
body.is-searching #cats .cat{opacity:.55}
body.is-searching #cats .cat[aria-checked="true"]{background:var(--tex-hatch), rgba(1,22,40,.7)!important; color:var(--paper)!important; border-color:rgba(201,164,92,.45)!important; box-shadow:none!important}
body.is-searching #cats .cat[aria-checked="true"] svg{color:inherit!important}
body.is-searching #cats .cat[aria-checked="true"] .n{color:rgba(244,239,228,.7)!important}
body.is-searching .dial-ico, body.is-searching .dial-lbl{opacity:.55}
.dc-glass{color:#e9cf8e; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
/* P3-S7: the gold button stays gold on hover (the navy hover belongs to the card buttons) */
.add.add-gold:hover{background:var(--tex-hatch), linear-gradient(180deg,#f8e6b4,#dcb873 60%,#c49c52)}
.add.add-gold:disabled{opacity:.45; cursor:not-allowed}
.qty button{color:var(--leaf)}
.qty button:disabled{opacity:.35}
/* related shelf arrows: solid discs outside the card column, gone at the ends */
.pdp .shelf-wrap{position:relative}
.pdp .shelf-arrow{position:absolute; top:38%; z-index:3; background:radial-gradient(circle,#063257,#011a2e 72%); opacity:1; transition:opacity .25s ease, transform .16s var(--ease-out)}
.pdp .shelf-arrow.prev{left:-62px} .pdp .shelf-arrow.next{right:-62px}
.pdp .shelf-arrow[disabled]{opacity:0; pointer-events:none}
@media (max-width: 1400px){ .pdp .shelf-arrow.prev{left:-22px} .pdp .shelf-arrow.next{right:-22px} }
/* the pause button stays off the product page on phones (it lives in the menu there) */
@media (max-width: 860px){ body.view-product .motion{opacity:0!important; visibility:hidden; pointer-events:none} }
/* P3-N2: an engraved medallion beside the eyebrow, the wax seal on best sellers, the cure roundels */
.pdp-eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.pdp-eyebrow .eyebrow{margin:0}
.pdp-medal{width:56px; height:56px; border-radius:50%; object-fit:cover; background:radial-gradient(circle,#063257,#011a2e 72%); box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(1,22,40,.9), 0 0 0 5px rgba(201,164,92,.3); padding:4px}
.pdp-medal[hidden], .pdp-seal[hidden], .pdp-cure[hidden], .pdp-retry[hidden], .pdp-notes[hidden], .related[hidden], #pdpCat[hidden], #pdpCatSep[hidden]{display:none}
.gallery .pdp-seal{position:absolute; top:auto; bottom:-26px; right:-26px; left:auto; width:118px; z-index:2}
.gallery .pdp-seal span{font-size:13px}
.pdp-cure{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.pdp-cure li{display:flex; flex-direction:column; align-items:center; gap:6px; font:italic 500 15px/1.2 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18}
.pdp-cure img{width:64px; height:64px; object-fit:contain}
.pdp-retry{margin:18px 0 0}
.pdp-retry .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none}
@media (max-width: 860px){ .gallery .pdp-seal{right:10px; bottom:-30px; width:96px} .pdp-cure img{width:52px; height:52px} }
#order{padding-top:48px} #shopTitle:focus,#catTitle:focus{outline:none}

/* ===================== Phase 4: the engraved 3D centrepieces ===================== */
/* the salmon pack: it breaks out of the medallion; the engraved still stays until the 3D is drawn */
.pack-stage{overflow:visible}
.pack-stage .pack-still{position:relative; z-index:1; width:118%; height:auto; max-width:none; -webkit-mask-image:none; mask-image:none; transform:rotate(-8deg); transition:opacity .9s var(--ease-out)}
.pack-canvas{position:absolute; z-index:2; inset:-22%; width:144%; height:144%; opacity:0; transition:opacity 1.1s var(--ease-out); touch-action:pan-y; cursor:grab}
.pack-stage.is-turning .pack-canvas{cursor:grabbing}
.pack-stage.is-3d .pack-canvas{opacity:1}
.pack-stage.is-3d .pack-still{opacity:0}
.salmon-art .gt-seal{z-index:3}
.pack-hint{position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); margin:0; font:italic 500 15px/1 var(--serif); color:rgba(240,217,160,.75); opacity:0; transition:opacity .6s ease; pointer-events:none; white-space:nowrap}
.pack-stage.is-3d ~ .pack-hint{opacity:1}
.pack-stage.was-turned ~ .pack-hint{opacity:0}
@media (hover: none){ .pack-hint{display:none} }

/* the courier box: a stage held in view beside the five steps */
.box-scene{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start}
.box-stage{position:sticky; top:calc(var(--bar-h) + 3vh); height:min(78vh, 760px); margin:0}
.box-still{position:absolute; inset:6% 10%; width:80%; height:88%; object-fit:contain; transition:opacity .9s var(--ease-out)}
.box-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.1s var(--ease-out)}
.box-stage.is-3d .box-canvas{opacity:1}
.box-stage.is-3d .box-still{opacity:0}
.box-cap{position:absolute; left:0; bottom:0; margin:0; font:italic 500 14px/1 var(--serif); color:rgba(240,217,160,.6)}
.box-callouts{position:absolute; inset:0; margin:0; padding:0; list-style:none; pointer-events:none; opacity:var(--lv, 0)}
.box-stage:not(.is-3d) .box-callouts{display:none}
.box-callouts li{position:absolute; left:0; top:0; display:flex; align-items:center; gap:10px; white-space:nowrap; font:italic 500 17px/1 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; text-shadow:0 1px 10px rgba(1,22,40,.95), 0 0 2px rgba(1,22,40,.9); will-change:transform}
.box-callouts li::before{content:""; width:46px; height:1px; background:linear-gradient(90deg, #e9cf8e, rgba(233,207,142,.35)); margin-left:6px}
.box-callouts li::after{content:""; position:absolute; left:0; width:7px; height:7px; margin-left:-3px; border-radius:50%; background:#e9cf8e; box-shadow:0 0 0 3px rgba(1,22,40,.85)}
.box-scene .steps-rail{grid-template-columns:1fr; gap:0; padding:12vh 0 22vh}
.box-scene .steps-rail::before{left:27px; right:auto; top:12vh; bottom:22vh; width:1px; height:auto; background:linear-gradient(transparent, var(--gold) 6%, var(--gold) 94%, transparent)}
.box-scene .steps-rail li{display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto; column-gap:20px; text-align:left; align-items:start; padding:0; min-height:46vh; opacity:.45; transition:opacity .5s var(--ease-out)}
.box-scene .steps-rail li.is-on{opacity:1}
.box-scene .rail-n{grid-row:1 / 3; margin:0; transition:background .5s ease, color .5s ease, box-shadow .5s ease}
.box-scene li.is-on .rail-n{background:var(--tex-hatch), linear-gradient(180deg,#f3dda2,#d1ad66 60%,#bd964d); color:#0b1c2a}
.box-scene .steps-rail b{font-size:clamp(22px,2vw,28px); margin:12px 0 10px}
.box-scene .steps-rail p{font-size:16px; max-width:40ch}
@media (max-width: 860px){
  .box-scene{grid-template-columns:minmax(0,1fr); gap:0}
  .box-stage{top:var(--bar-h); height:46vh; z-index:2; margin:0 calc(var(--gut) * -1); background:radial-gradient(120% 90% at 50% 45%, rgba(1,22,40,.92) 55%, rgba(1,22,40,0) 100%)}
  .box-callouts li{font-size:14px; gap:6px} .box-callouts li::before{width:22px}
  .box-scene .steps-rail{padding:4vh 0 30vh}
  .box-scene .steps-rail::before{top:4vh; bottom:30vh}
  .box-scene .steps-rail li{min-height:38vh}
  .box-cap{left:var(--gut); bottom:8px}
  .pack-canvas{inset:-16%; width:132%; height:132%}
}
/* reduced motion or no WebGL: the engraved stills, steps all readable */
.box-scene:not(.has-3d) .steps-rail{padding:0}
.box-scene:not(.has-3d) .steps-rail::before{top:10px; bottom:10px}
.box-scene:not(.has-3d) .steps-rail li{opacity:1; min-height:0; padding-bottom:30px}
@media (max-width: 860px){ .box-scene:not(.has-3d) .box-stage{position:relative; top:auto; height:62vw; margin-bottom:20px; background:none} }
.box-scene .steps-rail li{align-content:start}
.box-callouts li.flip{flex-direction:row-reverse}
.box-callouts li.flip::before{margin:0 6px 0 0; background:linear-gradient(270deg, #e9cf8e, rgba(233,207,142,.35))}
.box-callouts li.flip::after{left:auto; right:0; margin:0 -3px 0 0}
@media (max-width: 860px){ .box-scene.has-3d .box-stage{background:linear-gradient(180deg, #021627 0%, #021627 86%, rgba(2,22,39,0) 100%)} }
/* 3b-S2: the offline counter plate */
.offline-plate{grid-column:1/-1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:42px 24px 46px; border:1px solid rgba(201,164,92,.5); background:var(--hcg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); color:var(--paper); list-style:none}
.offline-plate img{width:120px; height:auto; opacity:.8}
.offline-plate h4{margin:0; font:500 clamp(24px,2.4vw,32px)/1.15 var(--serif)}
.offline-plate p{margin:0; max-width:52ch; color:rgba(244,239,228,.85); font-size:16px; line-height:1.6}
.offline-plate a{color:var(--leaf)}
.offline-plate .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none; margin-top:6px}
/* P4-S2/S3: readable upcoming steps; no dead scroll after step V on phones; caption clear of step I */
.box-scene .steps-rail li{opacity:1}
.box-scene .steps-rail li:not(.is-on) b, .box-scene .steps-rail li:not(.is-on) .rail-n{opacity:.62}
.box-scene .steps-rail li:not(.is-on) p{opacity:.85}
.box-scene .steps-rail li b, .box-scene .steps-rail li p, .box-scene .rail-n{transition:opacity .5s var(--ease-out), background .5s ease, color .5s ease}
@media (max-width: 860px){
  .box-scene.has-3d .steps-rail{padding-bottom:80px}
  .box-scene.has-3d .steps-rail::before{bottom:80px}
  .box-scene.has-3d .steps-rail li:last-child{min-height:0}
  .box-cap{top:10px; right:var(--gut); left:auto; bottom:auto}
}

/* ===================== Phase 5: the content pages ===================== */
body.view-page main > :not(#pageView):not(.toast):not(#announce):not(#motionBtn),
body.view-page .sun, body.view-page .boat{display:none!important}
.pages{position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:calc(var(--bar-h) + 30px) var(--gut) 110px; color:var(--paper)}
.pages[hidden], .pg[hidden]{display:none}
.bar-nav a[aria-current="page"]{color:var(--leaf)}
.pg-hero{text-align:center; display:flex; flex-direction:column; align-items:center; margin:0 auto 54px; max-width:900px}
.pg-hero .crumbs{justify-content:center; margin-bottom:34px}
.pg-title{margin:0; font:500 clamp(44px,6.2vw,92px)/1 var(--serif); letter-spacing:-.02em; font-variation-settings:'opsz' 72; text-wrap:balance}
.pg-title:focus{outline:none}
.pg-rule{width:150px; height:auto; margin:22px 0 18px}
.pg-lede{margin:0; font:italic 500 clamp(19px,1.6vw,24px)/1.45 var(--serif); color:var(--leaf); max-width:46ch; font-variation-settings:'opsz' 18}
.pg-text{font-size:17px; line-height:1.72; color:rgba(244,239,228,.9); max-width:64ch}
.pg-small{font-size:14.5px; line-height:1.6; color:rgba(244,239,228,.75)}
.pg-list{list-style:none; margin:14px 0; padding:0; display:grid; gap:8px}
.pg-list li{position:relative; padding-left:22px; font-size:16px; line-height:1.55}
.pg-list li::before{content:""; position:absolute; left:2px; top:.6em; width:7px; height:7px; background:var(--gold); transform:rotate(45deg)}
/* engraved plates, shared by every page */
.pg-plates{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; margin:72px 0 0}
.pg-plate{position:relative; padding:36px 34px 34px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5);
  box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22), 0 40px 80px -44px #000}
.pg-plate > img{width:auto; max-width:62%; height:92px; object-fit:contain}
.pg-plate h2{margin:4px 0 0; font:500 clamp(24px,2.2vw,30px)/1.15 var(--serif); text-wrap:balance}
.pg-plate p{margin:0; font-size:16px; line-height:1.65; color:rgba(244,239,228,.86); max-width:52ch}
.pg-plate .btn-line{margin-top:8px; display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none}
.pg-plate.pg-left{text-align:left; align-items:flex-start}
.pg-plate a:not(.btn-line){color:var(--leaf)}

/* Our Story: the horizontal timeline */
.tl{margin:0 calc(var(--gut) * -1)}
.tl-intro{text-align:center; max-width:780px; margin:0 auto 40px; padding:0 var(--gut)}
.tl-intro .sec-lede{margin:16px auto 0}
.tl-pin{position:relative}
.tl-sticky{display:flex; flex-direction:column; gap:30px}
.tl-pin.is-driven .tl-sticky{position:sticky; top:var(--bar-h); height:calc(100vh - var(--bar-h)); justify-content:center; overflow:hidden}
.tl-rail{list-style:none; margin:0 auto; padding:0 var(--gut); width:min(860px, 100%); display:grid; grid-template-columns:repeat(4,1fr); position:relative}
.tl-rail::before{content:""; position:absolute; left:12.5%; right:12.5%; top:9px; height:1px; background:rgba(201,164,92,.35)}
.tl-rail::after{content:""; position:absolute; left:12.5%; right:12.5%; top:9px; height:1px; background:var(--gold); transform-origin:left; transform:scaleX(var(--tlp,0))}
.tl-rail li{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; font:italic 500 17px/1 var(--serif); color:rgba(240,217,160,.6); transition:color .4s ease}
.tl-rail li::before{content:""; width:19px; height:19px; border-radius:50%; background:radial-gradient(circle,#063257,#011a2e 72%); box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(1,22,40,.9); transition:background .4s ease}
.tl-rail li.on, .tl-rail li.past{color:var(--leaf)}
.tl-rail li.on::before, .tl-rail li.past::before{background:radial-gradient(circle,#f3dda2,#c9a45c 70%)}
.tl-track{overflow:hidden; outline-offset:-4px}
.tl-track:focus-visible{outline:2px solid #e9cf8e}
.tl-pin:not(.is-driven) .tl-track{overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tl-pin:not(.is-driven) .tl-track::-webkit-scrollbar{display:none}
.tl-list{list-style:none; margin:0; padding:10px max(var(--gut), calc(50vw - 300px)); display:flex; gap:clamp(28px,4vw,64px); width:max-content; will-change:transform}
.tl-card{flex:0 0 min(560px, 82vw); scroll-snap-align:center; position:relative; padding:30px 34px 34px; text-align:left;
  background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5);
  box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22), 0 40px 80px -44px #000; opacity:.55; transform:scale(.96); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.tl-card.on{opacity:1; transform:none}
.tl-plate{margin:0 0 16px; height:clamp(150px,22vh,230px); display:grid; place-items:center; border-bottom:1px solid var(--hair-soft); padding-bottom:16px}
.tl-plate img{max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain}
.tl-medal img{height:80%}
.tl-year{margin:0 0 6px; font:600 clamp(48px,5vw,72px)/1 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums}
.tl-card h3{margin:0 0 10px; font:500 clamp(24px,2.3vw,32px)/1.15 var(--serif)}
.tl-card p{margin:0; font-size:16.5px; line-height:1.65; color:rgba(244,239,228,.88)}
.tl-years{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tl-years li{padding:6px 12px; border:1px solid rgba(201,164,92,.5); font:600 16px/1 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums}
.pg-promise{margin:90px auto 0; max-width:820px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.pg-promise img{width:110px; height:auto}
.pg-promise p{margin:0; font:italic 500 clamp(24px,2.6vw,36px)/1.35 var(--serif); text-wrap:balance}
.pg-promise footer{font:500 15px/1 var(--sans); color:var(--leaf); letter-spacing:.02em}
.pg-source{margin:90px 0 0; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center}
.pg-source .sec-lede{margin-top:18px}
.src-chart{margin:0; text-align:center}
.src-map{width:min(100%, 380px); height:auto; overflow:visible}
.src-coast{fill:none; stroke:rgba(233,207,142,.55); stroke-width:1.4; stroke-dasharray:1; stroke-dashoffset:0}
.src-route{fill:none; stroke:#e9cf8e; stroke-width:1.2; stroke-dasharray:4 5}
.src-port circle{fill:#011a2e; stroke:#e9cf8e; stroke-width:1.6}
.src-home circle{fill:#e9cf8e}
.src-port text{fill:#f3e2b6; font:italic 500 17px var(--serif)}
.src-chart figcaption{margin-top:8px; font:italic 500 15px/1.4 var(--serif); color:rgba(240,217,160,.75)}

/* Delivery */
.dv-top{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,60px); align-items:start}
.dv-intro .pg-text{margin:0 0 26px}
.dv-facts{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dv-facts > div{display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:16px; border:1px solid var(--hair-soft); background:rgba(1,22,40,.55)}
.dv-facts img{grid-row:1 / 3; width:64px; height:48px; object-fit:contain}
.dv-facts dt{font:italic 500 15px/1.2 var(--serif); color:var(--leaf)}
.dv-facts dd{margin:4px 0 0; font:500 19px/1.25 var(--serif)}
.dv-check{position:sticky; top:calc(var(--bar-h) + 20px); padding:30px 28px; background:var(--hcg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.95), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22)}
.dv-result:empty{display:none}
.dv-result{margin-top:18px; padding-top:16px; border-top:1px solid var(--hair-soft)}
.dv-result.in{animation:dvIn .5s var(--ease-out)}
@keyframes dvIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.dv-r-title{margin:0 0 6px; font:500 23px/1.2 var(--serif)}
.dv-r-title.is-yes::before{content:""; display:inline-block; width:10px; height:10px; margin-right:10px; border-radius:50%; background:#8fd19e; box-shadow:0 0 10px #8fd19e; vertical-align:2px}
.dv-result p{margin:0 0 8px; font-size:15.5px; line-height:1.6; color:rgba(244,239,228,.88)}
.dv-r-area{color:var(--leaf)!important; font-style:italic; font-family:var(--serif)}
.dv-r{margin:12px 0; display:grid; gap:6px}
.dv-r > div{display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px solid var(--hair-soft); font-size:15px}
.dv-r dt{color:rgba(244,239,228,.75)} .dv-r dd{margin:0; text-align:right; font-weight:600}
.dv-result .btn-line, .dv-result a{color:var(--paper)}
.dv-result .btn-line{display:inline-flex; margin-top:6px; border-color:var(--gold); box-shadow:none}
@media (prefers-reduced-motion: reduce){ .dv-result.in{animation:none} }
.dv-arran{margin:72px 0 0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,64px); align-items:center}
.dv-ferry{width:100%; height:auto}
.dv-arran .sec-title{margin-bottom:12px}
.dv-tt{width:100%; border-collapse:collapse; margin:14px 0 10px}
.dv-tt th, .dv-tt td{padding:14px 10px; border-bottom:1px solid var(--hair-soft); text-align:left; vertical-align:middle}
.dv-tt th span{display:block; font:500 20px/1.2 var(--serif)} .dv-tt th small{display:block; margin-top:4px; font-size:13.5px; color:rgba(244,239,228,.7)}
.dv-tt td{font:600 17px/1.3 var(--serif); color:var(--leaf)}
.dv-now span{visibility:hidden; display:inline-block; padding:4px 10px; border:1px solid var(--gold); font:italic 500 14px/1 var(--serif); color:var(--leaf)}
.dv-tt tr.is-now .dv-now span{visibility:visible}
.dv-tt tr.is-now th span{color:var(--leaf)}
.dv-areas{margin:80px 0 0}
.dv-areas .pg-text{margin:12px 0 22px}
.dv-table-wrap{border:1px solid rgba(201,164,92,.45); background:rgba(1,22,40,.7); max-height:none}
.dv-table{width:100%; border-collapse:collapse; font-size:15px}
.dv-table thead th{position:sticky; top:var(--bar-h); z-index:1; padding:14px 16px; text-align:left; font:italic 500 16px/1 var(--serif); color:var(--leaf); background:#02182b; border-bottom:1px solid rgba(201,164,92,.55)}
.dv-table tbody th{padding:12px 16px; text-align:left; font:600 18px/1 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums; white-space:nowrap; vertical-align:top}
.dv-table td{padding:12px 16px; vertical-align:top; color:rgba(244,239,228,.88); line-height:1.5}
.dv-table td:nth-child(2){font-weight:600; color:var(--paper); white-space:nowrap}
.dv-table tbody tr{border-bottom:1px solid var(--hair-soft)}
.dv-table tbody tr:nth-child(even){background:rgba(201,164,92,.04)}
.dv-table tr.is-island{background:rgba(201,164,92,.08)!important}
.pg-contacts{line-height:1.9!important}

/* Trade */
.tr-top{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,80px); align-items:center}
.tr-intro{font-size:18.5px}
.tr-chef{margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.tr-oval{width:200px; aspect-ratio:4/5; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--gold), 0 0 0 6px rgba(1,22,40,.9), 0 0 0 7px rgba(201,164,92,.35)}
.tr-oval img{width:100%; height:100%; object-fit:cover}
.tr-chef blockquote{margin:0}
.tr-chef blockquote p{margin:0; font:italic 500 22px/1.4 var(--serif); text-wrap:balance}
.tr-chef figcaption{display:flex; flex-direction:column; gap:4px} .tr-chef figcaption b{font:500 18px var(--serif); color:var(--leaf)} .tr-chef figcaption span{font-size:14px; color:rgba(244,239,228,.7)}
.tr-points{list-style:none; margin:70px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hair-soft)}
.tr-points li{padding:28px 26px 28px 0; border-bottom:1px solid var(--hair-soft); position:relative}
.tr-points li:not(:nth-child(3n+1)){padding-left:26px; border-left:1px solid var(--hair-soft)}
.tr-points b{display:flex; align-items:center; gap:10px; font:500 24px/1.2 var(--serif); margin-bottom:8px}
.tr-points b::before{content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex:0 0 auto}
.tr-points p{margin:0; font-size:16px; line-height:1.6; color:rgba(244,239,228,.85)}
.tr-bottom{margin:70px 0 0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:center}
.tr-sheet{max-width:420px; justify-self:center; width:100%}
.tr-cta .pg-text{margin:14px 0 24px}
.tr-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.tr-actions .add-gold{width:auto; text-decoration:none}
.tr-actions .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none}

/* Contact */
.ct-intro{margin:0 auto 40px; text-align:center}
.ct-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ct-grid h2{margin:0 0 4px; font:500 28px/1.15 var(--serif)}
.ct-grid h2:not(:first-child){margin-top:20px}
.ct-line{display:flex; flex-direction:column; gap:2px; margin:6px 0!important}
.ct-line small{font:italic 500 15px var(--serif); color:var(--leaf)}
.ct-line a{font:500 26px/1.2 var(--serif); color:var(--paper)!important; text-decoration:none; font-variant-numeric:lining-nums; font-variation-settings:'opsz' 18}
.ct-line a:hover{color:var(--leaf)!important; text-decoration:underline; text-underline-offset:5px}
.hours-t{border-collapse:collapse; width:100%; font-size:16px; margin-top:14px}
.hours-t td{padding:8px 0; border-bottom:1px solid var(--hair-soft)}
.hours-t td + td{text-align:right; font-variant-numeric:tabular-nums; color:rgba(244,239,228,.88)}
.hours-t tr.today td{color:var(--leaf); font-weight:600}
.ct-hours .open-now{margin-top:6px}
.ct-visit{margin:72px 0 0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(24px,4vw,64px); align-items:center}
.ct-map{position:relative; margin:0}
.ct-map img{width:100%; height:auto}
.ct-pin{position:absolute; left:52%; top:44%; display:flex; align-items:center; gap:10px; transform:translate(-9px,-9px); pointer-events:none}
.ct-pin i{width:18px; height:18px; border-radius:50%; background:radial-gradient(circle,#f3dda2,#c9a45c 70%); box-shadow:0 0 0 3px rgba(1,22,40,.9), 0 0 0 4px var(--gold), 0 0 24px rgba(240,217,160,.6)}
.ct-pin b{padding:6px 10px; background:rgba(1,22,40,.92); border:1px solid rgba(201,164,92,.6); font:italic 500 16px/1 var(--serif); color:var(--leaf); white-space:nowrap}
.ct-addr address{margin:16px 0 22px; font:normal 500 22px/1.5 var(--serif)}
.ct-dir{width:auto; display:inline-flex; text-decoration:none}

@media (max-width: 860px){
  .pages{padding:calc(var(--bar-h) + 16px) var(--gut) 90px}
  .pg-hero{margin-bottom:36px} .pg-hero .crumbs{margin-bottom:22px}
  .pg-plates{grid-template-columns:1fr; margin-top:48px}
  .pg-plate{padding:28px 22px}
  .tl-intro{margin-bottom:24px}
  .tl-rail li{font-size:15px}
  .tl-card{padding:22px 22px 26px}
  .pg-promise{margin-top:60px}
  .pg-source{grid-template-columns:1fr; margin-top:60px}
  .dv-top, .dv-arran, .tr-top, .tr-bottom, .ct-grid, .ct-visit{grid-template-columns:minmax(0,1fr)}
  .dv-facts{grid-template-columns:1fr}
  .dv-check{position:relative; top:auto}
  .dv-table-wrap{overflow-x:auto}
  .dv-table thead th{top:0}
  .dv-table td:nth-child(3){min-width:220px}
  .tr-points{grid-template-columns:1fr}
  .tr-points li, .tr-points li:not(:nth-child(3n+1)){padding:22px 0; border-left:0}
  .ct-pin b{font-size:14px}
}
@media (max-width: 860px){ body.view-page .motion{opacity:0!important; visibility:hidden; pointer-events:none} }
.tl-plate img{height:auto; max-height:clamp(150px,22vh,230px); width:auto; max-width:100%}
.src-rose{opacity:.28}
.dv-table tbody th{font:600 15px/1.2 var(--sans); letter-spacing:.02em}
.ct-line a{font-weight:600}
.ct-addr address{font-weight:600; font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums}
.tl-card .tl-year{margin:0 0 6px; font:600 clamp(48px,5vw,72px)/1 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums}
@media (max-width: 860px){
  .dv-table-wrap{overflow:visible}
  .dv-table thead{display:none}
  .dv-table tbody tr{display:grid; grid-template-columns:auto 1fr; align-items:baseline; padding:12px 14px}
  .dv-table tbody th{padding:0}
  .dv-table td{padding:0}
  .dv-table td:nth-child(2){padding-left:12px}
  .dv-table td:nth-child(3){grid-column:1 / -1; min-width:0; padding-top:4px; font-size:14.5px}
}

/* ===== Phase 5b: the engraved delivery chart ===== */
.dv-top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); grid-template-areas:"intro side"}
.dv-intro{grid-area:intro} .dv-side{grid-area:side; position:sticky; top:calc(var(--bar-h) + 16px); display:flex; flex-direction:column; gap:18px}
.dv-side .dv-check{position:relative; top:auto}
.dv-chart{position:relative; margin:0; border:1px solid rgba(201,164,92,.5); background:#021a2e; box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22), 0 40px 80px -44px #000; padding:10px}
.dv-chart::before{content:""; position:absolute; inset:5px; pointer-events:none; background:var(--hcg); z-index:1}
.dvc-svg{display:block; width:100%; height:auto; max-height:calc(100vh - var(--bar-h) - 250px); font-family:var(--serif)}
.dvc-sea{fill:rgba(240,217,160,.55); font:italic 500 26px var(--serif); letter-spacing:.12em}
.dvc-isle{fill:rgba(240,217,160,.8); font:italic 500 22px var(--serif)} .dvc-small{font-size:16px}
.dvc-towns text{fill:#f3e2b6; font:italic 500 15px var(--serif); paint-order:stroke; stroke:#021a2e; stroke-width:4px}
.dvc-towns text.is-home{font-size:19px; font-weight:600; fill:#f3dda2}
.dvc-pt .dvc-hit{fill:transparent}
.dvc-pt .dvc-dot{fill:#021a2e; stroke:#e9cf8e; stroke-width:1.4; transition:r .3s ease, fill .3s ease}
.dvc-pt:hover .dvc-dot, .dvc-pt:focus-visible .dvc-dot{fill:#e9cf8e}
.dvc-pt:focus-visible{outline:none} .dvc-pt:focus-visible .dvc-hit{stroke:#e9cf8e; stroke-width:1.5}
.dvc-pt.on .dvc-dot{fill:#f3dda2; r:6}
.dvc-shop circle{fill:#011a2e; stroke:#f3dda2; stroke-width:2} .dvc-shop .c{fill:#f3dda2; stroke:none}
.dvc-shop text{fill:#f3dda2; font:italic 600 16px var(--serif); paint-order:stroke; stroke:#021a2e; stroke-width:4px}
.dvc-route{fill:none; stroke:#f3dda2; stroke-width:2.6; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(240,217,160,.55))}
.dvc-route.is-ferry{stroke-dasharray:7 7; stroke-width:2}
.dvc-route.is-courier{stroke-dasharray:none}
.dvc-ring circle{fill:none; stroke:#f3dda2; stroke-width:2}
.dvc-ring .pulse{animation:dvcPulse 1.8s ease-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes dvcPulse{from{opacity:.9; transform:scale(1)} to{opacity:0; transform:scale(4)}}
.dvc-ans-label{fill:#f3e2b6; font:italic 600 18px var(--serif); paint-order:stroke; stroke:#021a2e; stroke-width:5px}
.dvc-ferry{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
@media (prefers-reduced-motion: reduce){ .dvc-ring .pulse{animation:none; opacity:0} }
.dv-all{margin-top:6px}
.dv-all > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border:1px solid rgba(201,164,92,.55); font:italic 500 19px/1 var(--serif); color:var(--leaf); background:rgba(1,22,40,.7)}
.dv-all > summary::-webkit-details-marker{display:none}
.dv-all > summary::after{content:""; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform .3s ease}
.dv-all[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.dv-all > summary:focus-visible{outline:2px solid #e9cf8e; outline-offset:2px}
.dv-all[open] .dv-table-wrap{margin-top:16px}
.dv-table tr.hl{animation:dvHl 2.4s ease}
@keyframes dvHl{0%,30%{background:rgba(233,207,142,.28)} 100%{background:transparent}}
@media (max-width: 860px){
  .dv-top{grid-template-areas:"side" "intro"}
  .dv-side{position:relative; top:auto}
  .dvc-svg{max-height:none}
  .dvc-towns text{font-size:22px} .dvc-ans-label{font-size:24px} .dvc-sea{font-size:30px}
}
.dv-top{grid-template-areas:"check chart" "intro chart"; row-gap:28px}
.dv-side{display:contents}
.dv-side .dv-check{grid-area:check}
.dv-chart{grid-area:chart; position:sticky; top:calc(var(--bar-h) + 16px); align-self:start}
.dvc-svg{max-height:calc(100vh - var(--bar-h) - 60px); margin:0 auto}
@media (max-width: 860px){ .dv-top{grid-template-columns:minmax(0,1fr); grid-template-areas:"check" "chart" "intro"} .dv-chart{position:relative; top:auto} .dvc-svg{max-height:none} }
@media (min-width: 861px){ .dv-top{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)} }
/* P5-S3: a coastline panorama behind the timeline; a larger, clearer active plate */
.tl-sticky{position:relative}
.tl-pano{position:absolute; left:0; right:0; bottom:0; height:min(34vh, 300px); pointer-events:none; z-index:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.tl-strip{position:absolute; left:0; right:0; bottom:16%; height:62%; background:url(art/panorama.webp) 0 100%/auto 100% repeat-x; opacity:.32}
.tl-water{position:absolute; left:0; right:0; bottom:0; height:22%; background:repeating-linear-gradient(180deg, rgba(233,207,142,.18) 0 1px, transparent 1px 7px); opacity:.8}
.tl-boat{position:absolute; left:20px; bottom:13%; width:120px; height:auto; opacity:.7}
.tl-rail, .tl-track{position:relative; z-index:1}
.tl-card{flex:0 0 min(600px, 84vw); opacity:.55; transform:scale(.92)}
.tl-card.on{opacity:1; transform:none}
.tl-card p{font-size:17px; line-height:1.65}
.tl-card h3{font-size:clamp(26px,2.5vw,34px)}
.tl-pin:not(.is-driven) .tl-pano{display:none}
@media (max-width: 860px){ .tl-card{flex-basis:84vw} .tl-card p{font-size:16px} }
/* P5-S4: story plates: left-aligned, a lead sentence, a staggered two-column layout */
.pg-story .pg-plates{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 40px; align-items:start}
.pg-story .pg-plate{text-align:left; align-items:flex-start; padding:34px 38px 36px}
.pg-story .pg-plate:nth-child(even){margin-top:90px}
.pg-story .pg-plate > img{height:80px; max-width:40%; align-self:flex-start}
.pg-story .pg-plate p{font-size:15.5px; line-height:1.7; max-width:60ch}
.pl-lead{display:block; margin-bottom:10px; font:italic 500 21px/1.4 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18}
@media (max-width: 860px){ .pg-story .pg-plates{grid-template-columns:1fr} .pg-story .pg-plate:nth-child(even){margin-top:0} }
/* P5-N1: no empty band before the footer on short pages */
.pages{padding-bottom:56px}
/* P5-N3: the phone timeline swipe */
.tl-track{touch-action:pan-x pan-y}

/* ===================== Phase 6: Recipes & Guide, cook mode, Club, long-form pages ===================== */
.gd-recipes, .gd-season, .gd-notes{margin-top:72px}
.gd-recipes .sec-title, .gd-season .sec-title, .gd-notes .sec-title{text-align:center; margin-bottom:28px}
.gd-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap:24px; justify-content:center}
.gd-card a{display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; padding:22px; text-decoration:none; color:var(--paper);
  background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22); transition:transform .3s var(--ease-out), box-shadow .3s ease}
.gd-card a:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.4), 0 30px 60px -30px #000}
.gd-card a:focus-visible{outline:2px solid #e9cf8e; outline-offset:3px}
.gd-art{aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#063257,#011a2e 72%); box-shadow:0 0 0 1px var(--gold), 0 0 0 5px rgba(1,22,40,.9), 0 0 0 6px rgba(201,164,92,.3)}
.gd-art img{width:78%; height:auto}
.gd-meta{display:flex; flex-direction:column; gap:8px}
.gd-meta small{font:italic 500 16px var(--serif); color:var(--leaf); display:flex; gap:10px; align-items:center}
.gd-ex{font-style:normal; font:500 12.5px/1 var(--sans); padding:4px 8px; border:1px solid rgba(201,164,92,.5); color:rgba(240,217,160,.85)}
.gd-meta b{font:500 clamp(28px,2.6vw,36px)/1.1 var(--serif)}
.gd-intro{font-size:15.5px; line-height:1.6; color:rgba(244,239,228,.85)}
.gd-facts{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--leaf)}
.gd-facts .dot{width:4px; height:4px; background:var(--gold); transform:rotate(45deg)}
.gd-more{text-align:center; margin-top:18px}
.gd-season-note{text-align:center; margin:-16px auto 26px}
.gd-table-wrap{overflow-x:auto; border:1px solid rgba(201,164,92,.45); background:rgba(1,22,40,.7); padding:12px 18px}
.gd-table{width:100%; border-collapse:collapse; min-width:620px}
.gd-table th, .gd-table td{padding:12px 4px; text-align:center; border-bottom:1px solid var(--hair-soft)}
.gd-table thead th{font:italic 500 16px var(--serif); color:rgba(240,217,160,.75)}
.gd-table thead th.now{color:#f3dda2; font-weight:600}
.gd-table abbr{text-decoration:none}
.gd-table tbody th{text-align:left; font:500 19px var(--serif); padding-right:16px; white-space:nowrap}
.gd-table td span[aria-hidden]{display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:middle}
.gd-table td.s2 span[aria-hidden]{background:radial-gradient(circle,#f3dda2,#c9a45c 70%); box-shadow:0 0 8px rgba(240,217,160,.4)}
.gd-table td.s1 span[aria-hidden]{border:1.5px solid #c9a45c}
.gd-table td.s0 span[aria-hidden]{width:4px; height:4px; background:rgba(201,164,92,.3)}
.gd-table td.now, .gd-table th.now{background:rgba(233,207,142,.08)}
.gd-key{display:flex; justify-content:center; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:14px; font-size:14.5px}
.gd-key b{font-weight:500; margin-right:14px}
.gd-key .k-best{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,#f3dda2,#c9a45c 70%)}
.gd-key .k-av{width:14px; height:14px; border-radius:50%; border:1.5px solid #c9a45c}
.gd-plates{margin-top:0}
.gd-plates .pg-plate h3{margin:4px 0 0; font:500 26px/1.15 var(--serif)}

/* a recipe */
.rc-example{margin:14px 0 0; padding:6px 12px; border:1px solid rgba(201,164,92,.55); font:italic 500 15px var(--serif); color:var(--leaf)}
.rc-example[hidden]{display:none}
.rc-meta{margin:26px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:0}
.rc-meta > div{padding:6px 26px; text-align:center; border-left:1px solid var(--hair-soft)} .rc-meta > div:first-child{border-left:0}
.rc-meta dt{font:italic 500 15px var(--serif); color:var(--leaf)} .rc-meta dd{margin:4px 0 0; font:600 22px/1 var(--serif); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums}
.rc-start{margin:28px 0 0; display:flex; flex-direction:column; align-items:center; gap:10px}
.rc-start .add-gold{width:auto}
.rc-start small{font-size:14px; color:rgba(244,239,228,.75)}
.rc-body{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,64px); align-items:start}
.rc-ing{position:sticky; top:calc(var(--bar-h) + 20px)}
.rc-ing h2{margin:0 0 8px; font:500 30px/1.1 var(--serif)}
.rc-list{list-style:none; margin:0; padding:0; width:100%}
.rc-list li{display:grid; grid-template-columns:72px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--hair-soft); font-size:16px; line-height:1.45}
.rc-list b{font:600 17px/1.3 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums}
.rc-method .sec-title{margin-bottom:20px}
.rc-steps{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.rc-steps li{display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start}
.rc-steps .rail-n{margin:0}
.rc-steps h3{margin:10px 0 6px; font:500 24px/1.2 var(--serif)} .rc-steps h3 small{font:italic 500 16px var(--serif); color:var(--leaf)}
.rc-steps p{margin:0; font-size:17px; line-height:1.7; color:rgba(244,239,228,.9); max-width:62ch}
.rc-shop{margin-top:80px}
.rc-shop-head{text-align:center} .rc-shop-head .pg-text{margin:10px auto 24px}
.rc-products{justify-content:center}
.rc-loading{list-style:none; padding:24px; text-align:center; color:rgba(244,239,228,.8)}
.rc-for{display:block; font:italic 500 14px var(--serif); color:var(--ink-2); margin-bottom:4px}
.rc-addall{text-align:center; margin:18px 0 0}
.rc-addall .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none}
.rc-addall .btn-line[hidden]{display:none}

/* cook mode */
.cook{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; color:var(--paper); background:var(--tex-guil), radial-gradient(120% 80% at 50% 0%, #06304f, #011628 70%); display:none; grid-template-rows:auto auto 1fr auto auto; overflow:hidden}
.cook[open]{display:grid}
.cook::backdrop{background:#011628}
html.ck-open{overflow:hidden}
.ck-top{display:flex; align-items:center; gap:12px; padding:14px max(var(--gut), env(safe-area-inset-left)) 12px; border-bottom:1px solid var(--hair-soft)}
.ck-small{margin:0; flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.ck-small span{font:500 13px var(--sans); color:var(--leaf)} .ck-small b{font:500 22px/1.1 var(--serif); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ck-ing-btn{min-height:44px; padding:0 16px; border:1px solid rgba(201,164,92,.55); background:transparent; color:var(--paper); font:italic 500 17px var(--serif); cursor:pointer}
.ck-ing-btn[aria-expanded="true"]{background:rgba(233,207,142,.12)}
.ck-close{width:44px; height:44px; border:1px solid rgba(201,164,92,.55); background:transparent; color:var(--paper); display:grid; place-items:center; cursor:pointer}
.ck-close svg{width:16px; height:16px}
.ck-progress{height:3px; background:rgba(201,164,92,.2)}
.ck-progress span{display:block; height:100%; background:linear-gradient(90deg,#c9a45c,#f3dda2); transform-origin:left; transform:scaleX(0); transition:transform .6s var(--ease-out); box-shadow:0 0 10px rgba(240,217,160,.5)}
.ck-stage{overflow-y:auto; display:grid; place-items:center; padding:28px var(--gut); touch-action:pan-y}
.ck-step{max-width:760px; width:100%}
.ck-step.in{animation:ckIn .45s var(--ease-out)}
@keyframes ckIn{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}
.ck-n{margin:0 0 10px; display:flex; align-items:baseline; gap:10px; color:var(--leaf)}
.ck-n b{font:600 clamp(64px,10vw,110px)/.9 var(--serif); font-variation-settings:'opsz' 18; font-variant-numeric:lining-nums} .ck-n span{font:italic 500 20px var(--serif)}
.ck-step h2{margin:0 0 16px; font:500 clamp(32px,4.4vw,54px)/1.08 var(--serif); text-wrap:balance}
.ck-text{margin:0; font-size:clamp(20px,2vw,25px); line-height:1.6; color:rgba(244,239,228,.95)}
.ck-need{margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ck-need span{font:italic 500 17px var(--serif); color:var(--leaf); margin-right:4px}
.ck-need i{font-style:normal; padding:6px 12px; border:1px solid var(--hair); font-size:15px}
.ck-timer-btn{margin-top:22px; display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none; font-size:16px}
.ck-ing{position:absolute; right:0; top:72px; bottom:0; width:min(400px, 100%); z-index:3; padding:24px; overflow-y:auto; background:var(--tex-guil), linear-gradient(180deg, #04223a, #011628); border-left:1px solid rgba(201,164,92,.5); box-shadow:-30px 0 60px -20px #000}
.ck-ing[hidden]{display:none}
.ck-ing h2{margin:0 0 12px; font:500 28px var(--serif)}
.ck-ing ul{list-style:none; margin:0 0 20px; padding:0}
.ck-ing li{border-bottom:1px solid var(--hair-soft)}
.ck-ing label{display:flex; gap:12px; align-items:flex-start; padding:12px 0; cursor:pointer; font-size:16px; line-height:1.45}
.ck-ing input{width:22px; height:22px; margin:1px 0 0; accent-color:#c9a45c; flex:0 0 auto}
.ck-ing input:checked + span{opacity:.5; text-decoration:line-through}
.ck-ing b{color:var(--leaf); font-family:var(--serif)}
.ck-ing .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none}
.ck-timers{display:flex; flex-wrap:wrap; gap:10px; padding:0 var(--gut) 10px; justify-content:center}
.ck-timers:empty{display:none}
.ck-tm{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid rgba(201,164,92,.55); background:rgba(1,22,40,.85)}
.ck-tm-ring{width:26px; height:26px; border-radius:50%; background:conic-gradient(#e9cf8e calc(var(--p) * 360deg), rgba(201,164,92,.2) 0)}
.ck-tm b{font:600 22px/1 var(--serif); font-variant-numeric:tabular-nums lining-nums; font-variation-settings:'opsz' 18; min-width:56px}
.ck-tm small{font-size:13px; color:rgba(244,239,228,.75); max-width:140px}
.ck-tm button{min-height:36px; padding:0 10px; border:1px solid var(--hair); background:transparent; color:var(--paper); cursor:pointer; font:500 14px var(--sans)}
.ck-tm.done{border-color:#f3dda2; animation:ckDone 1s ease-in-out infinite alternate}
@keyframes ckDone{to{box-shadow:0 0 22px rgba(240,217,160,.55)}}
.ck-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair-soft)}
.ck-nav .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none; min-height:54px}
.ck-nav .btn-line:disabled{opacity:.35}
.ck-nav .add-gold{width:auto; min-width:180px}
.ck-count{margin:0; font:italic 500 17px var(--serif); color:var(--leaf)}
@media (prefers-reduced-motion: reduce){ .ck-step.in, .ck-tm.done{animation:none} .ck-progress span{transition:none} }

/* Club */
.cl-card{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,70px); align-items:center; max-width:980px; margin:0 auto; padding:clamp(28px,4vw,48px);
  background:var(--hcg), var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.94), rgba(1,22,40,.97)); border:1px solid rgba(201,164,92,.5); box-shadow:inset 0 0 0 5px rgba(1,22,40,.75), inset 0 0 0 6px rgba(201,164,92,.22), 0 40px 80px -44px #000}
.cl-medal{position:relative; width:clamp(160px,18vw,230px); aspect-ratio:1; margin:0; display:grid; place-items:center; filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.cl-medal img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.cl-medal span{position:relative; width:62%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; background:rgba(1,22,40,.92); box-shadow:0 0 0 1px var(--gold); font:italic 500 clamp(18px,1.8vw,24px)/1.15 var(--serif); color:var(--leaf)}
.cl-copy .pg-text{margin:0 0 10px; font-size:18px}
.cl-strap{margin:0 0 22px; font:italic 500 22px/1.35 var(--serif); color:var(--leaf)}
.cl-cta{margin:0 0 10px} .cl-cta .add-gold{width:auto; display:inline-flex; text-decoration:none}
.cl-how{margin-top:80px}
.cl-how .sec-title{text-align:center; margin-bottom:32px}
.cl-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative}
.cl-steps::before{content:""; position:absolute; left:12%; right:12%; top:27px; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent)}
.cl-steps li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.cl-steps b{font:500 22px/1.2 var(--serif)} .cl-steps p{margin:0; font-size:15.5px; line-height:1.6; color:rgba(244,239,228,.85)}
.cl-why{margin:6px 0 0} .cl-why dt{font:500 21px/1.2 var(--serif); margin-top:14px; color:var(--leaf)} .cl-why dd{margin:4px 0 0; font-size:15.5px; line-height:1.6; color:rgba(244,239,228,.86)}

/* long-form pages: paper, ink, a comfortable measure */
.pg-doc .pg-hero{margin-bottom:34px}
.doc-toc{max-width:760px; margin:0 auto 28px; padding:20px 26px; border:1px solid rgba(201,164,92,.45); background:rgba(1,22,40,.7)}
.doc-toc[hidden]{display:none}
.doc-toc p{margin:0 0 10px; font:italic 500 18px var(--serif); color:var(--leaf)}
.doc-toc ol{margin:0; padding-left:22px; columns:2; column-gap:32px; font-size:15px; line-height:1.9}
.doc-toc a{color:var(--paper); text-decoration:none} .doc-toc a:hover{color:var(--leaf); text-decoration:underline}
.doc{max-width:760px; margin:0 auto; padding:clamp(28px,5vw,64px); color:var(--ink); background:var(--tex-paper), radial-gradient(130% 90% at 50% 0%, #fdf9f0, #efe5cf);
  box-shadow:0 0 0 1px #8a6a2c, 0 40px 80px -40px #000; position:relative; font-size:17.5px; line-height:1.75}
.doc::before{content:""; position:absolute; inset:7px; border:1px solid rgba(138,106,44,.45); pointer-events:none; background:var(--hcd)}
.doc > *{position:relative}
.doc p{margin:0 0 1em; max-width:66ch}
.doc .doc-lead, .doc > p:first-child{font:italic 500 21px/1.55 var(--serif); color:#3a2f1a; font-variation-settings:'opsz' 18}
.doc h2{margin:1.8em 0 .6em; font:500 clamp(24px,2.4vw,30px)/1.2 var(--serif); color:#0b1c2a; scroll-margin-top:calc(var(--bar-h) + 20px)}
.doc h2:focus{outline:none}
.doc ul{margin:0 0 1em; padding-left:1.2em} .doc li{margin:.3em 0}
.doc li::marker{color:#8a6a2c}
.doc a{color:#7a5a1a; text-underline-offset:3px}
.doc b, .doc strong{color:#0b1c2a}
.doc-dl{list-style:none; padding:0!important} .doc-dl li{padding:10px 0; border-bottom:1px dashed rgba(13,29,41,.2); margin:0}
@media (max-width: 860px){
  .gd-card a{grid-template-columns:96px 1fr; gap:16px; padding:18px}
  .rc-body{grid-template-columns:minmax(0,1fr)}
  .rc-ing{position:relative; top:auto}
  .rc-meta > div{padding:6px 14px}
  .cl-card{grid-template-columns:1fr; justify-items:center; text-align:center}
  .cl-steps{grid-template-columns:1fr; gap:22px} .cl-steps::before{display:none}
  .doc{font-size:17px; padding:26px 22px} .doc-toc ol{columns:1}
  .ck-nav .add-gold{min-width:0; flex:1}
  .ck-tm small{display:none}
}
.gd-cards{display:flex; flex-wrap:wrap; justify-content:center} .gd-card{flex:0 1 600px}
.ck-ing{bottom:calc(84px + env(safe-area-inset-bottom))}
.rc-start .add-gold{height:54px; min-height:54px; padding:0 30px; display:inline-flex}
/* Phase 7: the chart line, 2 px with a soft gold glow */
.dvc-route{stroke-width:2; filter:drop-shadow(0 0 6px rgba(240,217,160,.7))}
.dvc-route.is-ferry{stroke-width:1.6}
.rc-also{text-align:center; margin:18px auto 0; font:italic 500 18px/1.5 var(--serif); color:var(--leaf)}
.rc-also[hidden]{display:none}
.ck-tm-ring{width:36px; height:36px; background:none; border-radius:0; transform:rotate(-90deg)}
.ck-tm-ring circle{fill:none; stroke-width:2.2}
.ck-tm-ring .bg{stroke:rgba(201,164,92,.25)}
.ck-tm-ring .fg{stroke:#e9cf8e; stroke-dasharray:94.25; transition:stroke-dashoffset .25s linear}
.ck-tm-ring text{transform:rotate(90deg); transform-origin:18px 18px; fill:#f3e2b6; font:600 12px var(--serif); font-variant-numeric:lining-nums}
.gd-table thead th.now abbr{font-weight:700; color:#f3dda2; border-bottom:2px solid #c9a45c; padding-bottom:2px}
.gd-table tbody th{position:sticky; left:0; z-index:1; background:#021a2e}
/* Club: the membership note */
.cl-note{margin:0; width:clamp(280px, 30vw, 400px); aspect-ratio:400/252; transform:rotate(-3deg); filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)); will-change:transform}
.cl-note-in{position:relative; width:100%; height:100%; border-radius:10px; overflow:hidden; background:var(--tex-guil), radial-gradient(120% 120% at 30% 20%, #0b3a63, #021a2e 70%); box-shadow:0 0 0 1px #c9a45c, inset 0 0 0 4px rgba(1,22,40,.8), inset 0 0 0 5px rgba(201,164,92,.35)}
.cl-guil{position:absolute; inset:0; width:100%; height:100%}
.cl-seal{position:absolute; left:8%; top:50%; width:32%; height:auto; transform:translateY(-50%); filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.cl-name{position:absolute; left:44%; top:24%; margin:0; display:flex; flex-direction:column; font:500 clamp(18px,1.8vw,24px)/1 var(--serif); color:#f3e2b6; letter-spacing:.02em}
.cl-name em{font-style:italic; font-size:1.5em; color:#f3dda2}
.cl-est{position:absolute; left:44%; bottom:20%; margin:0; font:italic 500 clamp(12px,1vw,14px) var(--serif); color:rgba(240,217,160,.8)}
.cl-boat{position:absolute; right:7%; bottom:12%; width:18%; height:auto; opacity:.7}
@media (max-width: 860px){ .cl-note{width:min(300px, 80vw)} }
.nf-art{width:120px; height:auto; margin-bottom:18px; opacity:.85}
.nf-links{list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.nf-links .add-gold{width:auto; display:inline-flex; text-decoration:none; padding:0 24px}
.nf-links .btn-line{display:inline-flex; color:var(--paper); border-color:var(--gold); box-shadow:none}
.nf-call{text-align:center; margin-top:22px} .nf-call a{color:var(--leaf)}
.pg-rule{clip-path:inset(0 50% 0 50%); opacity:.4}
.pg-rule.drawn{clip-path:inset(0 0 0 0); opacity:1; transition:clip-path 1s var(--ease-io) .15s, opacity .6s ease .15s}
.rm .pg-rule, .rm .pg-rule.drawn{clip-path:none; opacity:1; transition:none}
.tl-plate img.is-photo{height:100%; max-height:clamp(150px,22vh,230px); width:100%; object-fit:cover; filter:sepia(.35) contrast(1.05); box-shadow:0 0 0 1px var(--gold)}
.hero-lede.reveal.d1{transition-delay:.12s}

/* L2: the product page holds its shape while the product arrives (no layout shift) */
.g-thumbs{min-height:74px}
.pdp-eyebrow{min-height:56px}
.pdp-title{min-height:2.1em}
.pdp-price{min-height:46px}
.pdp.is-loading .pdp-info{min-height:900px}
.pdp.is-loading .related, .pdp.is-loading .pdp-back{display:none}
.pdp.is-loading .pdp-title{color:rgba(244,239,228,.55)}
@media (max-width: 860px){ .pdp.is-loading .pdp-info{min-height:1100px} .g-thumbs{min-height:60px} }
/* S1: the category heading as the page's h1 on shop routes */
.counter-head h1{margin:0; font:500 clamp(30px,2.8vw,42px)/1.05 var(--serif); letter-spacing:-.01em; font-variation-settings:'opsz' 40}
.hero-title .ln > span{white-space:nowrap}
.dv-chart{aspect-ratio:891/955}