/* ============================================================
   desk34 guitars – Digital Product Passport
   Written phone-first. Almost every read of this page starts
   with a tap on the label inside the soundhole.
   ============================================================ */

body.pp{
  background:var(--ink);
  background-attachment:scroll;         /* fixed backgrounds stutter on iOS */
}
body.pp .wrap{max-width:none}

/* ── the shared section shell ─────────────────────────── */
.ps{position:relative;padding-block:clamp(3rem,11vw,5.5rem);overflow:hidden}
.ps-in{position:relative;z-index:1;max-width:760px;margin:0 auto;padding-inline:clamp(1.25rem,6vw,2rem)}
.ps-alt{background:linear-gradient(180deg,rgba(46,33,19,.34),rgba(30,24,17,0) 55%)}

/* the photograph behind a section */
.ps-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ps-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.20;filter:saturate(.45) brightness(.62);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 62%,transparent 100%);
}
/* when the photograph is not there yet, say which one is missing */
.ps-bg.missing::after{
  content:attr(data-file);position:absolute;left:clamp(1.25rem,6vw,2rem);top:1rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(196,122,42,.5);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ps-bg.missing{background:linear-gradient(160deg,rgba(74,49,24,.3),transparent 62%)}

.ps-eyebrow{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:.7rem;font-weight:400;
}
.ps h2{font-size:clamp(1.9rem,8vw,2.9rem);margin-bottom:.8rem;line-height:1}
.ps-lede-top{margin-top:.2rem;margin-bottom:1.1rem}
.ps-lede{
  font-family:var(--ff-display);font-size:clamp(1.05rem,4.4vw,1.35rem);
  line-height:1.5;color:var(--cream);margin-bottom:1.8rem;max-width:44ch;
}

/* ══ 1. hero ═══════════════════════════════════════════ */
.phero{
  position:relative;min-height:72svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
  padding:clamp(2rem,6vh,3rem) 0 clamp(2rem,6vh,3rem);
}
.phero .ps-bg img{
  opacity:.5;filter:saturate(.7) brightness(.72);
  -webkit-mask-image:none;mask-image:none;
}
.phero::after{        /* the scrim the title sits on */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,11,.82) 0,rgba(20,17,11,.28) 32%,
             rgba(20,17,11,.72) 68%,rgba(20,17,11,.97) 100%);
}
.phero-in{
  position:relative;z-index:1;max-width:760px;margin:0 auto;width:100%;
  padding-inline:clamp(1.25rem,6vw,2rem);
}

.ph-kicker{
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment);opacity:.85;margin-bottom:.9rem;
}
.ph-kicker b{color:var(--ochre);font-weight:400}
.ph-title{
  font-family:var(--ff-display);font-weight:300;
  font-size:clamp(3rem,15vw,5.5rem);line-height:.92;letter-spacing:-.015em;
  color:var(--cream);margin-bottom:.6rem;
}
.ph-sub{font-size:.82rem;color:var(--mist);margin-bottom:1.5rem}

.ph-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);border-radius:2px;
  background:rgba(20,17,11,.5);backdrop-filter:blur(4px);
  padding:.45rem .8rem;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--parchment);text-decoration:none;
}
.chip b{color:var(--ochre);font-weight:500;letter-spacing:.14em}
.chip-link{transition:border-color .25s,color .25s}
.chip-link:hover,.chip-link:focus-visible{border-color:var(--ochre);color:var(--cream)}

/* verification state */
/* no frame: it sits as a third line under Ownership and Recorded on */
.verify{
  display:flex;gap:.5rem;align-items:center;
  border:0;background:none;padding:0;
  margin:.45rem 0 0;max-width:44ch;
}
.verify svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke-width:1.6}
.verify .vt{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin:0}
.verify .vb{display:block;font-size:.76rem;line-height:1.55;color:var(--mist)}

.verify.idle svg{stroke:var(--ochre)}
.verify.idle .vt{color:var(--ochre)}

.verify.ok svg{stroke:var(--sage)}
.verify.ok .vt{color:var(--sage)}

.verify.bad svg{stroke:var(--ember)}
.verify.bad .vt{color:var(--ember)}

.ph-own{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.ph-own b{color:var(--parchment);font-weight:400}

/* the nudge that there is more below */
.ph-cue{
  position:absolute;left:50%;bottom:1.4rem;z-index:1;
  width:1px;height:clamp(28px,6vh,44px);transform:translateX(-50%);
  background:linear-gradient(to bottom,transparent,var(--ochre));
  opacity:.65;animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.2;transform:translateX(-50%) scaleY(.6)}
               50%{opacity:.7;transform:translateX(-50%) scaleY(1)}}

/* ══ label / value rows ════════════════════════════════ */
.rows{display:grid;gap:0;margin-bottom:1.6rem}
.rows .row{
  display:grid;grid-template-columns:1fr;gap:.15rem;
  padding:.85rem 0;border-top:1px solid var(--line-soft);
}
.rows .row:last-child{border-bottom:1px solid var(--line-soft)}
.rows dt{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre);
}
.rows dd{font-size:.92rem;color:var(--cream);line-height:1.6}
.rows .r-n{display:block;font-size:.76rem;color:var(--mist);line-height:1.6;margin-top:.3rem}
.rows-tight .row{padding:.55rem 0}
.rows-tight dd{font-size:.84rem}
.tbr{font-style:italic;color:var(--mist)}


/* ══ headline figures ══════════════════════════════════ */
/* On a phone the twelve figures run off to the right as one swipeable strip.
   From 620px there is room to read them all at once, so they become a table. */
.pstats{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(46%,10.5rem);
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pstats::-webkit-scrollbar{display:none}
.pstat{background:var(--ink);padding:1rem .9rem;text-align:center;scroll-snap-align:start}
.pstat b{
  display:block;font-family:var(--ff-display);font-weight:300;
  font-size:clamp(1.8rem,8vw,2.4rem);line-height:1;color:var(--cream);
}
.pstat i{font-style:normal;font-size:.44em;color:var(--ochre);
  letter-spacing:.06em;margin-left:.25em}
.pstat span{
  display:block;margin-top:.45rem;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist);
}
@media(min-width:620px){
  .pstats{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow-x:visible}
}

/* ══ one tap down ══════════════════════════════════════ */
.drop{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  margin-bottom:-1px;
}
.drop + .drop{border-top:0}
.drop summary{
  display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  padding:.95rem 0;transition:color .2s;
}
.drop summary::-webkit-details-marker{display:none}
.drop summary:hover .d-t,.drop summary:focus-visible .d-t{color:var(--ochre)}
.d-t{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--parchment);transition:color .2s;
}
.d-meta{font-size:.66rem;color:var(--mist);margin-left:auto;white-space:nowrap}
.d-x{
  position:relative;width:11px;height:11px;flex:0 0 auto;margin-left:.2rem;
}
.d-x::before,.d-x::after{
  content:'';position:absolute;background:var(--ochre);transition:transform .25s,opacity .25s;
}
.d-x::before{left:0;top:5px;width:11px;height:1px}
.d-x::after{left:5px;top:0;width:1px;height:11px}
.drop[open] .d-x::after{transform:scaleY(0)}
.drop[open] .d-t{color:var(--ochre)}
.drop-in{padding:.2rem 0 1.4rem}
.drop-in .rows{margin-bottom:0}
.drop-in .rows .row:first-child{border-top:0;padding-top:0}
.note-p{font-size:.84rem;line-height:1.7;color:var(--mist);margin-bottom:.9rem}
.note-p:last-child{margin-bottom:0}
.note-p b{color:var(--parchment);font-weight:400}

/* ══ 4. care ═══════════════════════════════════════════
   No lede here: the heading runs straight into the table, and the rows sit
   closer together than elsewhere because every one of them is short. */
#care .rows{margin-top:.9rem;margin-bottom:0}
#care .rows .row{padding:.6rem 0}
#care .rows dd{line-height:1.45}
#care .rows .r-n{line-height:1.45;margin-top:.2rem}

/* ══ 3. timbers ════════════════════════════════════════ */
/* One layout at every width: the cards run sideways and the next one peeks in.
   Nine of these stacked would be five screens of scrolling on a phone, and the
   phone is the only screen this page is designed for. */
.tgrid{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(74%,17rem);gap:.7rem;
  margin:0 calc(clamp(1.25rem,6vw,2rem) * -1) .7rem;
  padding:0 clamp(1.25rem,6vw,2rem) .5rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-padding-inline:clamp(1.25rem,6vw,2rem);  /* snap to the gutter, not past it */
  align-items:stretch;   /* every card the same height across the strip */
}
.tgrid::-webkit-scrollbar{display:none}
.tgrid > *{scroll-snap-align:start}
.tbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.2rem;min-height:1.6rem;
}
.tgrid-hint{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);margin:0;
}
.tgrid-hint b{color:var(--ochre);font-weight:400}

/* A finger can swipe the strip; a mouse cannot, so a pointer device gets
   buttons instead of the swipe hint. */
.tnav{display:none;align-items:center;gap:.5rem}
.tnav-b{
  width:30px;height:30px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--parchment);
  font-family:var(--ff-body);font-size:1rem;line-height:1;
  transition:border-color .2s,color .2s,opacity .2s;
}
.tnav-b:hover:not(:disabled),.tnav-b:focus-visible{border-color:var(--ochre);color:var(--ochre)}
.tnav-b:disabled{opacity:.3;cursor:default}
.tnav-c{
  font-size:.6rem;letter-spacing:.18em;color:var(--mist);
  min-width:3.2rem;text-align:center;
}
.tnav-c b{color:var(--ochre);font-weight:400}
@media(hover:hover) and (pointer:fine){
  .tnav{display:flex}
  .tgrid-hint{display:none}
}

.tcard{
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg,rgba(46,33,19,.5),rgba(30,24,17,.3));
  display:flex;flex-direction:column;overflow:hidden;
}
.tc-shot{position:relative;aspect-ratio:3/2;background:rgba(20,17,11,.5);overflow:hidden}
.tc-shot img{width:100%;height:100%;object-fit:cover}
.tc-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;
  color:rgba(176,162,137,.45);
}
.tc-shot img + .tc-ph{display:none}
.tc-swatch{height:5px;background:var(--ochre)}
.tc-in{padding:.8rem .85rem .85rem;display:flex;flex-direction:column;flex:1}
.tc-role{
  font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;
  color:var(--ochre);display:block;margin-bottom:.25rem;
}
.tcard h3{font-size:1.1rem;margin-bottom:.05rem}
.tc-sci{font-style:italic;color:var(--mist);font-size:.72rem;margin-bottom:.5rem}
.tcard .rows{margin-bottom:0;margin-top:.15rem}
/* inside a card the rows read across, not down: nine of these stack up fast */
.tcard .rows .row{
  grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;padding:.32rem 0;
}
.tcard .rows dt{min-width:4.2rem;font-size:.56rem;letter-spacing:.16em}
.tcard .rows dd{text-align:right;font-size:.74rem;line-height:1.45}
.tcard .rows .row:first-child{border-top:0;padding-top:0}
.tcard .rows .row:last-child{border-bottom:0}

/* ══ 5. service record ═════════════════════════════════ */
.srec{list-style:none;margin-bottom:1.6rem}
.srec li{
  display:block;padding:.9rem 0;border-top:1px solid var(--line-soft);
}
.srec li:last-child{border-bottom:1px solid var(--line-soft)}
.sr-d{
  display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:.2rem;
}
.srec b{display:block;font-weight:400;font-size:.92rem;color:var(--cream)}
.srec span{font-size:.76rem;color:var(--mist)}

/* the build record, inside its panel */
.steps-list{list-style:none;counter-reset:none}
.steps-list li{display:flex;gap:.9rem;padding:.75rem 0;border-top:1px solid var(--line-soft)}
.steps-list li:first-child{border-top:0;padding-top:0}
.st-n{
  flex:0 0 auto;font-family:var(--ff-display);font-size:1.1rem;
  color:var(--ochre);min-width:1.6rem;line-height:1.3;
}
.steps-list b{font-weight:400;font-size:.88rem;color:var(--cream)}
.st-y{font-size:.62rem;letter-spacing:.14em;color:var(--mist);margin-left:.6rem}
.steps-list p{font-size:.8rem;line-height:1.65;color:var(--mist);margin-top:.25rem}

/* ══ 6. the owner gate ═════════════════════════════════ */
.gate{
  border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(165deg,rgba(46,33,19,.55),rgba(30,24,17,.25));
  padding:1.3rem 1.1rem;margin:1.6rem 0;
}
.gate-lock{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre);
  margin-bottom:.9rem;
}
.gate-lock svg{width:15px;height:15px;fill:none;stroke:var(--ochre);stroke-width:1.5}
.gate p{font-size:.84rem;color:var(--mist);margin-bottom:.7rem}
.gate ul{list-style:none;margin-bottom:1.1rem}
.gate li{
  font-size:.82rem;color:var(--parchment);padding:.35rem 0 .35rem 1.1rem;position:relative;
}
.gate li::before{content:'';position:absolute;left:0;top:.95em;width:5px;height:1px;background:var(--ochre)}
.gate-note{font-size:.76rem;margin-top:.9rem;margin-bottom:0}
.btn-sm{padding:.7rem 1.4rem;font-size:.66rem}

/* ══ documents ═════════════════════════════════════════ */
.docs{display:grid;margin:1.8rem 0;border-bottom:1px solid var(--line-soft)}
.doc{
  padding:.85rem 0;text-decoration:none;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  transition:color .2s;
}
.doc:hover b,.doc:focus-visible b{color:var(--ochre)}
.doc b{font-weight:400;font-size:.88rem;color:var(--cream);transition:color .2s}
.doc span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);white-space:nowrap}

.voluntary{
  font-size:.74rem;line-height:1.7;color:var(--mist);
  border-left:1px solid var(--line);padding-left:1rem;
}
/* inside the owner-access box it sits under the sign-in button, so it takes a
   rule above it instead of one down its side */
.gate .voluntary{
  border-left:0;padding-left:0;margin:1.1rem 0 0;
  padding-top:1rem;border-top:1px solid var(--line-soft);
}
.voluntary b{color:var(--parchment);font-weight:400}

/* ══ footer ════════════════════════════════════════════ */
.pfoot{
  border-top:1px solid var(--line-soft);
  padding:1.6rem clamp(1.25rem,6vw,2rem);
  max-width:760px;margin:0 auto;
}
.pfoot .mf-c{text-align:left}

/* ══ reveal ════════════════════════════════════════════ */
/* opt-in: body.reveal is set by the script, so a page without JS shows
   everything rather than nothing */
@media(prefers-reduced-motion:no-preference){
  body.reveal .ps-in > *{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
  body.reveal .ps.seen .ps-in > *{opacity:1;transform:none}
  body.reveal .ps.seen .ps-in > *:nth-child(2){transition-delay:.06s}
  body.reveal .ps.seen .ps-in > *:nth-child(3){transition-delay:.12s}
  body.reveal .ps.seen .ps-in > *:nth-child(n+4){transition-delay:.18s}
}

/* ══ print: the certificate that goes in the case ══════ */
@media print{
  body.pp{background:#fff;color:#111}
  .ps-bg,.ph-cue,.phero::after,.gate,.docs,.skip{display:none !important}
  .phero{min-height:0;padding:0 0 1.5rem}
  .ph-title,.ps h2{color:#111}
  .ps{padding-block:1rem;page-break-inside:avoid}
  .ps-in,.pfoot{max-width:none;padding-inline:0}
  .ps-in > *{opacity:1 !important;transform:none !important}
  .rows dd,.pstat b,.srec b,.doc b{color:#111}
  .rows dt,.ps-eyebrow,.tc-role{color:#7a5320}
  .rows .r-n,.note-p,.ps-lede-top{margin-top:.2rem}
.ps-lede{color:#444}
  .drop-in{display:block !important}
  .drop summary{padding:.4rem 0}
  .d-x{display:none}
  a{text-decoration:none;color:#111}
}

/* the unit sits with the label, so the figure never wraps off it */
.tcard .rows dt i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}

/* Until the hero photograph is shot, the hero does not hold a screen open
   for an image that is not there. */
.phero:has(.ps-bg.missing){min-height:auto;padding-top:clamp(2rem,6vh,3rem)}
.phero .ps-bg.missing{z-index:2}
.phero .ps-bg.missing::after{top:auto;bottom:1rem}

/* the serial chip when the page was reached by scanning that serial */
.chip.chip-hit{border-color:var(--ochre);box-shadow:0 0 0 1px var(--ochre) inset}
.chip.chip-hit b{color:var(--ochre)}

/* the timber card now mirrors the Timbers page box: heading, shot, blurb, rows */
.tcard .tc-role{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:.35rem}
.tcard h3{margin-bottom:.1rem}
.tcard .tc-sci{margin-bottom:.8rem}
.tcard .tc-shot{margin-bottom:.85rem}
.tc-blurb{font-size:.8rem;line-height:1.75;color:var(--parchment);margin-bottom:.9rem}

/* build photographs inside a step of the build record */
.st-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,15rem);gap:.6rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin-top:.85rem;padding-bottom:.3rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.st-strip::-webkit-scrollbar{display:none}
.st-shot{scroll-snap-align:start;border:1px solid var(--line-soft)}

/* the first section after the hero starts closer to it */
#instrument{padding-top:clamp(1.6rem,4vw,2.4rem)}

/* ══════════════════════════════════════════════════════════════════════
   DPP restructure: ten groups, two card strips
   ══════════════════════════════════════════════════════════════════════ */

/* Section headings. Bigger and lighter than they were: on a phone, held at
   arm's length in a workshop, .68rem of parchment was too quiet to scan. */
.d-t{font-size:.82rem;letter-spacing:.17em;color:var(--cream)}
.drop summary{padding:1.05rem 0}
.d-meta{font-size:.68rem}

/* The Timbers lede sits under a heading now, not over a section, so it does
   not need to carry the weight of a section opener. */
.ps-lede-sm{
  font-size:clamp(.86rem,3.2vw,.96rem);line-height:1.7;
  color:var(--parchment);max-width:52ch;margin-bottom:1.1rem;
}

/* Cards had no padding of their own, so the text ran into the border. */
.tcard > .tc-role,
.tcard > h3,
.tcard > .tc-sci,
.tcard > .sc-body,
.tcard > .rows{margin-left:.85rem;margin-right:.85rem}
.tcard > .tc-role{margin-top:.85rem}
.tcard > .rows,
.tcard > .sc-body{margin-bottom:.85rem}

/* Photographs 20% shorter: 3/2 becomes 15/8, which is the same width and
   four fifths of the height. */
.tcard .tc-shot{aspect-ratio:15/8;margin-bottom:.8rem}

/* Detail rows one step down. */
.tcard .rows dt{font-size:.52rem;letter-spacing:.14em}
.tcard .rows dd{font-size:.68rem;line-height:1.5}
.tcard .rows .row{padding:.3rem 0}

/* ── build record cards ────────────────────────────────
   Same frame as a timber card, so the two strips read as one family. The
   year rides along with the step number rather than taking its own line. */
.scard .tc-role i{
  font-style:normal;color:var(--mist);letter-spacing:.14em;
}
.scard h3{
  font-size:1rem;line-height:1.3;margin-bottom:.55rem;
  min-height:2.6em;      /* titles run to two lines; keep the photos aligned */
}
.sc-body{
  font-size:.76rem;line-height:1.65;color:var(--mist);margin-top:0;
}

/* ── the merged paragraph under a group's rows ─────────
   Care, Logistics, Resale and End of life each put their rows first and then
   one paragraph, instead of a note hanging off every row. */
.block-note{
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-soft);
  font-size:.82rem;line-height:1.75;color:var(--mist);
}
.block-note a{color:var(--ochre)}

/* Print: strips become plain stacks, and the nav has nothing to do. */
@media print{
  .tgrid{display:block;overflow:visible;margin:0;padding:0}
  .tcard{break-inside:avoid;margin-bottom:.6rem}
  .tbar{display:none}
  .d-t{color:#000}
}

/* The last row already draws a rule; the block-note draws its own. Two rules
   a few pixels apart reads as a mistake, so the row gives way. */
.drop-in .rows:has(+ .block-note) .row:last-child{border-bottom:0}

/* ── ownership line, filled in from OriginsNext ────────
   The default in the HTML is "unclaimed"; these classes only appear once a
   lookup has answered, so nothing shifts for a reader without JavaScript. */
.ph-own .own-on{color:var(--cream)}
.ph-own .own-off{color:var(--mist);font-style:italic}
.ph-own .own-alert{color:var(--ochre-light)}
.ph-own-sub{
  margin-top:-.15rem;font-size:.66rem;letter-spacing:.1em;color:var(--mist);
  text-transform:none;
}

/* ── hero facts: serial, ownership, registration, country ──
   A label/value list rather than sentences, because every one of these is
   a registry value that may be absent. "n/a" under a label reads as an
   honest gap; "Ownership n/a" in a sentence reads as a broken page. */
.ph-facts{margin:.9rem 0 .5rem;display:grid;gap:.18rem}
.ph-fact{display:flex;align-items:baseline;gap:.6rem}
.ph-facts dt{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);min-width:7.5rem;flex:0 0 auto;
}
.ph-facts dd{font-size:.86rem;color:var(--parchment);margin:0}
.ph-facts dd.own-on{color:var(--cream)}
.ph-facts dd.own-off{color:var(--mist);font-style:italic}
.ph-facts dd.own-alert{color:var(--ochre-light)}
@media(max-width:380px){
  .ph-fact{flex-direction:column;gap:0}
  .ph-facts dt{min-width:0}
}

/* The tap line is a caveat, not a headline. */
.verify .vt{font-size:.6rem;letter-spacing:.14em}

/* ── hero facts, second pass ───────────────────────────
   Serial, instrument, ownership, registration, country, verification and
   the registry link are now one list with one left edge. Previously the
   serial sat in a bordered chip whose padding pushed its text a few pixels
   right of every label below it, which read as a misalignment because it
   was one. */
.ph-facts{margin:.85rem 0 .7rem;gap:.22rem}
.ph-facts dd#serial b{font-weight:400;color:var(--cream);letter-spacing:.04em}

/* The verification line is a caveat, so it keeps the quieter treatment
   even though it now sits in the same list as everything else. */
.ph-facts .f-verify{color:var(--mist);font-size:.78rem}

/* "Recorded on OriginsNext" is provenance, not a headline. */
.ph-fact-sm dt{font-size:.54rem}
.ph-fact-sm dd{font-size:.7rem}
.ph-fact-sm dd a{color:var(--ochre)}

/* The remaining chip is the one link out. It no longer needs the space a
   two-chip row wanted. */
.ph-chips{margin-top:.55rem}

/* Arriving by serial still marks the value, now without a box to tint. */
dd#serial.chip-hit b{color:var(--ochre)}
dd#serial.chip-hit{box-shadow:none;border:0}

/* ── hero facts, third pass: match the rest of the page ──
   The collapsible sections already have a label/value style:
   .rows dt is .62rem ochre, .rows dd is .92rem cream. The hero was using
   its own sizes and a grey label, so the same kind of information looked
   like two different kinds. These rules bring it into line. */
.ph-facts dt{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ochre);min-width:8.2rem;
}
.ph-facts dd{font-size:.92rem;line-height:1.5;color:var(--cream)}

/* The serial is the identifier, so it carries the accent the way the
   instrument number does in the masthead. */
.ph-facts dd#serial b{font-weight:400;color:var(--ochre);letter-spacing:.04em}

/* "Endemic #04": the number takes the same ochre it has on the instrument
   page, so the name reads identically wherever it appears. */
.ph-facts dd#f-instrument b{font-weight:400;color:var(--ochre)}

/* Same size as every other value; colour carries the meaning instead. */
.ph-facts .f-verify{font-size:.92rem;color:var(--mist)}
.ph-facts .f-verify.v-sun{color:var(--ochre-light)}

.ph-fact-sm dt{font-size:.56rem}
.ph-fact-sm dd{font-size:.78rem}

/* Mobile: label and value stay on one row. The earlier rule stacked them
   below 380px, which put a lot of air between a label and its value and
   made the block twice as tall on the screen it is actually read on. The
   label column just gets narrower and long values wrap within their own
   column. */
@media(max-width:420px){
  .ph-fact{flex-direction:row;gap:.5rem}
  .ph-facts dt{min-width:6.6rem;font-size:.56rem;letter-spacing:.14em}
  .ph-facts dd{font-size:.86rem}
  .ph-facts .f-verify{font-size:.86rem}
}
@media(max-width:340px){
  .ph-facts dt{min-width:5.6rem;font-size:.52rem;letter-spacing:.1em}
  .ph-facts dd{font-size:.8rem}
}

/* ── hero, fourth pass: one order, one style ────────────
   The hero now reads top to bottom as kicker, title, byline, then one
   list of registry facts. Two things changed with it. The title is the
   instrument's name as OriginsNext states it, so it takes the ochre the
   rest of the identity carries. And the facts list lost its exceptions:
   the instrument row (the title says it now), the smaller "Recorded on"
   row, and the smaller verification line. Every row is the same row. */
.ph-title{color:#fff;margin-bottom:.35rem}
.ph-title b{font-weight:inherit;color:var(--ochre)}
.ph-sub{margin-bottom:1.15rem}

/* Nothing follows the hero but the first section, so the chip row does not
   need a margin of its own on top of the hero's own bottom padding. */
.ph-chips{margin-bottom:0}
.phero{padding-bottom:clamp(1.3rem,3.5vh,2rem)}

.ph-fact-sm dt{font-size:.62rem}
.ph-fact-sm dd{font-size:.92rem}
.ph-facts .f-verify{font-size:.92rem}
@media(max-width:420px){
  .ph-fact-sm dt{font-size:.56rem}
  .ph-fact-sm dd,.ph-facts .f-verify{font-size:.86rem}
}
@media(max-width:340px){
  .ph-fact-sm dt{font-size:.52rem}
  .ph-fact-sm dd,.ph-facts .f-verify{font-size:.8rem}
}

/* Print: the title goes back to ink, since ochre on white is thin. */
@media print{
  .ph-title,.ph-title b{color:#111}
}

/* The scroll cue has to fit in the space the hero no longer has. It keeps
   its job (there is more below) at a size that clears the chip row. */
.ph-cue{bottom:.3rem;height:clamp(12px,2.2vh,18px)}

/* ── the way out, moved to the end ─────────────────────
   The link to the instrument used to sit under the hero facts, where it
   invited you to leave before you had read anything. It now sits after
   End of life, which is where the passport actually finishes. */
.ps-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}

/* With the chip gone from the hero, the facts run straight into the first
   section, so the hero keeps only the breathing room it needs. */
.ph-facts{margin-bottom:.3rem}
.phero{padding-bottom:clamp(.9rem,2.4vh,1.4rem)}
.ph-cue{display:none}