/* ============================================================
   EBSAN ZAMAN DIPTO — PORTFOLIO
   style.css — v12 "Archive" redesign
   Palette: mulled wine / woodland / antique marble /
            charcoal smoke / sandlight / goat milk
   ============================================================ */

/* ── TOKENS ── */
:root {
  --charcoal:      #191A1E;
  --charcoal-2:    #212227;
  --charcoal-3:    #2A2B31;
  --line:          #34353b;
  --line-2:        #43444b;

  --milk:          #E7E5DB;
  --milk-dim:      #a8a59a;
  --milk-faint:    #6f6c63;

  --wine:          #7a2015;
  --wine-deep:     #49110B;
  --wine-bright:   #a8402f;

  --woodland:      #8a7660;
  --woodland-dim:  #56483B;

  --marble:        #C8C2B7;
  --sand:          #AD9E89;

  --f-display: "Fraunces", "Georgia", serif;
  --f-body:    "Inter", sans-serif;
  --f-mono:    "IBM Plex Mono", monospace;

  --nav-h:  68px;
  --pad:    clamp(22px, 6vw, 96px);

  --content-max: 1280px;
  --edge: max(var(--pad), calc((100% - var(--content-max)) / 2));
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); }
body {
  background: var(--charcoal);
  color: var(--milk);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
::selection { background: var(--wine); color: var(--milk); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: auto; }
.skip:focus { position: fixed; top: 8px; left: 16px; z-index: 999; background: var(--wine); color: var(--milk); padding: 8px 16px; font-family: var(--f-mono); font-size: .78rem; }

/* ── VINTAGE FILM FILTER (signature) ──
   Three stacked layers: warm color-grade wash, radial vignette, animated grain */
.film-filter { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.film-wash {
  position: fixed; inset: 0; z-index: 88; pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(122,32,21,.16) 0%, rgba(122,32,21,0) 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(173,158,137,.13) 0%, rgba(173,158,137,0) 55%);
  mix-blend-mode: soft-light;
}
.film-vignette {
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(120% 75% at 50% 40%, rgba(0,0,0,0) 45%, rgba(10,8,7,.55) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 91; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .5s steps(2) infinite;
}
@keyframes grain { 0%,100%{opacity:.04} 50%{opacity:.065} }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Sprocket-hole divider — the site's recurring "film strip" motif */
.sprockets {
  height: 22px; width: 100%;
  background-image: radial-gradient(circle, var(--charcoal-3) 3.5px, transparent 3.6px);
  background-size: 26px 22px;
  background-position: center;
  opacity: .6;
}
.sprockets.light { background-image: radial-gradient(circle, rgba(231,229,219,.18) 3.5px, transparent 3.6px); }

/* ── UTILITY ── */
@media (max-width: 600px) { .hide-sm { display: none; } }
.r { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.r.in { opacity: 1; transform: none; }
.rs > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rs.in > * { opacity: 1; transform: none; }
.rs.in > *:nth-child(1){transition-delay:.03s} .rs.in > *:nth-child(2){transition-delay:.07s}
.rs.in > *:nth-child(3){transition-delay:.11s} .rs.in > *:nth-child(4){transition-delay:.15s}
.rs.in > *:nth-child(5){transition-delay:.19s} .rs.in > *:nth-child(6){transition-delay:.23s}
.rs.in > *:nth-child(n+7){transition-delay:.26s}

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge);
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(25,26,30,.92); backdrop-filter: blur(14px); border-color: var(--line); }
.nav-logo { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.25rem; letter-spacing: .01em; color: var(--milk); }
.nav-links { display: flex; gap: clamp(18px, 2.6vw, 38px); align-items: center; }
.nav-links a {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--milk-dim); position: relative; padding-bottom: 3px; transition: color .2s;
}
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--wine-bright); transition: width .25s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--milk); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.ham span { display: block; width: 22px; height: 1.5px; background: var(--milk); transition: transform .3s, opacity .3s; }
.ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 59;
  background: rgba(25,26,30,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
  padding: 26px var(--edge) 30px; display: flex; flex-direction: column; gap: 4px;
  transform: translateY(calc(-100% - var(--nav-h) - 24px)); transition: transform .35s ease; pointer-events: none;
}
.drawer.open { transform: none; pointer-events: all; }
.drawer a { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--milk-dim); padding: 13px 0; border-bottom: 1px solid var(--line); }
.drawer a.active { color: var(--wine-bright); }
@media (max-width: 780px) { .nav-links { display: none; } .ham { display: flex; } }

/* ── SECTION SHELL ── */
.sec { padding: clamp(64px, 10vh, 120px) var(--edge); position: relative; }
.sec-label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wine-bright); display: flex; align-items: center; gap: 10px; }
.sec-label::before { content: ''; width: 24px; height: 1px; background: var(--wine-bright); display: inline-block; }
.sec-title { font-family: var(--f-display); font-weight: 500; font-style: normal; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin-top: 14px; letter-spacing: -.01em; }
.sec-subtitle { margin-top: 16px; color: var(--milk-dim); font-size: 1rem; max-width: 640px; line-height: 1.7; }

/* ── HERO ── */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 40px) var(--edge) 60px; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--charcoal) 0%, #1f1613 55%, var(--wine-deep) 140%);
  opacity: .55; z-index: -1;
}
.hero-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: 26px; }
.hero-tag .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--wine-bright); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.hero-tag .tc { color: var(--milk-faint); }
.hero-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.8rem, 9vw, 6.6rem); line-height: .96; letter-spacing: -.02em; }
.hero-name em { font-style: italic; color: var(--sand); }
.hero-role { font-family: var(--f-mono); font-size: clamp(.85rem,1.6vw,1.05rem); letter-spacing: .06em; text-transform: uppercase; color: var(--woodland); margin-top: 22px; display: flex; gap: 12px; align-items: center; }
.hero-sub { margin-top: 26px; max-width: 580px; color: var(--milk-dim); font-size: 1.08rem; line-height: 1.75; }
.hero-cta-row { display: flex; gap: 18px; margin-top: 40px; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 28px; left: var(--edge); display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--milk-faint); }
.hero-scroll .line { width: 1px; height: 34px; background: linear-gradient(var(--sand), transparent); display: block; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 14px 30px; transition: all .25s ease; border: 1px solid transparent; cursor: pointer;
}
.btn-solid { background: var(--wine); color: var(--milk); }
.btn-solid:hover { background: var(--wine-bright); }
.btn-outline { border-color: var(--line-2); color: var(--milk-dim); }
.btn-outline:hover { border-color: var(--sand); color: var(--milk); }

/* ── WORKED WITH TICKER ── */
.ticker-wrap { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.ticker { display: flex; gap: 48px; width: max-content; animation: tick 32s linear infinite; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--milk-faint); white-space: nowrap; }
.ticker-item b { color: var(--sand); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }

/* ── SHOWREEL ── */
.showreel-frame {
  position: relative; aspect-ratio: 16/9; background: var(--charcoal-2); border: 1px solid var(--line);
  margin-top: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.showreel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.showreel-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--milk-faint); font-family: var(--f-mono); font-size: .74rem; text-align: center; padding: 30px; }
.showreel-ph .play { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--sand); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--sand); }

/* ── FILTER BAR ── */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.filter-btn { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--milk-dim); border: 1px solid var(--line-2); padding: 9px 18px; background: none; cursor: pointer; transition: all .2s; }
.filter-btn:hover { border-color: var(--sand); color: var(--milk); }
.filter-btn.active { background: var(--wine); border-color: var(--wine); color: var(--milk); }

/* ── PORTFOLIO GRID ── */
.port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; }
.port-card { background: var(--charcoal); display: flex; flex-direction: column; position: relative; }
.port-thumb { aspect-ratio: 4/3; background: var(--charcoal-2); position: relative; overflow: hidden; }
.port-thumb-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--milk-faint); font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; background: repeating-linear-gradient(135deg, var(--charcoal-2), var(--charcoal-2) 10px, var(--charcoal-3) 10px, var(--charcoal-3) 20px); }
.port-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.18) saturate(.85) contrast(1.05); }
.ph-icon { font-size: 1.6rem; opacity: .5; }
.port-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(25,26,30,0); opacity: 0; transition: all .3s; }
.port-card:hover .port-overlay { opacity: 1; background: rgba(25,26,30,.55); }
.port-watch { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--milk); padding: 9px 20px; color: var(--milk); }
.port-info { padding: 20px 22px 24px; }
.port-type { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wine-bright); }
.port-title { font-family: var(--f-display); font-size: 1.18rem; margin-top: 8px; line-height: 1.25; }
.port-meta { font-family: var(--f-mono); font-size: .68rem; color: var(--milk-faint); margin-top: 10px; letter-spacing: .02em; }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,6vw,90px); margin-top: 40px; align-items: start; }
.about-body p { color: var(--milk-dim); font-size: 1.06rem; line-height: 1.85; }
.about-body p + p { margin-top: 18px; }
.portrait-frame { position: relative; border: 1px solid var(--line-2); padding: 10px; background: var(--charcoal-2); }
.portrait-frame .portrait-crop { aspect-ratio: 3/4; overflow: hidden; background: var(--charcoal-3); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: sepia(.22) saturate(.85) contrast(1.05); }
.port-meta-row { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--milk-faint); margin-top: 12px; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-pill { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--milk-dim); border: 1px solid var(--line-2); padding: 7px 14px; transition: all .2s; }
.tag-pill:hover { border-color: var(--wine-bright); color: var(--milk); }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); margin-top: 50px; }
@media (max-width: 680px) { .skills-grid { grid-template-columns: 1fr; } }

/* ── TIMELINE (work experience, About) ── */
.timeline { margin-top: 44px; border-top: 1px solid var(--line); }
.tl-row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tl-date { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .05em; color: var(--sand); padding-top: 3px; }
.tl-role { font-family: var(--f-display); font-size: 1.12rem; }
.tl-org { font-family: var(--f-mono); font-size: .74rem; color: var(--milk-faint); margin-top: 4px; }
@media (max-width: 600px) { .tl-row { grid-template-columns: 1fr; gap: 6px; } }

/* ── CV VIEWER (2-page) ── */
.cv-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; max-width: 940px; }
.cv-embed { position: relative; aspect-ratio: 8.5/11; background: var(--charcoal-2); overflow: hidden; border: 1px solid var(--line); }
.cv-embed embed, .cv-embed iframe, .cv-embed img { width: 100%; height: 100%; object-fit: contain; border: none; display: block; }
.cv-embed .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--milk-faint); font-family: var(--f-mono); font-size: .72rem; text-align: center; padding: 30px; }
.cv-page-label { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--milk-faint); margin-top: 8px; text-align: center; }
.cv-panel-single { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
@media (max-width: 680px) { .cv-panel { grid-template-columns: 1fr; max-width: 460px; } }
.cv-download { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 22px; color: var(--milk-dim); border: 1px solid var(--line-2); padding: 12px 24px; transition: all .2s; }
.cv-download:hover { border-color: var(--wine-bright); color: var(--milk); }

/* ── ACADEMIC TEASER (index.html) ── */
.academic-teaser { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px,5vw,70px); align-items: center; margin-top: 40px; border: 1px solid var(--line); padding: clamp(30px,4vw,56px); background: var(--charcoal-2); }
.academic-teaser-num { font-family: var(--f-display); font-style: italic; font-size: clamp(3rem,7vw,5.4rem); color: var(--woodland-dim); line-height: 1; }
@media (max-width: 760px) { .academic-teaser { grid-template-columns: 1fr; } }

/* ── ACADEMIC HUB GRID — 2 columns, each card individually accented ── */
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 700px) { .proj-grid { grid-template-columns: 1fr; } }

.proj-card {
  background: var(--charcoal-2); border: 1px solid var(--line); display: grid;
  grid-template-columns: 132px 1fr; transition: border-color .3s, transform .3s; position: relative; overflow: hidden;
}
.proj-card:hover { border-color: var(--acc, var(--wine-bright)); transform: translateY(-2px); }
.proj-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc, var(--wine-bright)); }
.proj-thumb-link, .proj-body-link { display: block; color: inherit; }
.proj-thumb-link:hover .proj-play { transform: scale(1.12); }

.proj-thumb { aspect-ratio: 3/4; background: var(--charcoal-3); position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.proj-thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.85) contrast(1.05); }
.proj-thumb-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; color: var(--milk-faint); }
.proj-thumb-ph .icon { font-size: 1.5rem; color: var(--acc, var(--sand)); opacity: .8; }
.proj-thumb-ph .lbl { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .04em; line-height: 1.4; }
.proj-play { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--acc, var(--wine)); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: transform .2s; }
.proj-play span { color: var(--milk); font-size: .72rem; margin-left: 2px; }

.proj-card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.proj-card-num { font-family: var(--f-display); font-style: italic; font-size: 1.5rem; color: var(--acc, var(--woodland-dim)); line-height: 1; }
.proj-card-type { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--acc, var(--wine-bright)); margin-top: 6px; }
.proj-card-title { font-family: var(--f-display); font-size: 1.02rem; line-height: 1.3; margin-top: 2px; }
.proj-card-course { font-family: var(--f-mono); font-size: .62rem; color: var(--milk-faint); margin-top: 6px; }
.proj-card-arrow { margin-top: auto; padding-top: 12px; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--milk-faint); transition: color .2s; }
.proj-card:hover .proj-card-arrow { color: var(--acc, var(--wine-bright)); }
@media (max-width: 460px) { .proj-card { grid-template-columns: 96px 1fr; } }

/* ── ACADEMIC PROJECT PAGE (left doc / right overview) ── */
.proj-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); margin-top: 34px; align-items: start; }
.doc-viewer { background: var(--charcoal-2); border: 1px solid var(--line); position: relative; overflow: hidden; aspect-ratio: 8.5/11; }
.doc-viewer.video { aspect-ratio: 16/9; align-self: start; }
.doc-viewer embed, .doc-viewer iframe { width: 100%; height: 100%; border: none; display: block; }
.doc-viewer.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--milk-faint); font-family: var(--f-mono); font-size: .72rem; text-align: center; padding: 30px; }
.proj-overview p { color: var(--milk-dim); font-size: 1.04rem; line-height: 1.85; }
.proj-meta-list { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.proj-meta-row { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; }
.proj-meta-row span:first-child { color: var(--milk-faint); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
.proj-meta-row span:last-child { color: var(--milk); }
@media (max-width: 820px) { .proj-layout { grid-template-columns: 1fr; } }

.back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--milk-dim); margin-bottom: 30px; transition: color .2s; }
.back-link:hover { color: var(--wine-bright); }
.proj-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; gap: 16px; }
.proj-nav a { color: var(--milk-dim); transition: color .2s; }
.proj-nav a:hover { color: var(--wine-bright); }
.proj-nav a.disabled { color: var(--milk-faint); opacity: .35; pointer-events: none; }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px,5vw,80px); margin-top: 40px; }
.contact-items { display: flex; flex-direction: column; gap: 24px; }
.contact-detail-label { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--milk-faint); display: block; margin-bottom: 6px; }
.contact-detail-val { font-family: var(--f-display); font-size: 1.3rem; }
.contact-detail-val.link:hover { color: var(--wine-bright); }
.social-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.soc-btn { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-2); padding: 9px 16px; color: var(--milk-dim); transition: all .2s; }
.soc-btn:hover { border-color: var(--sand); color: var(--milk); }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-field label { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--milk-faint); }
.form-field input, .form-field textarea {
  background: var(--charcoal-2); border: 1px solid var(--line-2); color: var(--milk); font-family: var(--f-body); font-size: .95rem;
  padding: 13px 16px; outline: none; transition: border-color .2s; resize: none;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--wine-bright); }
.form-submit { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; background: var(--wine); color: var(--milk); border: none; padding: 15px 32px; cursor: pointer; transition: background .2s; width: 100%; }
.form-submit:hover { background: var(--wine-bright); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── CTA STRIP ── */
.cta-strip { text-align: center; padding: clamp(60px,9vh,110px) var(--edge); border-top: 1px solid var(--line); }
.cta-strip .contact-items { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: clamp(14px,3vw,36px); }

/* ── FOOTER ── */
.footer { border-top: 1px solid var(--line); padding: 26px var(--edge); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--milk-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .r, .rs > * { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}