/*
 * One-pager (index) styles. Productionized from Artlord comp iota + the
 * four finishing tweaks (dbcom-homepage-comp-final.html), the visual source
 * of truth. Self-contained: the index loads fonts.css + this only (not
 * base.css/tokens.css), and carries no top nav per the comp. The preview
 * @import is dropped; fonts are the self-hosted faces in fonts.css.
 *
 * AUDIBLE 1 (Proprietor, 2026-06-17): contact-card portrait enlarged from
 * the comp s 104x128 to 168x208 (ratio preserved) to fill more of the card.
 */
:root{
  /* color, parent-verbatim */
  --paper:#FAF6EE; --ink:#1C1A17; --muted:#6E6457; --red:#C0111A;
  --hair:#D9CDB8; --pantry-bg:#F1E9D6; --pantry-border:#C9BB9E;
  --ink-soft:#3A362F;

  /* families, parent-verbatim */
  --serif:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans:'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* ramp (β), plus two homepage extensions (logged A11, A12) */
  --fs-hero:clamp(2.75rem, 2.1rem + 2.9vw, 4.25rem);   /* text-only hero name */
  --proof-fig:clamp(2.1rem, 1.7rem + 1.7vw, 3rem);  /* proof-band figures */
  --fs-title:clamp(1.4375rem, 1.32rem + 0.5vw, 1.75rem);
  --fs-body-lg:clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --fs-body:clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --fs-ui:0.9375rem; --fs-small:0.8125rem; --fs-micro:0.6875rem;
  --lh-display:1.05; --lh-title:1.2; --lh-body:1.68;
  --lh-ui:1.55; --lh-small:1.55; --lh-micro:1.4;
  --ls-display:-0.015em; --ls-micro:0.14em; --ls-plabel:0.16em;
  --ls-slight:0.04em;

  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;

  --rule-heavy:2px; --rule-mid:1.5px; --rule-hair:1px;

  --measure:42rem;
  --shell:71.25rem;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  font-family:var(--sans);
  font-size:var(--fs-ui);
  line-height:var(--lh-ui);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.skip{
  position:absolute;left:-200vw;top:var(--sp-2);
  background:var(--ink);color:var(--paper);
  padding:var(--sp-2) var(--sp-4);text-decoration:none;z-index:10;
}
.skip:focus{left:var(--sp-2);}

.shell{
  max-width:calc(var(--shell) + 2 * clamp(1.25rem, 5vw, 3rem));
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
}

/* ---------- top nav (restored on the one-pager, Proprietor 2026-06-17) ----
   The hero is the brand, so the header carries the nav links only; the
   sitewide brand mark is suppressed here. Values mirror base.css. */
.site-head{padding-block:var(--sp-5) var(--sp-4);}
.site-head .bar{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:var(--sp-6);row-gap:var(--sp-3);}
.site-head .brand{display:none;}
.site-nav{margin-left:auto;}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-5);}
.site-nav a{color:var(--ink);text-decoration:none;font-size:var(--fs-ui);}
.site-nav a:hover{text-decoration:underline;text-underline-offset:0.2em;}

/* ---------- hero: sigil + name, then headline ---------- */
.hero{padding-block:var(--sp-7) 0;max-width:var(--shell);}
.hero-head{display:flex;align-items:center;gap:var(--sp-5);}
.hero-titles{min-width:0;}
.hero-sigil{width:128px;height:128px;flex:0 0 auto;mix-blend-mode:multiply;
  margin-inline-start:calc(-1 * clamp(1.25rem, 5vw, 3rem));}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:var(--fs-hero);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:var(--ink);
}
.hero .headline{
  font-family:var(--serif);font-size:var(--fs-body-lg);
  line-height:1.5;color:var(--muted);
  margin-block-start:var(--sp-4);max-width:38rem;
}
.hero .headline .dot{color:var(--hair);padding-inline:0.4em;}
.hero-rule{border:0;height:var(--rule-heavy);background:var(--ink);
  margin-block:var(--sp-6) 0;}

/* ---------- proof band ---------- */
.proof{
  padding-block:var(--sp-7) var(--sp-4);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-6) var(--sp-5);
}
.proof-cell{display:flex;flex-direction:column;gap:var(--sp-2);}
.proof-fig{
  font-family:var(--serif);font-weight:700;
  font-size:var(--proof-fig);line-height:0.85;color:var(--red);
  font-feature-settings:"lnum" 1;
  display:flex;align-items:flex-end;white-space:nowrap;
  min-height:calc(var(--proof-fig) * 0.85);
}
.proof-fig.ink{color:var(--ink);}
.proof-fig .delta{font-size:0.5em;color:var(--muted);
  align-self:center;margin:0 0.1em;font-weight:400;}
.proof-label{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--muted);line-height:var(--lh-micro);
}

/* ---------- section-head device (the h2) ---------- */
.section-head{display:flex;align-items:center;gap:var(--sp-3);
  margin-block-end:var(--sp-6);}
.section-head .sq{width:10px;height:10px;background:var(--red);flex:0 0 auto;}
.section-head h2{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--ink);white-space:nowrap;line-height:var(--lh-micro);
}
.section-head .line{flex:1 1 auto;height:var(--rule-mid);background:var(--ink);}

.block{padding-block-start:var(--sp-8);}
/* About follows the proof band directly; match its lead-in to the gap that
   feeds the band (proof bottom sp-4 + this = ~the proof top sp-7). */
.block.about{padding-block-start:var(--sp-6);}

/* ---------- about ---------- */
.about p{
  font-family:var(--serif);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink);
  max-width:var(--measure);
}
.about p + p{margin-block-start:var(--sp-5);}
.about p.lede{font-size:var(--fs-body-lg);line-height:1.62;}

/* ---------- work grid ---------- */
.grid-tiles{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);
}
.tile{display:flex;flex-direction:column;gap:var(--sp-3);
  text-decoration:none;color:var(--ink);}
.tile-frame{
  position:relative;aspect-ratio:16 / 10;
  background:var(--pantry-bg);border:var(--rule-hair) solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tile-frame .ph{
  font-family:var(--serif);font-weight:700;font-size:4rem;
  color:var(--hair);user-select:none;
}
.thumb{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-contain{object-fit:contain;background:var(--pantry-bg);}
.tile-frame svg{width:100%;height:100%;display:block;}
.tile-label{font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);
  color:var(--ink);}
.tile-ext{font-size:var(--fs-small);color:var(--muted);font-weight:400;
  margin-inline-start:0.4em;}
.tile:hover .tile-frame{border-color:var(--ink);}
.tile:hover .tile-label{text-decoration:underline;text-underline-offset:0.2em;}

/* the resume anchor: a wide feature, weighted by composition not color */
.feature{
  margin-block-start:var(--sp-5);
  display:grid;grid-template-columns:1fr;gap:0;
  border:var(--rule-mid) solid var(--ink);
  text-decoration:none;color:var(--ink);
}
.feature-frame{
  position:relative;aspect-ratio:16 / 9;
  background:var(--pantry-bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-block-end:var(--rule-hair) solid var(--hair);
}
.feature-frame .ph{font-family:var(--serif);font-weight:700;font-size:5rem;
  color:var(--hair);user-select:none;}
.feature-panel{
  padding:var(--sp-5);display:flex;flex-direction:column;
  justify-content:center;gap:var(--sp-2);
}
.feature-eyebrow{font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--muted);}
.feature-title{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);}
.feature-title .ft{font-family:var(--serif);font-weight:700;
  font-size:var(--fs-title);line-height:1.1;color:var(--ink);}
.feature-title .arrow{font-family:var(--sans);font-size:1.5rem;color:var(--ink);
  line-height:1;}
.feature-desc{font-family:var(--sans);font-size:var(--fs-small);color:var(--muted);}
.feature:hover{background:var(--pantry-bg);}
.feature:hover .feature-title .ft{text-decoration:underline;
  text-underline-offset:0.18em;}

/* ---------- contact card ---------- */
.card{
  margin-block-start:0;
  border:var(--rule-hair) solid var(--ink);
  padding:var(--sp-7);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-5);text-align:center;
}
.portrait{
  flex:0 0 auto;width:168px;height:208px;
  background:var(--pantry-bg);border:var(--rule-hair) solid var(--hair);
  display:flex;align-items:center;justify-content:center;
}
.portrait .mono{font-family:var(--serif);font-weight:700;font-size:1.75rem;
  color:var(--muted);letter-spacing:0.02em;user-select:none;}
.portrait img{width:100%;height:100%;object-fit:cover;
  object-position:center 28%;display:block;}
.card-body{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);}
.ama{
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:var(--fs-ui);color:var(--ink);text-decoration:none;
  background:var(--paper);border:var(--rule-mid) solid var(--ink);
  padding:var(--sp-3) var(--sp-6);
}
.ama .rm{color:var(--red);}     /* the single maker's mark; the only red on the card */
.ama:hover{background:var(--pantry-bg);}
.idlinks{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:var(--sp-2) var(--sp-3);
  font-family:var(--sans);font-size:var(--fs-small);}
.idlinks a{color:var(--ink);text-decoration:none;}
.idlinks a:hover{text-decoration:underline;text-underline-offset:0.2em;}
.idlinks .sep{color:var(--hair);}

/* ---------- footer: the reference layer ---------- */
.site-foot{padding-block:var(--sp-8) var(--sp-7);}
.pantry{
  background:var(--pantry-bg);border:var(--rule-hair) dashed var(--pantry-border);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);
}
.pantry .plabel{font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-plabel);text-transform:uppercase;color:var(--red);
  line-height:var(--lh-micro);}
.pantry .pkeys{font-family:var(--sans);font-size:var(--fs-small);
  line-height:1.9;color:var(--muted);}
.pantry .patents{font-family:var(--serif);font-style:italic;
  font-size:var(--fs-small);color:var(--muted);margin-block-start:var(--sp-1);}
.footline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3) var(--sp-5);
  margin-block-start:var(--sp-5);font-family:var(--sans);font-size:var(--fs-small);
  color:var(--muted);}
.footline .fname{font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-slight);text-transform:uppercase;}
.footline .fspace{flex:1 1 auto;}
.footline a{color:var(--muted);text-decoration:none;}
.footline a:hover{color:var(--ink);text-decoration:underline;}

/* ============================================================
   1024+ : the wider register engages
   ============================================================ */
@media (min-width:64rem){
  .proof{grid-template-columns:repeat(4,1fr);gap:0;}
  .proof-cell{padding-inline:var(--sp-5);}
  .proof-cell + .proof-cell{border-inline-start:var(--rule-hair) solid var(--hair);}
  .proof-cell:first-child{padding-inline-start:0;}

  .grid-tiles{grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}

  .feature{grid-template-columns:1.45fr 1fr;}
  .feature-frame{aspect-ratio:auto;border-block-end:0;
    border-inline-end:var(--rule-hair) solid var(--hair);}

  .card{flex-direction:row;text-align:left;justify-content:flex-start;
    gap:var(--sp-7);max-width:34rem;}
  .card-body{align-items:flex-start;gap:var(--sp-5);}
  .idlinks{justify-content:flex-start;}
}

.hero-sigil{width:96px;height:96px;}
@media (min-width:48rem){ .hero-sigil{width:128px;height:128px;} }

/* motion is declared absent; the hook lets V2 inherit it */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---------- about: text column + figure ---------- */
.about-layout{display:flex;flex-direction:column;gap:var(--sp-5);}
.about-text{min-width:0;}
.about-figure{margin:0;}
/* The artwork is tall; show it whole (contain), bounded so it never runs the
   section, with the centered caption below. No frame or fill. */
.about-figure img{width:100%;height:auto;max-height:62vh;object-fit:contain;display:block;}
.about-caption{font-family:var(--sans);font-size:var(--fs-small);color:var(--muted);
  line-height:1.4;text-align:center;padding:var(--sp-3) var(--sp-4);}
@media (min-width:64rem){
  .about-layout{flex-direction:row;align-items:flex-start;gap:var(--sp-7);}
  .about-text{flex:1 1 auto;max-width:var(--measure);}
  .about-text p{max-width:none;}
  .about-figure{flex:0 1 clamp(280px,38%,400px);min-width:0;}
}
/* center the contact card (the AMA square) on the page */
.card{margin-inline:auto;}