/* ─────────────────────────────────────────────────────────
   berlengas.whoisthisfabio.com — foundations
   Manuscript stack: Newsreader + Fragment Mono. Teal theme.
   ───────────────────────────────────────────────────────── */

@font-face{font-family:'Newsreader';src:url('assets/fonts/Newsreader-VariableFont_opsz_wght.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/Newsreader-Italic-VariableFont_opsz_wght.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('assets/fonts/FragmentMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --stet-bone:#F2EFE7; --stet-paper:#E5E2D5; --stet-stone:#CAC5B5;
  --stet-ink:#0F0E0C;  --stet-ink-2:#23211D; --stet-mute:#6F6B62;
  --stet-red:#B23A2A;
  --stet-teal:#5FC9B4; --stet-teal-deep:#1E7A6B;
  --stet-teal-paper:#E6EEEC; --stet-teal-fg:#112019;
  --stet-teal-dark:#0A1311;  --stet-teal-dfg:#DEEAE6;

  --bg:var(--stet-teal-paper); --fg-1:var(--stet-teal-fg);
  --accent:var(--stet-teal-deep); --accent-soft:var(--stet-teal);

  --fg-2:color-mix(in oklab, var(--fg-1) 84%, var(--bg));
  --fg-3:color-mix(in oklab, var(--fg-1) 55%, var(--bg));
  --bg-2:color-mix(in oklab, var(--bg) 92%, var(--fg-1));
  --line:color-mix(in oklab, var(--bg) 78%, var(--fg-1));

  --font-display:'Newsreader',Georgia,serif;
  --font-mono:'Fragment Mono',ui-monospace,monospace;

  --radius:0;
  --shadow:0 26px 70px rgba(15,14,12,.13);
  --dur:320ms; --ease:cubic-bezier(.2,.8,.2,1);
  --shell:min(100% - 32px, 1160px);
}
[data-mode="dark"]{
  --bg:var(--stet-teal-dark); --fg-1:var(--stet-teal-dfg);
  --accent:var(--stet-teal); --accent-soft:var(--stet-teal-deep);
  --shadow:0 26px 70px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg-1);
  font-family:var(--font-display); font-weight:350;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; border-radius:0}
a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
a:hover{color:var(--accent); border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px}

.kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin:0;
}
.mono{font-family:var(--font-mono); font-size:12px; letter-spacing:.04em}
.mark{font-style:italic; font-weight:400; color:var(--accent)}

/* ── bar ── */
.bar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in oklab, var(--bg) 84%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.bar-in{
  width:var(--shell); margin:0 auto; height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.bar .right{display:flex; align-items:center; gap:16px}
.toggle{
  appearance:none; background:none; border:1px solid var(--line); color:var(--fg-3);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 10px; cursor:pointer; border-radius:0;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toggle:hover{color:var(--accent); border-color:var(--accent)}

/* ── shell ── */
.shell{width:var(--shell); margin:0 auto; padding:64px 0 0}
section+section{margin-top:64px}

.head{max-width:none}
.nb{white-space:nowrap}
.head h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(40px,7vw,80px); line-height:1.04; letter-spacing:-.02em;
  text-wrap:balance; margin:16px 0 0; max-width:19ch;
}
.lede{
  font-weight:350; font-size:clamp(17px,1.7vw,20px); line-height:1.5;
  color:var(--fg-2); margin:24px 0 0; max-width:54ch;
}

/* ── viewer ── */
.viewer{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start}
.plate{margin:0; position:relative}
.plate .frame{
  background:var(--stet-ink); border:1px solid var(--line);
  aspect-ratio:3/2; overflow:hidden; box-shadow:var(--shadow);
}
.plate .frame img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity var(--dur) var(--ease);
}
.plate.swapping .frame img{opacity:0}
.plate figcaption{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--line); margin-top:12px;
}
.plate figcaption .id{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.10em; color:var(--accent);
}
.plate figcaption .exp{font-family:var(--font-mono); font-size:12px; color:var(--fg-3); letter-spacing:.04em}

.nav{display:flex; gap:8px; margin-top:16px}
.nav button{
  appearance:none; background:none; border:1px solid var(--fg-1); color:var(--fg-1);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  min-height:40px; padding:10px 16px; cursor:pointer; border-radius:0;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav button:hover{transform:translateY(-1px); background:var(--fg-1); color:var(--bg)}

/* ── facts ── */
.facts{border-top:1px solid var(--fg-1); padding-top:12px}
.facts dl{margin:0}
.facts .row{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.facts dt{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); white-space:nowrap;
}
.facts dd{
  margin:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
  color:var(--fg-1); text-align:right; word-break:break-word;
}
.facts dd.accent{color:var(--accent)}
.facts .hash dd{font-size:10px; line-height:1.5; text-align:left; color:var(--fg-3)}
.facts .hash{display:block}
.facts .hash dt{margin-bottom:6px}

/* ── strip ── */
.strip-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-bottom:1px solid var(--fg-1); padding-bottom:12px; margin-bottom:24px}
.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:start}
.thumb{
  appearance:none; padding:0; margin:0; background:none; cursor:pointer; border-radius:0;
  border:1px solid var(--line); display:block; position:relative; line-height:0; font-size:0;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.thumb img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:opacity var(--dur) var(--ease)}
.thumb:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--fg-1)}
.thumb .tag{
  position:absolute; left:0; bottom:0; padding:3px 6px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.10em;
  background:color-mix(in oklab, var(--bg) 88%, transparent); color:var(--fg-3);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.thumb:hover .tag, .thumb[aria-current="true"] .tag{opacity:1}
.thumb[aria-current="true"]{border-color:var(--accent)}
.thumb[aria-current="true"] .tag{color:var(--accent)}
.thumb[aria-current="true"] img{opacity:.55}

/* ── attest ── */
.attest{border-top:1px solid var(--fg-1); padding-top:24px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px}
.attest p{font-size:16px; line-height:1.55; color:var(--fg-2); margin:12px 0 0; max-width:56ch}

footer{
  margin-top:96px; border-top:1px solid var(--line);
}
.foot-in{
  width:var(--shell); margin:0 auto; padding:24px 0 48px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

@media (max-width:900px){
  .viewer{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:repeat(4,1fr)}
  .attest{grid-template-columns:minmax(0,1fr)}
  .shell{padding-top:48px}
  section+section{margin-top:48px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(3,1fr); gap:8px}
  .bar-in{height:48px}
}

@media print{
  .bar,.nav,.toggle{display:none}
  body{background:#fff; color:#000}
  .grid{grid-template-columns:repeat(4,1fr)}
  .plate .frame{box-shadow:none}
  .thumb .tag{opacity:1}
}