/*
  childhood-photos/ — own design system, deliberately distinct from the main
  site's jungle-green palette (same convention as the Cycling memoir having
  its own paper/ink theme). Archival "finding-aid" look: cool blue for
  structural/archival data, warm red reserved for anything an AI model
  touched. Adapted from the original design mock (childhood-restored.html).
*/
:root{
  --paper:#F5F6F4; --panel:#E8EAE7; --ink:#17181C; --ink-2:#5A5D66;
  --rule:#ACAFB1; --rule-soft:#D3D4D5;
  --cool:#0F62C4;            /* structural: numbering, links, archival data */
  --warm:#DD3B24;            /* reserved: anything an AI model touched */
  --warm-tint:#F3E3DF;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --measure:34rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#17181C; --panel:#232429; --ink:#F5F6F4; --ink-2:#A3A6AE;
    --rule:#2E3036; --rule-soft:#26272C;
    --cool:#4B97F1; --warm:#E98172; --warm-tint:#331D1D;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.65;
  font-synthesis-weight:none;
}
.wrap{max-width:62rem; margin:0 auto; padding:0 1.5rem}
a{color:var(--cool); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:focus-visible,summary:focus-visible{outline:2px solid var(--cool); outline-offset:3px}
h1,h2,h3{font-family:var(--sans); font-weight:600; line-height:1.15; letter-spacing:-.012em; margin:0}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cool); margin:0 0 1.25rem
}

/* ---------- back-link (matches mentions.css's role, own palette) ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  margin:2.5rem 0 0; transition:color .2s ease
}
.back-link:hover{color:var(--cool)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule); padding:2.5rem 0 2.25rem}
.masthead h1{font-size:clamp(2rem,5.4vw,3.4rem)}
.standfirst{
  font-size:1.2rem; color:var(--ink-2); margin:1.5rem 0 0;
  text-wrap:pretty
}

/* ---------- finding-aid record ---------- */
.record{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.25rem 2rem; margin:2.75rem 0 0; padding:0
}
.record div{border-top:1px solid var(--rule-soft); padding-top:.6rem}
.record dt{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .3rem
}
.record dd{margin:0; font-family:var(--sans); font-size:.94rem; line-height:1.45}

/* ---------- essay ----------
   No max-width here - the section shares .wrap's full 62rem container like
   every other section on the page, instead of collapsing into its own
   independently-centered, narrower column. */
.essay{padding:3.5rem 0 1rem}
.essay h2{font-size:1.35rem; margin:0 0 1rem}
.essay p{margin:0 0 1.1rem; text-wrap:pretty}
.essay p:last-child{margin-bottom:0}
/* polaroid-style snapshot: fixed white card regardless of light/dark theme,
   since it represents physical photo paper, not themed UI chrome */
.essay figure{
  width:15rem; max-width:80%; margin:2.25rem auto;
  background:#faf9f6; padding:.75rem .75rem 1.35rem;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.15);
  border-radius:1px
}
.essay figure img{
  display:block; width:100%; height:auto; margin:0;
  border:1px solid rgba(0,0,0,.1)
}
.essay figure figcaption{
  text-align:center; font-family:var(--sans); font-style:italic; font-size:.85rem;
  color:#3a3a3a; margin-top:.85rem
}
.note{
  margin-top:2.5rem; padding:1.15rem 1.25rem; background:var(--panel);
  border-left:3px solid var(--warm); font-family:var(--sans);
  font-size:.92rem; line-height:1.55; color:var(--ink-2)
}
.note b{color:var(--ink); font-weight:600}
.swatch{
  display:inline-block; width:.62em; height:.62em; background:var(--warm);
  border-radius:50%; vertical-align:baseline; margin-right:.15em
}

/* ---------- the message that started it ---------- */
.letter{
  margin:2rem 0 2.5rem; padding:1.35rem 1.5rem; background:var(--panel);
  border:1px solid var(--rule); border-radius:2px
}
.letter__meta{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .95rem; line-height:1.9;
  padding-bottom:.75rem; border-bottom:1px solid var(--rule-soft)
}
.letter__body{margin:0; font-size:1.06rem; line-height:1.7; text-wrap:pretty}
.letter__sign{
  display:block; margin-top:.9rem; font-family:var(--sans);
  font-size:.9rem; letter-spacing:.01em; color:var(--ink-2)
}
/* nested inside the note: sized down from the essay-level polaroid, and its
   own margin matches the note's padding (1.5rem) instead of the larger
   essay-level spacing, so it reads as flush with the text around it */
.letter figure{width:11rem; max-width:60%; margin:1.5rem 0 0 auto}

/* ---------- method ---------- */
.method{margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--rule-soft)}
.method p{margin:0 0 1rem}
.method p:last-of-type{margin-bottom:0}
.steplabel{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cool); margin:1.6rem 0 .55rem
}
.prompt{
  margin:0; padding:1.05rem 1.15rem; background:var(--panel);
  border:1px solid var(--rule); border-radius:2px;
  font-family:var(--mono); font-size:.79rem; line-height:1.7; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:break-word; tab-size:2
}
/* a boxed .prompt reads as visually closer than plain text at the same
   margin, so give the label after it extra room to match the others */
.prompt + .steplabel{margin-top:2.4rem}
.prompt code{font:inherit; color:inherit}

/* ---------- zoom affordance ---------- */
.zoom{position:relative; display:block; text-decoration:none; line-height:0}
.zoom::after{
  content:"Full size"; position:absolute; right:.5rem; bottom:.5rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase;
  padding:.34em .6em; background:var(--paper); color:var(--ink-2);
  border:1px solid var(--rule); border-radius:2px; line-height:1;
  opacity:0; transition:opacity .18s ease; pointer-events:none
}
.zoom:hover::after,.zoom:focus-visible::after{opacity:1}
.zoom--thumb::after{font-size:.55em; right:.3rem; bottom:.3rem}
@media (hover:none){.zoom::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.zoom::after{transition:none}}
.plate--flip .plate__aside .zoom--thumb{margin-left:auto}

/* ---------- render cost ---------- */
.plate{content-visibility:auto; contain-intrinsic-size:auto 760px}

/* ---------- plates ---------- */
.plates{padding:2.5rem 0 0}
.plate{margin:0; padding:0 0 2.75rem}
.plate__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.25rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:1.5rem
}
.plate__no{color:var(--cool); font-weight:500; font-size:.95rem; letter-spacing:.06em}
.plate__body{display:grid; grid-template-columns:1.7fr 1fr; gap:0 2rem; align-items:start}
.plate--portrait .plate__body{grid-template-columns:1.05fr 1fr}
.plate--square .plate__body{grid-template-columns:1.35fr 1fr}
.plate__aside{border-left:1px solid var(--rule-soft); padding-left:2rem}
.plate--flip .plate__primary{order:2}
.plate--flip .plate__aside{
  order:1; border-left:0; border-right:1px solid var(--rule-soft);
  padding-left:0; padding-right:2rem; text-align:right
}

img{display:block; max-width:100%; height:auto; background:var(--rule-soft)}
.shot{border-radius:2px}
.zoom--thumb{width:62%}
.thumb{width:100%; border-radius:1px; opacity:.92}
.plate--portrait .zoom--thumb{width:46%}
.plate--square .zoom--thumb{width:54%}

/* ---------- per-asset data line ---------- */
.assetline{
  font-family:var(--mono); font-size:.7rem; line-height:1.5; letter-spacing:.04em;
  color:var(--ink-2); margin:.55rem 0 0
}
.assetline .src{display:block}
.tag{
  display:inline-block; font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; padding:.16em .5em;
  border-radius:2px; margin-right:.5em
}
.tag--orig{background:transparent; color:var(--ink-2); border:1px solid var(--rule)}
.tag--ai{background:var(--warm-tint); color:var(--warm); border:1px solid var(--warm)}

/* ---------- caption ---------- */
figcaption{margin-top:1.75rem}
figcaption h1{font-size:1.12rem; font-weight:600; margin:0 0 .5rem}
figcaption p{margin:0 0 .75rem; font-size:.98rem; line-height:1.6; text-wrap:pretty}
.credit{
  font-family:var(--mono); font-size:.7rem; line-height:1.6; letter-spacing:.04em;
  color:var(--ink-2); margin:0
}

/* ---------- edge navigation (fixed to viewport, wide screens only) ---------- */
/* Only shown once there's reliably enough margin outside the 62rem .wrap
   column (plus button width) for it not to overlap page content. */
@media (min-width:75rem){
  .edge-nav a{
    position:fixed; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:2.75rem; height:2.75rem; border-radius:50%;
    background:var(--paper); border:1px solid var(--rule); color:var(--ink-2);
    font-size:1.2rem; line-height:1; text-decoration:none; z-index:10;
    transition:color .2s ease, border-color .2s ease;
  }
  .edge-nav a:hover,.edge-nav a:focus-visible{color:var(--cool); border-color:var(--cool)}
  .edge-nav__prev{left:1.25rem}
  .edge-nav__next{right:1.25rem}
}
@media (max-width:74.99rem){.edge-nav{display:none}}
@media (prefers-reduced-motion:reduce){.edge-nav a{transition:none}}

/* ---------- prev / next ---------- */
.prevnext{
  display:flex; justify-content:space-between; gap:1.5rem;
  margin-top:1rem; padding-top:2rem; border-top:1px solid var(--rule)
}
.prevnext a{
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none; max-width:46%
}
.prevnext .dir{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2)
}
.prevnext .ttl{font-family:var(--sans); font-size:.94rem; color:var(--ink); line-height:1.35}
.prevnext a:hover .ttl{color:var(--cool)}
.prevnext .next{margin-left:auto; text-align:right; align-items:flex-end}

/* ---------- collection index rows ---------- */
.photo-index-list{
  display:flex; flex-direction:column; margin:2.5rem 0 0;
  border-top:1px solid var(--rule)
}
.index-row{
  display:block; padding:1.75rem 0; border-bottom:1px solid var(--rule-soft);
  text-decoration:none; color:inherit
}
.index-row .idx-title{
  margin:0 0 .85rem; font-family:var(--sans); font-weight:600; font-size:1.15rem; line-height:1.35; color:var(--ink);
  transition:color .2s ease
}
.index-row:hover .idx-title{color:var(--cool)}
/* .idx-body wraps the float + text together so the float clears at the row's end */
.index-row .idx-body{display:block; overflow:hidden}
.index-row .idx-thumb{
  display:block; float:left; width:40%; height:auto;
  margin:0 1.5rem .5rem 0;
  border:1px solid var(--rule); border-radius:2px
}
.index-row--flip .idx-thumb{float:right; margin:0 0 .5rem 1.5rem}
.index-row .idx-caption{
  display:block; font-family:var(--serif); font-size:.95rem; line-height:1.6; color:var(--ink-2)
}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--rule); margin-top:3rem; padding:2.5rem 0 5rem}
footer h2{font-size:1.05rem; margin-bottom:.75rem}
footer p{font-size:.98rem; color:var(--ink-2); margin:0 0 1rem}
.colophon{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink-2)}

/* ---------- reveal ---------- */
.plate,.index-row{opacity:1}
.js .plate,.js .index-row{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.js .plate.is-in,.js .index-row.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .plate,.js .index-row{opacity:1; transform:none; transition:none}
}

/* ---------- mobile ---------- */
@media (max-width:46rem){
  .wrap{padding:0 1.25rem}
  .masthead{padding:2rem 0 1.75rem}
  .standfirst{font-size:1.08rem}
  .record{gap:1rem 1.5rem; margin-top:2rem}
  .letter{padding:1.1rem 1.15rem; margin:1.75rem 0 2rem}
  .letter__body{font-size:1rem}
  .letter figure{margin:1.5rem auto 0}
  .prompt{font-size:.74rem; padding:.9rem 1rem}
  .essay{padding-top:2.5rem}
  .plates{padding-top:2rem}
  .plate{padding:0 0 2rem}
  .plate__head{margin-bottom:1.1rem; gap:.35rem .9rem}
  .plate__body,
  .plate--portrait .plate__body,
  .plate--square .plate__body{grid-template-columns:1fr; gap:1.4rem}
  .plate__aside,
  .plate--flip .plate__aside{
    order:2; border:0; border-top:1px solid var(--rule-soft);
    padding:1.15rem 0 0; text-align:left
  }
  .plate--flip .plate__primary{order:1}
  .plate--flip .plate__aside .zoom--thumb{margin-left:0}
  .zoom--thumb,
  .plate--portrait .zoom--thumb,
  .plate--square .zoom--thumb{width:46%; max-width:220px}
  figcaption{margin-top:1.35rem}
  .prevnext{flex-direction:column; gap:1.25rem}
  .prevnext a,.prevnext .next{max-width:100%; text-align:left; align-items:flex-start}
  .index-row{padding:1.25rem 0}
  .index-row .idx-title{font-size:1.05rem; margin-bottom:.65rem}
  .index-row .idx-thumb{margin:0 1rem .5rem 0}
  .index-row--flip .idx-thumb{margin:0 0 .5rem 1rem}
  .index-row .idx-caption{font-size:.85rem}
  footer{padding-bottom:3.5rem}
}
@media (max-width:24rem){
  .plate__head{font-size:.68rem}
  .prompt{font-size:.7rem}
}