/* Henry Martínez · Diario · Article stylesheet
   Coherent with main landing: dark editorial, Fraunces + Inter + JetBrains Mono. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:        #0A0A0A;
  --black-soft:   #121212;
  --black-warm:   #11100E;
  --line:         rgba(232,226,213,0.10);
  --line-strong:  rgba(232,226,213,0.22);
  --text:         #F2F0EC;
  --text-soft:    #B6B0A6;
  --text-faint:   #6E6960;
  --bone:         #E8E2D5;
  --accent:       #0C28E0;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  --max:          720px;
  --pad-x:        clamp(1.2rem, 4vw, 2rem);

  --ease:         cubic-bezier(.2,.7,.2,1);
}

html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--black);line-height:1.7;font-weight:400;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
::selection{background:var(--bone);color:var(--black)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px;border-radius:2px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:linear-gradient(to bottom,rgba(10,10,10,.55),rgba(10,10,10,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);font-weight:500}
.brand .mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--bone);color:var(--bone);font-family:var(--font-display);font-style:italic;font-size:.82rem;font-weight:500;line-height:1;border-radius:50%}
.brand em{font-family:var(--font-display);font-style:italic;text-transform:none;letter-spacing:-.005em;font-size:1rem;font-weight:400;color:var(--bone);margin-left:.05em}
.nav-back{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);position:relative;padding:.4rem 0}
.nav-back::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bone);transform:scaleX(0);transform-origin:right center;transition:transform .35s var(--ease)}
.nav-back:hover{color:var(--text)}
.nav-back:hover::after{transform:scaleX(1);transform-origin:left center}

/* article */
.post{flex:1;max-width:var(--max);margin:0 auto;padding:7.5rem var(--pad-x) 3.5rem}
.post-head{margin-bottom:3.4rem}
.kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);font-weight:500;margin-bottom:1.6rem}
.kicker .num{color:var(--bone);margin-right:.6rem}
.post-head h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.025em;color:var(--text);margin-bottom:1.4rem;max-width:18ch}
.post-head h1 em{font-style:italic;font-weight:400;color:var(--bone)}
.post-head .dek{color:var(--text-soft);font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.55;font-weight:300;max-width:54ch}

.post-body{font-size:1.06rem;color:var(--text-soft)}
.post-body > * + *{margin-top:1.5rem}
.post-body p{font-weight:400}
.post-body p strong{color:var(--text);font-weight:500}
.post-body p em{font-style:italic;color:var(--bone);font-weight:400}
.post-body h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.15;letter-spacing:-.018em;color:var(--text);margin-top:3.2rem;margin-bottom:.4rem}
.post-body h2 em{font-style:italic;color:var(--bone);font-weight:400}
.post-body h3{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:1.32rem;color:var(--text);margin-top:2.4rem;margin-bottom:.2rem}
.post-body blockquote{border-left:1px solid var(--bone);padding:.4rem 0 .4rem 1.4rem;margin:2rem 0;font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.34rem;line-height:1.45;color:var(--text);max-width:50ch}
.post-body blockquote em{color:var(--bone);font-weight:400}
.post-body ol,.post-body ul{padding-left:1.4rem;margin:1.5rem 0}
.post-body ol li,.post-body ul li{margin-bottom:.7rem;padding-left:.4rem}
.post-body ol li::marker{font-family:var(--font-mono);font-size:.78em;color:var(--text-faint)}
.post-body ul li::marker{color:var(--text-faint)}
.post-body a{color:var(--bone);border-bottom:1px solid rgba(232,226,213,0.4);transition:border-color .2s var(--ease)}
.post-body a:hover{border-bottom-color:var(--bone)}
.post-body code{font-family:var(--font-mono);font-size:.92em;background:var(--black-warm);padding:.1em .4em;border:1px solid var(--line);border-radius:2px;color:var(--bone)}

.divider{border:0;border-top:1px solid var(--line);margin:3.5rem 0 2.4rem;width:64px}

/* Figures · editorial photography
   MOBILE FIRST: enforce a contained box (4/3) so vertical photos don't
   dominate the viewport. Crucially we override width/height attributes
   from the <img> tag and use the wrapper aspect-ratio. */
.post-body figure{margin:2.4rem 0;padding:0;background:var(--black-warm);border:1px solid var(--line);overflow:hidden;max-width:100%}
.post-body figure .figure-frame{position:relative;display:block;width:100%;aspect-ratio:4/3;background:#0E0D0B;overflow:hidden}
.post-body figure .figure-frame img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.94) contrast(1.04)}
.post-body figure figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:.85rem 1.1rem 1rem;border-top:1px solid var(--line);line-height:1.5;font-weight:500}
.post-body figure figcaption .credit{color:var(--text-faint);text-transform:none;letter-spacing:.04em;display:block;margin-top:.3rem;font-size:.62rem;opacity:.85}
.post-body figure figcaption .credit a{color:var(--text-soft);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.post-body figure figcaption .credit a:hover{border-bottom-color:var(--text-soft)}
/* Mobile portrait: allow slightly taller frame for vertical shots, but cap */
.post-body figure.portrait .figure-frame{aspect-ratio:3/4;max-height:65vh}
/* Tablet+: bleed wider, allow taller portraits */
@media (min-width:760px){
  .post-body figure{margin:3.4rem -3.5rem}
  .post-body figure .figure-frame{aspect-ratio:3/2}
  .post-body figure.portrait .figure-frame{aspect-ratio:3/4;max-height:78vh}
  .post-body figure figcaption{font-size:.7rem;padding:1rem 1.2rem 1.05rem}
}
@media (min-width:1080px){
  .post-body figure.wide{margin:4rem -8rem}
}

.byline{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--text-faint);font-style:normal;font-weight:400;line-height:1.7}

.post-nav{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:4.5rem;padding-top:1.8rem;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);flex-wrap:wrap}
.post-nav a{padding:.4rem 0;position:relative}
.post-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bone);transform:scaleX(0);transform-origin:right center;transition:transform .35s var(--ease)}
.post-nav a:hover{color:var(--text)}
.post-nav a:hover::after{transform:scaleX(1);transform-origin:left center}
.post-nav .nav-next{margin-left:auto;text-align:right}

.foot{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--text-faint);padding:2rem var(--pad-x);border-top:1px solid var(--line);text-align:center;text-transform:uppercase;margin-top:auto}
.foot a{color:var(--text-soft)}
.foot a:hover{color:var(--text)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}