/* ==========================================================================
   RearSounds — site.css
   Dark-first. Listening happens in dim rooms; the site is built for the same
   light. A designed light theme follows for viewers who force one.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* grounds */
  --ink:        #14110D;
  --ink-2:      #1C1813;
  --ink-3:      #241F18;
  --ink-card:   #1A1610;

  /* type */
  --paper:      #F0EBE1;
  --paper-dim:  #B4AA99;
  --paper-mute: #8A8072;

  /* brand */
  --amber:      #D9922F;
  --on-amber:   #14110D;   /* text that sits ON the amber fill */
  --amber-soft: #E8B269;
  --amber-deep: #8A5E1E;
  --walnut:     #8A6A4F;

  --rule:       #332C22;
  --rule-soft:  #262019;

  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.34);

  /* type stacks */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", "Consolas", "SF Mono", monospace;

  /* scale */
  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1.02rem, .99rem + .16vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.15rem + .35vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + .8vw, 2.05rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.7vw, 4.3rem);

  --container: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.6rem);
  --radius: 3px;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:        #F2EEE6;
    --ink-2:      #EAE5DA;
    --ink-3:      #E0DACD;
    --ink-card:   #F7F4EE;
    --paper:      #211E1A;
    --paper-dim:  #5C5348;
    --paper-mute: #6A6154;
    --amber:      #8F5C12;
    --on-amber:   #FDFBF7;
    --amber-soft: #7E5210;
    --amber-deep: #C98A2B;
    --walnut:     #5A4433;
    --rule:       #D3CBBB;
    --rule-soft:  #E2DCCF;
    --shadow:     0 1px 2px rgba(60,48,30,.09), 0 12px 30px rgba(60,48,30,.10);
  }
}
:root[data-theme="light"]{
  --ink:        #F2EEE6;
  --ink-2:      #EAE5DA;
  --ink-3:      #E0DACD;
  --ink-card:   #F7F4EE;
  --paper:      #211E1A;
  --paper-dim:  #5C5348;
  --paper-mute: #6A6154;
  --amber:      #8F5C12;
  --on-amber:   #FDFBF7;
  --amber-soft: #7E5210;
  --amber-deep: #C98A2B;
  --walnut:     #5A4433;
  --rule:       #D3CBBB;
  --rule-soft:  #E2DCCF;
  --shadow:     0 1px 2px rgba(60,48,30,.09), 0 12px 30px rgba(60,48,30,.10);
}

/* ---------------------------------------------------------------- reset --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.68;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--paper);
}
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--amber); text-decoration:none; }
a:hover{ color:var(--amber-soft); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amber); color:var(--on-amber); padding:.7rem 1.2rem;
  font-family:var(--mono); font-size:var(--step--1);
}
.skip-link:focus{ left:.5rem; top:.5rem; }

.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.narrow{ max-width:68ch; }

/* ------------------------------------------------------------- topbar ----- */
.topbar{
  background:var(--ink-2);
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--paper-dim);
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:38px; flex-wrap:wrap;
}
.topbar-status{ display:inline-flex; align-items:center; gap:.5rem; }
.topbar .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber); flex:none;
}
.topbar-meta{ display:flex; gap:1.35rem; align-items:center; }
.topbar-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.topbar a{ color:var(--paper-dim); }
.topbar a:hover{ color:var(--amber); }
.topbar .ico{ width:13px; height:13px; opacity:.75; }
@media (max-width:720px){ .topbar-hide-sm{ display:none !important; } }

/* ------------------------------------------------------------- header ----- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:70px;
}
.logo{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--paper); flex:none;
}
.logo:hover{ color:var(--paper); }
.rosette{ width:30px; height:30px; flex:none; }
.logo-text{
  font-family:var(--display);
  font-size:1.32rem; font-weight:600;
  letter-spacing:.005em;
}
.site-header nav{ margin-left:auto; }
.nav-links{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--paper-dim);
  font-size:.94rem;
  letter-spacing:.005em;
  padding-block:.4rem;
  border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a[aria-current="page"]{
  color:var(--paper);
  border-bottom-color:var(--amber);
}
/* `.nav-links a` (0,1,1) outranks `.btn` (0,1,0), so the button's own colours
   have to be restated here or the nav CTA renders as dim text on amber. */
.nav-links a.btn{ border-bottom:0; color:var(--on-amber); }
.nav-links a.btn:hover{ color:var(--on-amber); }

.nav-toggle{
  display:none; flex-direction:column; gap:4px;
  background:none; border:0; cursor:pointer; padding:.55rem;
}
.nav-toggle span{
  display:block; width:20px; height:1.5px;
  background:var(--paper); transition:transform .22s, opacity .22s;
}
@media (max-width:900px){
  .nav-toggle{ display:flex; order:3; }
  .site-header nav{
    order:4; flex-basis:100%; margin-left:0;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .site-header nav.open{ max-height:560px; }   /* content is ~414px at 6 items; headroom for more */
  .nav-links{
    flex-direction:column; align-items:stretch;
    gap:0; padding-block:.5rem 1rem;
  }
  .nav-links li{ border-top:1px solid var(--rule-soft); }
  .nav-links a{ display:block; padding:.85rem .2rem; }
  .nav-links a.btn{ margin-top:.8rem; text-align:center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
}

/* -------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--amber); color:var(--on-amber);
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.78rem 1.35rem; border:1px solid var(--amber);
  border-radius:var(--radius); cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.btn:hover{ background:var(--amber-soft); border-color:var(--amber-soft); color:var(--on-amber); }
.btn--sm{ padding:.52rem 1rem; font-size:.74rem; }
.btn--lg{ padding:.95rem 1.75rem; font-size:.86rem; }
.btn--ghost{
  background:transparent; color:var(--paper);
  border-color:var(--rule);
}
.btn--ghost:hover{ background:transparent; color:var(--amber); border-color:var(--amber); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; }

.arrow-link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.arrow-link svg{ width:15px; height:15px; transition:transform .2s; }
.arrow-link:hover svg{ transform:translateX(4px); }

/* -------------------------------------------------------------- sections -- */
.section{ padding-block:clamp(3.4rem, 8vw, 6.5rem); }
.section--ink{ background:var(--ink-2); border-block:1px solid var(--rule-soft); }
.section--tight{ padding-block:clamp(2.4rem, 5vw, 4rem); }

.eyebrow{
  display:block;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); margin-bottom:.95rem;
}
.section-head{ margin-bottom:clamp(2rem, 4vw, 3.2rem); }
.section-head h2{ margin-bottom:.4rem; }
.section-head p{ color:var(--paper-dim); font-size:var(--step-1); }

.lede{
  font-size:var(--step-1);
  color:var(--paper-dim);
  max-width:60ch;
}

/* ----------------------------------------------------------------- hero --- */
.hero{
  position:relative;
  padding-block:clamp(4rem, 11vw, 8.5rem) clamp(3rem, 8vw, 6rem);
  border-bottom:1px solid var(--rule-soft);
  overflow:hidden;
}
.hero::after{
  /* grain: a quiet wood-figure gesture, not a texture image */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 18%, color-mix(in srgb, var(--amber) 11%, transparent), transparent 70%),
    radial-gradient(46% 40% at 8% 92%, color-mix(in srgb, var(--walnut) 16%, transparent), transparent 72%);
  opacity:.85;
}
.hero .container{ position:relative; z-index:1; }
.hero-credo{
  font-family:var(--display);
  font-size:var(--step-4);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 1.4rem;
  max-width:16ch;
}
.hero-credo em{
  font-style:normal;
  color:var(--amber);
  display:block;
}
.hero p{ max-width:54ch; color:var(--paper-dim); font-size:var(--step-1); }
.hero .btn-row{ margin-top:2.1rem; }

.hero-facts{
  display:flex; flex-wrap:wrap; gap:2.4rem;
  margin-top:clamp(2.6rem, 6vw, 4.4rem);
  padding-top:1.9rem;
  border-top:1px solid var(--rule);
}
.hero-fact{ min-width:150px; }
.hero-fact dt{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-mute); margin-bottom:.45rem;
}
.hero-fact dd{
  margin:0; font-family:var(--display); font-size:var(--step-1);
  color:var(--paper);
}

/* ----------------------------------------------------------- inner hero --- */
.inner-hero{
  padding-block:clamp(2.8rem, 7vw, 5rem) clamp(2.2rem, 5vw, 3.6rem);
  border-bottom:1px solid var(--rule-soft);
  background:var(--ink-2);
}
.inner-hero h1{ max-width:20ch; margin-bottom:.6rem; }

/* ---------------------------------------------------------------- grids --- */
.grid{ display:grid; gap:clamp(1.2rem, 2.6vw, 2rem); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(265px, 1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }

.card{
  background:var(--ink-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(1.5rem, 3vw, 2.1rem);
}
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--paper-dim); font-size:.98rem; }
.card .ico{ width:24px; height:24px; color:var(--amber); margin-bottom:1rem; }

/* doctrine: three clauses of the credo */
.doctrine{ counter-reset:d; }
.doctrine .card{ position:relative; }
.doctrine .card h3{ font-size:var(--step-1); }
.doctrine-tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-mute);
  display:block; margin-bottom:.7rem;
}

/* ------------------------------------------------------------- model card - */
.model{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(1.5rem, 4vw, 3.2rem);
  align-items:start;
  padding-block:clamp(2.4rem, 5vw, 3.6rem);
  border-top:1px solid var(--rule);
  scroll-margin-top:110px;
}
.model:first-of-type{ border-top:0; }
@media (max-width:720px){
  .model{ grid-template-columns:1fr; }
}
.model-figure{
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
/* the inner wrapper is auto-width in a flex parent, so `.elev{width:100%}`
   resolves against nothing and the drawing collapses to a thumbnail. */
.model-figure > div{ width:100%; }
.elev{ width:100%; height:auto; max-height:300px; display:block; margin-inline:auto; }
.model-figure figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-mute);
  text-align:center; margin-top:.9rem;
}
.model-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:.35rem;
}
.model-head h3{
  font-size:var(--step-2); margin:0;
}
.model-type{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber);
  display:block; margin-bottom:.9rem;
}
.model-price{
  font-family:var(--mono); font-size:.9rem;
  color:var(--paper); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.model-price small{
  display:block; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-mute); margin-top:.2rem;
}
.model p{ color:var(--paper-dim); }
.model-detail{
  margin:1.3rem 0 0; padding:0; list-style:none;
  display:grid; gap:.5rem;
}
.model-detail li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.95rem; color:var(--paper-dim);
}
.model-detail li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:.62em;
  border:1px solid var(--amber); border-radius:50%;
}

.spec-pending{
  display:flex; gap:.7rem; align-items:flex-start;
  margin-top:1.4rem; padding:.85rem 1rem;
  background:var(--ink-3); border-left:2px solid var(--amber);
  border-radius:2px;
  font-size:.88rem; color:var(--paper-dim);
}
.spec-pending .ico{ width:17px; height:17px; color:var(--amber); flex:none; margin-top:.18em; }

/* ---------------------------------------------------------------- specs --- */
.spec-table{ width:100%; overflow-x:auto; }
.spec-table table{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:.83rem;
  font-variant-numeric:tabular-nums;
}
.spec-table th,.spec-table td{
  text-align:left; padding:.72rem .9rem;
  border-bottom:1px solid var(--rule);
}
.spec-table th{
  font-weight:500; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-mute);
  border-bottom-color:var(--amber-deep);
}
.spec-table td:first-child{ color:var(--paper-dim); font-family:var(--body); font-size:.95rem; }

/* ------------------------------------------------------------- steps ------ */
.steps{ counter-reset:s; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.step{
  counter-increment:s;
  background:var(--ink-card);
  padding:clamp(1.4rem, 3vw, 2rem);
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start;
}
.step::before{
  content:counter(s, decimal-leading-zero);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  color:var(--amber); padding-top:.28em;
}
.step h3{ font-size:var(--step-1); margin-bottom:.35rem; }
.step p{ color:var(--paper-dim); margin:0; }
.step-meta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-mute); margin-top:.6rem;
}

/* ---------------------------------------------------------------- pull ---- */
.pull{
  border-left:2px solid var(--amber);
  padding:.2rem 0 .2rem 1.5rem;
  margin:2rem 0;
  font-family:var(--display);
  font-size:var(--step-2);
  line-height:1.28;
  color:var(--paper);
  max-width:34ch;
}

.prose{ max-width:68ch; }
.prose h2{ margin-top:2.6rem; }
.prose h3{ margin-top:2rem; font-size:var(--step-1); }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.2rem; color:var(--paper-dim); }
.prose li{ margin-bottom:.5rem; }
.prose li::marker{ color:var(--amber); }
.prose strong{ color:var(--paper); font-weight:500; }

/* ------------------------------------------------------------------ faq --- */
.faq details{
  border-bottom:1px solid var(--rule);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.15rem 2.2rem 1.15rem 0;
  position:relative;
  font-family:var(--display); font-size:var(--step-1);
  color:var(--paper);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.65rem;
  width:9px; height:9px;
  border-right:1.5px solid var(--amber); border-bottom:1.5px solid var(--amber);
  transform:rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.9rem; }
.faq details > div{ padding-bottom:1.3rem; }
.faq p{ color:var(--paper-dim); margin:0; max-width:66ch; }

/* ------------------------------------------------------------- cta band --- */
.cta-band{
  background:var(--ink-2);
  border-block:1px solid var(--rule);
  padding-block:clamp(2.8rem, 6vw, 4.5rem);
}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.2rem; flex-wrap:wrap;
}
.cta-band h2{ font-size:var(--step-2); margin-bottom:.35rem; }
.cta-band p{ color:var(--paper-dim); margin:0; max-width:46ch; }

/* ----------------------------------------------------------------- form --- */
.form-grid{ display:grid; gap:1.15rem; max-width:38rem; }
.field label{
  display:block; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%; background:var(--ink-2);
  border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--paper); font-family:var(--body); font-size:1rem;
  padding:.72rem .85rem;
}
.field textarea{ min-height:8.5rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);
}
.field-hint{ font-size:.85rem; color:var(--paper-mute); margin:.4rem 0 0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.contact-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-list .ico{ width:19px; height:19px; color:var(--amber); flex:none; margin-top:.25em; }
.contact-list dt{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-mute); margin-bottom:.2rem;
}
.contact-list dd{ margin:0; }

/* --------------------------------------------------------------- footer --- */
.site-footer{
  background:var(--ink-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(2.8rem, 6vw, 4.2rem) 1.8rem;
  font-size:.94rem;
}
.foot-grid{
  display:grid; gap:2.4rem;
  grid-template-columns:minmax(240px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom:2.4rem;
}
.foot-brand .logo{ margin-bottom:1rem; }
.foot-credo{
  font-family:var(--display); font-size:1.06rem;
  color:var(--paper); margin-bottom:.9rem;
}
.foot-note{ color:var(--paper-mute); font-size:.87rem; line-height:1.6; }
.foot-col h3{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-mute); margin-bottom:1rem;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot-col a{ color:var(--paper-dim); }
.foot-col a:hover{ color:var(--amber); }
.foot-base{
  display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid var(--rule-soft);
  font-size:.82rem; color:var(--paper-mute);
}
.foot-base p{ margin:0; }
.foot-base ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; }
.foot-base a{ color:var(--paper-mute); }
.foot-base a:hover{ color:var(--amber); }

/* --------------------------------------------------------------- reveal --- */
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
  .js .reveal.in{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------------------------------------------------------------- misc ---- */
.note-block{
  background:var(--ink-3); border-left:2px solid var(--amber);
  padding:1.15rem 1.35rem; border-radius:2px; margin:1.8rem 0;
}
.note-block p{ margin:0; color:var(--paper-dim); font-size:.95rem; }
.note-block strong{ color:var(--paper); font-weight:500; }

.tag-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-dim);
  border:1px solid var(--rule); border-radius:100px;
  padding:.34rem .8rem;
}
hr.rule{ border:0; border-top:1px solid var(--rule); margin:3rem 0; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ----------------------------------------------------------------- photo -- */
.photo{
  margin:2.2rem 0;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink-2);
}
.photo img{ width:100%; display:block; }
.photo figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--paper-mute);
  padding:.75rem 1rem;
  border-top:1px solid var(--rule);
}

/* `.prose`/`.narrow` set on the same element as `.container` override the
   container's max-width, and the inherited `margin-inline:auto` then centres
   that narrow block — leaving body copy indented well right of the page
   heading. Keep the container's width and constrain the children instead, so
   the text column starts on the same left edge as everything else. */
.container.prose,
.container.narrow{ max-width:var(--container); }
.container.prose > *,
.container.narrow > *{ max-width:68ch; }
.container.prose > .photo{ max-width:78ch; }