/* ============================================================
   Walt Whitman Odets — memorial site
   Shared design system  ·  "The Sheet"  ·  monochrome, matted
   ============================================================ */

:root{
  --paper:#F1F1EE;
  --paper-inset:#E7E7E2;
  --ink:#1A1712;
  --ink-soft:#423E37;
  --gray:#77746D;
  --line:#CFCEC8;
  --line-soft:#DEDDD8;
  --measure:63ch;
  --mat:clamp(1.25rem, 6vw, 7rem);
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{ 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(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.02rem, 0.7rem + 0.55vw, 1.18rem);
  line-height:1.68;
  letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint fiber-paper tone over everything */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.sheet{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 var(--mat); }
.sheet.narrow{ max-width:920px; }

a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}

/* ---- print-label (the signature type voice) ---- */
.label{
  font-family:var(--mono); font-weight:500; font-size:0.66rem;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--gray);
}

/* ---- preview banner ---- */
.previewbar{
  position:relative; z-index:2;
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  text-align:center; color:var(--gray); background:var(--paper-inset);
  padding:0.6rem 1rem; border-bottom:1px solid var(--line);
}

/* ---- site navigation ---- */
nav.site{
  position:relative; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:1.4rem 0 1.3rem; border-bottom:1px solid var(--line);
}
nav.site .home{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; font-weight:500;
}
nav.site .links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
nav.site .links a{
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gray); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
nav.site .links a:hover{ color:var(--ink); }
nav.site .links a[aria-current="page"]{ color:var(--ink); border-color:var(--ink); }

/* ---- masthead / hero ---- */
header.masthead{ padding-top:clamp(2.5rem, 8vh, 6rem); padding-bottom:clamp(3rem,9vh,6.5rem); }
.eyebrow{ margin:0 0 clamp(2rem,6vh,3.5rem); }
h1.name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.7rem, 1.2rem + 6.4vw, 6.4rem);
  line-height:0.98; letter-spacing:-0.018em; margin:0;
}
h1.name .given{ display:block; }
h1.name .middle{ display:block; font-style:italic; font-weight:300; color:var(--ink-soft); }
.lifespan{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.14em;
  color:var(--ink-soft); margin:clamp(1.4rem,4vh,2.2rem) 0 0;
}
.lede{
  max-width:var(--measure);
  font-size:clamp(1.2rem, 0.9rem + 0.9vw, 1.55rem);
  font-weight:300; line-height:1.5; color:var(--ink-soft);
  margin:clamp(2.2rem,6vh,3.4rem) 0 0;
}

/* ---- photographic plate (image or slot) ---- */
figure.plate{ margin:clamp(2.6rem,7vh,4.5rem) 0 0; }
figure.plate.inline{ margin:clamp(2.4rem,6vh,3.6rem) 0; }
.plate .frame{
  position:relative; width:100%; aspect-ratio:5/4; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%, #34332f 0%, #201f1c 42%, #100f0d 100%);
  display:grid; place-items:center;
}
.plate.tall .frame{ aspect-ratio:4/5; }
.plate .frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.02);
}
.plate .frame::after{ /* grain over placeholder plates only */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
}
.plate.photo .frame::after{ display:none; }
.plate .slotnote{
  position:relative; z-index:1; text-align:center; color:#B7B4AC;
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.24em;
  text-transform:uppercase; line-height:2.1; padding:1.4rem;
}
.plate .slotnote span{ display:block; color:#807d76; letter-spacing:0.2em; }
figcaption{
  display:flex; gap:1rem; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); margin-top:0.85rem; padding-top:0.7rem;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--gray);
  text-transform:uppercase; flex-wrap:wrap;
}
figcaption .t{ color:var(--ink-soft); }

/* hero "prints in" */
.develops{ opacity:0; filter:brightness(0.35) contrast(1.25); }
.develops.dev-in{ opacity:1; filter:brightness(1) contrast(1); transition:opacity 1.3s ease, filter 1.6s ease; }
@media (prefers-reduced-motion: reduce){ .develops{ opacity:1; filter:none; transition:none; } }

/* ---- sections & prose ---- */
.divider{ border:0; border-top:1px solid var(--line); margin:0; }
section.part{ padding:clamp(3.2rem,9vh,6rem) 0; }
.part-head{ display:grid; grid-template-columns:1fr; gap:0.5rem; margin-bottom:clamp(1.8rem,5vh,2.8rem); }
.part-head .place{ margin:0; }
h2.part-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  line-height:1.08; letter-spacing:-0.012em; margin:0.1rem 0 0;
}
h2.part-title em{ font-weight:300; color:var(--ink-soft); }
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.15em; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{
  font-family:var(--mono); font-weight:500; font-size:0.64rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gray); margin:2.4em 0 1em;
}
.prose .lead-in{ font-variant:small-caps; letter-spacing:0.04em; color:var(--ink); }
.prose blockquote{
  margin:1.8em 0; padding-left:1.4rem; border-left:2px solid var(--ink);
  font-style:italic; font-weight:300; color:var(--ink-soft); font-size:1.12em; line-height:1.5;
}
.prose blockquote cite{ display:block; margin-top:0.7rem; font-style:normal; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gray); }
.prose a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; }
.prose a:hover{ border-color:var(--ink); }

/* gallery-checklist facts */
.checklist{
  margin:2.2rem 0 0; padding:1.5rem 0 0; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.4rem 2.4rem;
}
.checklist dt{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray); margin-bottom:0.3rem; }
.checklist dd{ margin:0; font-size:0.98rem; line-height:1.5; color:var(--ink-soft); }

/* family-remembrance callout */
.remembers{
  margin:2rem 0; padding:1.3rem 1.5rem; background:var(--paper-inset);
  border-left:2px solid var(--ink); max-width:var(--measure);
}
.remembers .label{ display:block; margin-bottom:0.5rem; }
.remembers p{ margin:0; font-style:italic; color:var(--ink-soft); }
.remembers p + p{ margin-top:0.8rem; }

/* ---- centered pull quotes ---- */
.quotes{ padding:clamp(3.4rem,10vh,7rem) 0; }
.quote{ max-width:28ch; margin:0 auto clamp(3rem,8vh,5rem); text-align:center; }
.quote:last-child{ margin-bottom:0; }
.quote blockquote{
  margin:0; font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.5rem, 1rem + 2.2vw, 2.5rem); line-height:1.3; letter-spacing:-0.01em;
}
.quote cite{
  display:block; margin-top:1.3rem; font-style:normal;
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray);
}

/* ---- book / chapters ---- */
.chapter{ padding:clamp(3rem,8vh,5.5rem) 0; }
.chapter-head{ margin-bottom:clamp(1.8rem,5vh,2.6rem); }
.chapter-num{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:0.9rem; }
h2.chapter-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,1.1rem+2.3vw,2.9rem);
  line-height:1.1; letter-spacing:-0.012em; margin:0;
}
h2.chapter-title em{ font-weight:300; color:var(--ink-soft); font-style:italic; }
.chapter-sub{ margin:0.7rem 0 0; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; color:var(--gray); }

/* ---- photographs gallery ---- */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(1.8rem,3.5vw,3rem); margin-top:clamp(2.4rem,6vh,3.6rem);
}
.gallery figure{ margin:0; }
.gallery .frame{ background:#0f0f0e; overflow:hidden; }
.gallery img{ width:100%; display:block; filter:grayscale(1) contrast(1.02); transition:transform 0.6s ease; }
.gallery figure:hover img{ transform:scale(1.02); }
.gallery figcaption{ border-top:1px solid var(--line); }

/* ---- memory wall ---- */
section.wall{ padding:clamp(3.4rem,9vh,6rem) 0 clamp(4rem,10vh,7rem); }
.wall .intro{ max-width:var(--measure); margin-bottom:clamp(2rem,5vh,3rem); }
.wall h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,1.1rem+2.4vw,2.9rem); margin:0.4rem 0 0.9rem; letter-spacing:-0.01em; }
.wall .note{ font-size:0.95rem; color:var(--gray); }
form.memory{ max-width:var(--measure); display:grid; gap:1.4rem; border-top:1px solid var(--line); padding-top:clamp(1.8rem,5vh,2.6rem); }
.field{ display:grid; gap:0.5rem; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
form.memory label{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); }
form.memory input[type=text], form.memory textarea{
  font-family:var(--serif); font-size:1.02rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink); padding:0.55rem 0.1rem; border-radius:0; width:100%;
}
form.memory textarea{ min-height:8rem; resize:vertical; line-height:1.6; }
form.memory input::placeholder, form.memory textarea::placeholder{ color:#A6A39B; }
.filefield{ border:1px dashed var(--line); padding:1.1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.filefield .hint{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gray); }
.filefield input[type=file]{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); }
button.submit{
  justify-self:start; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:0; padding:0.95rem 1.8rem; cursor:pointer; border-radius:0; transition:background 0.2s ease;
}
button.submit:hover{ background:#000; }
.moderation{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gray); margin-top:0.2rem; }
.wall-empty{ margin-top:clamp(2.4rem,6vh,3.4rem); border-top:1px solid var(--line-soft); padding-top:2rem; color:var(--gray); font-style:italic; }

/* ---- cross-page "continue reading" ---- */
.jump{ display:flex; gap:1.5rem; flex-wrap:wrap; padding:clamp(2.2rem,6vh,3.4rem) 0; border-top:1px solid var(--line); }
.jump a{
  flex:1 1 240px; text-decoration:none; border:1px solid var(--line); padding:1.4rem 1.5rem;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.jump a:hover{ border-color:var(--ink); background:var(--paper-inset); }
.jump .k{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:0.5rem; }
.jump .v{ font-family:var(--serif); font-size:1.25rem; color:var(--ink); }

/* ---- footer ---- */
footer{ border-top:1px solid var(--ink); padding:clamp(2.8rem,7vh,4.5rem) 0 clamp(3.5rem,8vh,5rem); }
footer .fq{ max-width:44ch; font-family:var(--serif); font-style:italic; font-weight:300; font-size:1.25rem; line-height:1.4; color:var(--ink-soft); margin:0 0 2rem; }
footer .meta{ font-family:var(--mono); font-size:0.63rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gray); line-height:2; }

/* reveal on scroll */
.rise{ opacity:0; transform:translateY(14px); }
.rise.in{ opacity:1; transform:none; transition:opacity 0.9s ease, transform 0.9s ease; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; transition:none; } }