/* ════════════════════════════════════════════════════════════
   SOBANPORTFOLIO — "Editorial Immersive"
   cream canvas · ink type · terracotta accent (the only accent)
   Anton (display) · Space Mono (meta) · Inter (body)
   ════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root{
  --paper:#FAF6F0;
  --ink:#151412;
  --terra:#B87253;
  --muted:#7A746B;
  --line:rgba(21,20,18,.12);
  --paper-line:rgba(250,246,240,.18);

  /* placeholder-media duotone (swap out when real imagery lands) */
  --ph-light:#EFE6DA;
  --ph-mid:#DCD1C0;
  --ph-dark:#2A2723;

  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --mono:"Space Mono","JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter",system-ui,-apple-system,sans-serif;

  --pad:clamp(1.2rem,5vw,4.5rem);
  --secgap:clamp(4.5rem,10vw,8rem);
  --maxw:1280px;
}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;padding:0;}

/* mono meta text — shared voice for labels/numbers */
.hero__meta,.hero__cta,.secmeta__num,.secmeta__all,
.workcard__side,.workcard__index,.workcard__tags,
.aboutsec__skills,.contactsec__mail,.contactsec__tg,
.sitefoot,.topbar__links,.topbar__brand{
  font-family:var(--mono);
}

/* ── Reveal-on-scroll ── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1);}
[data-reveal].in{opacity:1;transform:none;}

/* ── Topbar ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.2rem var(--pad);transition:background .4s,box-shadow .4s,padding .4s;}
.topbar.topbar--solid{background:rgba(250,246,240,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:.8rem var(--pad);}
.topbar__inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.topbar__brand{font-weight:700;font-size:1.05rem;letter-spacing:.06em;}
.topbar__brand span{color:var(--terra);}
.topbar__links{display:flex;gap:2.2rem;font-size:.72rem;letter-spacing:.14em;}
.topbar__links a{color:var(--muted);transition:color .3s;padding:.5rem 0;}
.topbar__links a:hover{color:var(--terra);}
.topbar__burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:.6rem;min-width:44px;min-height:44px;align-items:center;justify-content:center;}
.topbar__burger span{width:26px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s;}

/* ── Hero ── */
.hero{max-width:var(--maxw);margin:0 auto;padding:clamp(8rem,18vh,12rem) var(--pad) var(--secgap);}
.hero__meta{font-size:.72rem;letter-spacing:.22em;color:var(--terra);margin-bottom:clamp(1.2rem,3vw,2rem);}
.hero__name{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(4rem,14vw,12rem);line-height:.92;letter-spacing:.01em;}
.hero__row{display:flex;align-items:flex-end;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(1.6rem,4vw,2.8rem);}
.hero__line{max-width:44ch;font-size:clamp(.95rem,1.4vw,1.1rem);color:var(--muted);}
.hero__sticker{flex:none;background:var(--terra);color:var(--paper);font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.16em;padding:.7em 1.3em;border-radius:999px;transform:rotate(-6deg);}
.hero__cta{display:inline-block;margin-top:clamp(2rem,5vw,3.2rem);font-size:.78rem;letter-spacing:.18em;border-bottom:1px solid var(--ink);padding:.4rem 0 4px;transition:color .3s,border-color .3s;}
.hero__cta:hover{color:var(--terra);border-color:var(--terra);}

/* ── Section meta head (01 / TITLE) ── */
.secmeta{max-width:var(--maxw);margin:0 auto;padding:1.2rem var(--pad) 0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);}
.secmeta__num{color:var(--terra);font-size:.8rem;letter-spacing:.2em;}
.secmeta__num::after{content:" /";color:var(--muted);}
.secmeta__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.02em;line-height:1;}
.secmeta__all{margin-left:auto;font-size:.72rem;letter-spacing:.16em;color:var(--muted);padding:.5rem 0;transition:color .3s;}
.secmeta__all:hover{color:var(--terra);}

/* sections share one top gap — no doubled padding between stacked sections */
.worksec,.aboutsec,.contactsec{padding-top:var(--secgap);}

/* ── 01 / Selected work — asymmetric explicit grid ── */
.worksec__grid{max-width:var(--maxw);margin:clamp(2rem,5vw,3.5rem) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1.2rem,3vw,2.5rem);row-gap:clamp(2.5rem,6vw,4.5rem);}
.workcard--a{grid-column:1/8;}
.workcard--b{grid-column:8/13;margin-top:clamp(2rem,6vw,5rem);}
.workcard--c{grid-column:1/6;margin-top:clamp(-2rem,-4vw,-3rem);}
.workcard--d{grid-column:6/13;}

.workcard__link{display:block;}
.workcard__frame{position:relative;padding-left:1.7rem;}
.workcard__side{position:absolute;left:0;bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.62rem;letter-spacing:.2em;color:var(--terra);white-space:nowrap;}
.workcard__media{overflow:hidden;border:1px solid var(--line);transition:transform .5s cubic-bezier(.22,1,.36,1);}
.workcard--a .workcard__media,.workcard--d .workcard__media{aspect-ratio:16/10;}
.workcard--b .workcard__media,.workcard--c .workcard__media{aspect-ratio:4/5;}
.workcard__link:hover .workcard__media{transform:translateY(-4px);}

/* placeholder duotone blocks — replace with <img>/<video>, see html comments */
.workcard__media--01{background:linear-gradient(150deg,var(--ph-light) 0%,var(--ph-mid) 55%,var(--ph-dark) 145%);}
.workcard__media--02{background:repeating-linear-gradient(90deg,var(--ph-mid) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,var(--ph-mid) 0 1px,transparent 1px 26px),linear-gradient(180deg,var(--ph-light),var(--ph-mid));}
.workcard__media--03{background:radial-gradient(circle at 72% 28%,var(--ph-dark) 0 18%,transparent 19%),radial-gradient(circle at 30% 70%,var(--ph-mid),var(--ph-light) 65%);}
.workcard__media--04{background:repeating-linear-gradient(45deg,var(--ph-light) 0 20px,var(--ph-mid) 20px 40px);}

.workcard__body{margin-top:1.1rem;padding-left:1.7rem;}
.workcard__index{font-size:.68rem;letter-spacing:.2em;color:var(--muted);}
.workcard__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:.01em;line-height:1.05;margin-top:.3rem;transition:color .3s;}
.workcard__link:hover .workcard__title{color:var(--terra);}
.workcard__desc{margin-top:.55rem;font-size:.92rem;color:var(--muted);max-width:40ch;}
.workcard__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;}
.workcard__tags li{font-size:.62rem;letter-spacing:.16em;color:var(--muted);border:1px solid var(--line);padding:.4em .9em;}

/* ── 02 / About ── */
.aboutsec__inner{max-width:var(--maxw);margin:clamp(2rem,5vw,3.5rem) auto 0;padding:0 var(--pad);}
.aboutsec__lead{font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.45;max-width:52ch;letter-spacing:-.01em;}
.aboutsec__skills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.8rem,4vw,2.6rem);font-family:var(--mono);}
.aboutsec__skills li{font-size:.68rem;letter-spacing:.16em;color:var(--muted);border:1px solid var(--line);padding:.55em 1.1em;}

/* ── 03 / Contact ── */
.contactsec__inner{max-width:var(--maxw);margin:clamp(2rem,5vw,3.5rem) auto 0;padding:0 var(--pad) var(--secgap);}
.contactsec__big{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,8vw,6.5rem);line-height:.95;}
.contactsec__big span{color:var(--terra);}
.contactsec__mail,.contactsec__tg{display:inline-block;margin:1.6rem 2.4rem 0 0;font-size:clamp(.78rem,1.4vw,.95rem);letter-spacing:.14em;border-bottom:1px solid var(--ink);padding:.5rem 0 4px;transition:color .3s,border-color .3s;}
.contactsec__mail:hover,.contactsec__tg:hover{color:var(--terra);border-color:var(--terra);}

/* ── Marquee wordmark ── */
.marquee{overflow:hidden;border-top:1px solid var(--line);background:var(--ink);color:var(--paper);padding:clamp(.8rem,2vw,1.4rem) 0;}
.marquee__track{display:flex;width:max-content;animation:marqueeSlide 22s linear infinite;}
.marquee__chunk{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;white-space:nowrap;letter-spacing:.02em;}
@keyframes marqueeSlide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── Footer ── */
.sitefoot{background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.4rem var(--pad) 1.6rem;font-size:.68rem;letter-spacing:.18em;border-top:1px solid var(--paper-line);}
.sitefoot__loc{color:var(--terra);}

/* ── Reduced motion — kill reveals, marquee, hovers-in-motion ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .marquee__track{animation:none;}
  .workcard__media,.workcard__link:hover .workcard__media{transition:none;transform:none;}
}

/* ── Tablet ── */
@media (max-width:860px){
  .workcard--a,.workcard--b,.workcard--c,.workcard--d{grid-column:1/13;margin-top:0;}
  .workcard--a .workcard__media,.workcard--b .workcard__media,
  .workcard--c .workcard__media,.workcard--d .workcard__media{aspect-ratio:16/10;}
}

/* ── Mobile (checked at 390px) ── */
@media (max-width:720px){
  .topbar__links{position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;font-size:1.3rem;transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);}
  .topbar__links.is-open{transform:none;}
  .topbar__links a{color:var(--ink);padding:.6rem 1rem;min-height:44px;display:flex;align-items:center;}
  .topbar__burger{display:flex;z-index:60;}

  .hero__row{flex-direction:column;align-items:flex-start;}
  .hero__sticker{transform:rotate(-4deg);}

  /* vertical labels go horizontal on small screens */
  .workcard__frame{padding-left:0;}
  .workcard__side{position:static;writing-mode:horizontal-tb;transform:none;display:block;margin-bottom:.6rem;}
  .workcard__body{padding-left:0;}

  .secmeta{flex-wrap:wrap;}
  .contactsec__mail,.contactsec__tg{display:block;margin:1.2rem 0 0;min-height:44px;}
  .sitefoot{justify-content:center;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .topbar__links{transition:none;}
}

/* ── Videos always play (drop a <video> anywhere and it just works) ── */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-picture-in-picture-button{display:none!important;opacity:0!important;}
video{pointer-events:none;}