/* ============================================================
   Layton — portfolio stylesheet
   Ground: warm near-black, taken from the instrument photography.
   Accent: amber, taken from Huon and Callitris grain.
   Display: Fraunces. Body: Archivo. Data: IBM Plex Mono.
   ============================================================ */

@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-300-normal.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

:root {
  --bg:        #171310;
  --bg-2:      #1F1A15;
  --line:      #372E24;
  --line-soft: #2A231C;
  --text:      #E9E1D3;
  --muted:     #A29379;
  --faint:     #6E6250;
  --amber:     #C48B4F;
  --amber-deep:#7E5630;
  --paper:     #F0EAE0;
  --ink:       #221C15;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Archivo', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --measure: 62ch;
  --gutter: 2.5rem; --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 84rem;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
p a, .prose a { color:var(--amber); text-decoration:underline; text-decoration-color:var(--amber-deep); text-underline-offset:3px; }
p a:hover, .prose a:hover { text-decoration-color:var(--amber); }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
::selection { background:var(--amber-deep); color:var(--paper); }

.wrap { max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ---------- type roles ---------- */
.eyebrow {
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before { content:''; width:1.6rem; height:1px; background:var(--amber); flex:none; }

h1,h2,h3 { font-family:var(--serif); font-weight:300; line-height:1.05; letter-spacing:-0.01em; }
.display-xl { font-size:4.6rem; font-size:clamp(3rem, 9vw, 7.5rem); }
.display-l  { font-size:3.4rem; font-size:clamp(2.4rem, 6vw, 4.6rem); }
.display-m  { font-size:2.2rem; font-size:clamp(1.7rem, 3.5vw, 2.6rem); }
em, .it { font-family:var(--serif); font-style:italic; }

.prose { max-width:var(--measure); }
.prose p + p { margin-top:1.1em; }
.prose .lede { font-size:1.2rem; line-height:1.6; color:var(--text); }
.prose p { color:#CFC4B2; }
.prose strong { color:var(--text); font-weight:600; }

.mono { font-family:var(--mono); }

/* ---------- header ---------- */
.site-head {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
@supports not (background:color-mix(in srgb, red 50%, blue)) {
  .site-head { background:rgba(23,19,16,.92); }
}
.site-head .wrap { display:flex; align-items:baseline; justify-content:space-between; padding-top:.9rem; padding-bottom:.9rem; }
.brand { font-family:var(--serif); font-weight:400; font-size:1.15rem; letter-spacing:.01em; }
.brand .dot { color:var(--amber); }
.site-nav { display:flex; gap:1.6rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.site-nav a { color:var(--muted); padding:.25rem 0; border-bottom:1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { color:var(--text); border-bottom-color:var(--amber); }
.nav-item { position:relative; }
.nav-item .dropdown {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:14.5rem; padding:.55rem 0; margin-top:.55rem;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
  z-index:60; text-transform:none; letter-spacing:0;
}
.nav-item .dropdown::before { content:''; position:absolute; left:0; right:0; top:-1rem; height:1rem; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-item .dropdown a {
  display:block; padding:.5rem 1.1rem; border-bottom:0;
  font-family:var(--serif); font-size:1.02rem; color:#D8CEBD;
}
.nav-item .dropdown a:hover { color:var(--amber); background:rgba(196,139,79,.07); }
@media (max-width:860px) { .nav-item .dropdown { display:none; } }
@media (max-width:640px) { .site-nav { gap:1rem; font-size:.68rem; } .site-nav .hide-sm { display:none; } }

/* ---------- hero ---------- */
.hero { position:relative; min-height:44rem; min-height:min(88vh, 54rem); display:flex; align-items:flex-end; overflow:hidden; }
.hero-img { position:absolute; inset:0; }
.hero-img img { width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,19,16,.55) 0%, rgba(23,19,16,.12) 38%, rgba(23,19,16,.62) 62%, rgba(23,19,16,.92) 84%, var(--bg) 100%);
}
.hero-inner { text-shadow:0 1px 22px rgba(10,8,6,.55); position:relative; z-index:1; width:100%; padding-bottom:4rem; padding-bottom:clamp(2.5rem, 7vh, 5rem); }
.hero h1 { margin:.4rem 0 1rem; }
.hero .eyebrow { color:#CDC2AF; }
.hero .eyebrow::before { background:var(--amber); }
.hero .tagline { max-width:34rem; font-size:1.2rem; font-size:clamp(1.05rem, 1.6vw, 1.3rem); line-height:1.55; color:#DDD3C2; }
.hero-strip {
  margin-top:2rem; padding-top:1.1rem; border-top:1px solid rgba(233,225,211,.22);
  display:flex; flex-wrap:wrap; gap:.4rem 2.2rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.hero-strip b { color:var(--amber); font-weight:500; }

/* ---------- sections ---------- */
.section { padding:5.5rem 0 0; padding:clamp(4rem, 9vh, 7rem) 0 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin-bottom:2.4rem; }
.section-head .note { font-family:var(--mono); font-size:.74rem; color:var(--faint); letter-spacing:.1em; }
.section-head h2 { margin-top:.5rem; }

/* ---------- index of work (rows) ---------- */
.work-index { border-top:1px solid var(--line); }
.work-row {
  display:grid; grid-template-columns:5.5rem 1fr 15rem 11rem; gap:1.5rem; align-items:baseline;
  padding:1.35rem 0; border-bottom:1px solid var(--line);
  position:relative;
}
.work-row .yr, .work-row .cat, .work-row .mat { font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--muted); }
.work-row .yr { color:var(--amber); }
.work-row .ttl { font-family:var(--serif); font-weight:400; font-size:1.9rem; font-size:clamp(1.5rem, 2.6vw, 2.15rem); line-height:1.1; color:var(--text); transition:color .2s ease, transform .25s ease; }
.work-row:hover .ttl, .work-row:focus-within .ttl { color:var(--amber); transform:translateX(.35rem); }
.work-row a.row-link { position:absolute; inset:0; z-index:2; }
.work-peek {
  position:absolute; right:2rem; top:50%; transform:translateY(-50%) rotate(-2deg) scale(.96);
  width:15rem; aspect-ratio:4/3; object-fit:cover; z-index:1;
  opacity:0; transition:opacity .22s ease, transform .3s ease;
  pointer-events:none; box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.work-row:hover .work-peek, .work-row:focus-within .work-peek { opacity:1; transform:translateY(-50%) rotate(-2deg) scale(1); }
@media (max-width:860px) {
  .work-row { grid-template-columns:4rem 1fr; }
  .work-row .cat, .work-row .mat, .work-peek { display:none; }
}

/* ---------- making band ---------- */
.making-note { max-width:46rem; color:#CFC4B2; margin-bottom:2.6rem; }
.making-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.make-card { position:relative; grid-column:span 2; overflow:hidden; background:var(--bg-2); }
.make-card:nth-child(1) { grid-column:span 3; }
.make-card:nth-child(2) { grid-column:span 3; }
.make-card img { width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s ease, filter .4s ease; }
.make-card:nth-child(-n+2) img { aspect-ratio:16/11; }
.make-card:hover img { transform:scale(1.025); }
.make-card .cap {
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem .9rem;
  background:linear-gradient(180deg, transparent, rgba(15,12,9,.85));
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.make-card .cap .n { font-family:var(--serif); font-size:1.25rem; }
.make-card .cap .y { font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.1em; }
@media (max-width:860px) {
  .making-grid { grid-template-columns:1fr 1fr; }
  .make-card, .make-card:nth-child(1), .make-card:nth-child(2) { grid-column:span 1; }
  .make-card img, .make-card:nth-child(-n+2) img { aspect-ratio:4/5; }
}
@media (max-width:520px) { .making-grid { grid-template-columns:1fr; } }

/* ---------- about ---------- */
.about { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:4rem; gap:clamp(2rem,5vw,5rem); align-items:start; }
.about-facts { border-top:1px solid var(--line); }
.fact { display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.fact dt { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-top:.2rem; }
.fact dd { color:#D8CEBD; font-size:.95rem; }
@media (max-width:860px) { .about { grid-template-columns:1fr; } }

/* ---------- footer / contact ---------- */
.site-foot { margin-top:6.5rem; margin-top:clamp(4.5rem,10vh,8rem); border-top:1px solid var(--line); background:var(--bg-2); }
.foot-inner { padding-top:4rem; padding-top:clamp(3rem,7vh,5rem); padding-bottom:1.5rem; }
.foot-inner h2 { max-width:22ch; }
.foot-mail { display:inline-block; margin-top:1.6rem; font-family:var(--serif); font-size:2rem; font-size:clamp(1.4rem,3.4vw,2.4rem); border-bottom:1px solid var(--amber-deep); padding-bottom:.15rem; transition:border-color .2s ease, color .2s ease; }
.foot-mail:hover { color:var(--amber); border-color:var(--amber); }
.foot-meta { margin-top:3.2rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; }
.foot-meta a { color:var(--muted); }
.foot-meta a:hover { color:var(--amber); }

/* ---------- project page ---------- */
.proj-hero { margin-top:2.4rem; }
.proj-hero .figure { margin:0; }
.crop43 img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.crop11 img { aspect-ratio:1/1; object-fit:cover; width:100%; }

.proj-head { padding-top:4.5rem; padding-top:clamp(3rem,7vh,5.5rem); }
.proj-head h1 { margin:.5rem 0 1.2rem; max-width:14ch; }
.proj-head { margin-bottom:3rem; }
.proj-cols { display:grid; grid-template-columns:minmax(0,1fr) 17rem; gap:3.5rem; gap:clamp(2rem,5vw,4.5rem); align-items:start; margin-top:1rem; }
.proj-facts { border-top:1px solid var(--line); font-size:.9rem; position:sticky; top:5rem; }
.proj-facts .fact { grid-template-columns:7.5rem 1fr; }
@media (max-width:860px) { .proj-cols { grid-template-columns:1fr; } .proj-facts { position:static; } }

.figure { margin:3rem 0; margin:clamp(2.2rem,5vh,3.6rem) 0; }
.figure figcaption {
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.7rem .1rem 0; font-family:var(--mono); font-size:.73rem; letter-spacing:.08em; color:var(--muted);
}
.figure figcaption .fno { color:var(--amber); white-space:nowrap; }
.figure.plate img { background:#DADDE0; }
.figure.paper img { background:var(--paper); }
.fig-pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:3rem 0; margin:clamp(2.2rem,5vh,3.6rem) 0; }
.fig-pair .figure { margin:0; }
.fig-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:3rem 0; margin:clamp(2.2rem,5vh,3.6rem) 0; }
.fig-row .figure { margin:0; }
@media (max-width:720px) { .fig-pair, .fig-row { grid-template-columns:1fr; } }
.fig-band { margin:3rem calc(-1 * var(--gutter)); margin:clamp(2.2rem,5vh,3.6rem) calc(-1 * var(--gutter)); }
@media (min-width:1400px) { .fig-band { margin-left:calc((100% - var(--maxw)) / -2 - var(--gutter)); margin-right:calc((100% - var(--maxw)) / -2 - var(--gutter)); } }
.fig-band img { width:100%; }
.fig-band figcaption { padding-left:var(--gutter); padding-right:var(--gutter); }

/* spec block */
.spec { margin:2.2rem 0; border-top:1px solid var(--line); }
.spec summary {
  cursor:pointer; list-style:none; padding:1rem 0;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.9rem;
}
.spec summary::-webkit-details-marker { display:none; }
.spec summary::after { content:'+'; font-size:1rem; color:var(--amber); margin-left:auto; }
.spec[open] summary::after { content:'\2212'; }
.spec summary:hover { color:var(--text); }
.spec-list { columns:2; column-gap:3rem; padding:0 0 1.4rem; }
.spec-list li { list-style:none; break-inside:avoid; font-family:var(--mono); font-size:.8rem; line-height:1.5; color:#BFB29C; padding:.32rem 0; border-bottom:1px dashed var(--line-soft); }
.spec-list li b { color:var(--text); font-weight:500; }
@media (max-width:720px) { .spec-list { columns:1; } }

/* inline spec strip (always visible) */
.spec-strip { display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:1.4rem 0 0; }
.spec-strip span {
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); padding:.34rem .6rem; border-radius:2px;
}

/* prev / next */
.proj-next { margin-top:5rem; margin-top:clamp(3.5rem,8vh,6rem); border-top:1px solid var(--line); }
.proj-next .wrap { display:flex; justify-content:space-between; gap:2rem; padding-top:1.4rem; padding-bottom:1.6rem; }
.proj-next a { display:flex; flex-direction:column; gap:.3rem; }
.proj-next .lbl { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.proj-next .nm { font-family:var(--serif); font-size:1.4rem; }
.proj-next a:hover .nm { color:var(--amber); }
.proj-next .next { text-align:right; margin-left:auto; }

/* notice (sundowner disclosure) */
.notice {
  margin:1.8rem 0; padding:1rem 1.2rem; border-left:2px solid var(--amber);
  background:var(--bg-2); color:#CFC4B2; font-size:.95rem; max-width:var(--measure);
}

/* ---------- unbecoming player ---------- */
.player { margin:2.4rem 0; border:1px solid var(--line); background:var(--bg-2); }
.score-wrap { position:relative; overflow:hidden; }
.score-wrap img { width:100%; cursor:crosshair; }
.playhead {
  position:absolute; top:0; bottom:0; width:2px; background:var(--amber);
  left:14.55%; box-shadow:0 0 12px rgba(196,139,79,.8); pointer-events:none;
}
.player-bar { display:flex; align-items:center; gap:1.1rem; padding:.9rem 1.1rem; border-top:1px solid var(--line); }
.play-btn {
  width:2.9rem; height:2.9rem; border-radius:50%; border:1px solid var(--amber);
  background:transparent; color:var(--amber); font-size:1rem; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;
}
.play-btn:hover { background:var(--amber); color:var(--bg); }
.player-time { font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.08em; min-width:8.5rem; }
.player-track { flex:1; height:2px; background:var(--line); position:relative; cursor:pointer; }
.player-track .fill { position:absolute; left:0; top:0; bottom:0; background:var(--amber); width:0; }
.player-note { padding:.7rem 1.1rem 1rem; font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.08em; }

/* ---------- cv page ---------- */
.cv-block h2 { margin:2.8rem 0 1rem; font-size:1.5rem; }
.cv-item { padding:.9rem 0; border-bottom:1px solid var(--line-soft); }
.cv-item .row1 { display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; }
.cv-item .r { font-weight:500; color:var(--text); }
.cv-item .o { color:var(--muted); }
.cv-item .d { font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.06em; white-space:nowrap; }
.cv-item ul { margin-top:.55rem; padding-left:1.1rem; color:#C6BAA6; font-size:.95rem; max-width:var(--measure); }
.cv-item ul li + li { margin-top:.3rem; }
@media (max-width:640px) { .cv-item .row1 { flex-direction:column; gap:.15rem; } }

/* misc */
.skip { position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--bg); padding:.6rem 1rem; z-index:100; font-family:var(--mono); }
.skip:focus { left:0; }
hr.rule { border:0; border-top:1px solid var(--line); margin:0; }