.side-nav-item { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:15px; font-weight:500; color:var(--ink); border-radius:14px; transition:background .18s; }
.side-nav-item:hover { background:var(--lime); }
.side-nav-item .arrow { opacity:0; transition:opacity .18s, transform .18s; }
.side-nav-item:hover .arrow { opacity:1; transform:translateX(2px); }

@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProLig.otf') format('opentype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProLigIta.otf') format('opentype'); font-weight:300; font-style:italic; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProReg.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProIta.otf') format('opentype'); font-weight:400; font-style:italic; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProMed.otf') format('opentype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProMedIta.otf') format('opentype'); font-weight:500; font-style:italic; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProBol.otf') format('opentype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProBolIta.otf') format('opentype'); font-weight:500; font-style:italic; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProBla.otf') format('opentype'); font-weight:900; font-style:normal; }
@font-face { font-family:'Gotham Pro'; src:url('./uploads/GothaProBlaIta-85dbd18f.otf') format('opentype'); font-weight:900; font-style:italic; }
@font-face { font-family:'Apercu Pro'; src:url('./uploads/ApercuPro-Regular.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Apercu Pro'; src:url('./uploads/ApercuPro-Light.otf') format('opentype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Apercu Mono'; src:url('./uploads/ApercuPro-Mono.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Decima Round'; src:url('./uploads/Decima Round A Bold.otf') format('opentype'); font-weight:500; font-style:normal; }

:root {
  --font-heading:'Gotham Pro',sans-serif;
  --font-body:'Apercu Pro',sans-serif;
  --font-mono:'Apercu Mono',ui-monospace,monospace;
  --bg: #DCE2E8;
  --bg-2: #CDD3DA;
  --surface: #FAF7EF;
  --surface-2: #F3EFE3;
  --line: #D6D2C5;
  --line-strong: #BCB7A8;
  --ink: #15140F;
  --ink-dim: #6E6960;
  --muted: #A8A29A;
  --lime: #EBFF00;
  --lime-hot: #E0F500;
  --green: #2DBF6E;
}
* { box-sizing:border-box; margin:0; padding:0; }
*::selection { background:var(--lime); color:var(--ink); }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.4;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-heading) !important; font-variation-settings:normal !important; font-style:normal !important; }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(45,191,110,.55); }
  70%  { box-shadow:0 0 0 10px rgba(45,191,110,0); }
  100% { box-shadow:0 0 0 0 rgba(45,191,110,0); }
}
@keyframes heroGradient {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* Mobile menu drawer (always in DOM; toggled by data-open) */
.dt-mobile-menu {
  position:fixed; inset:0;
  background:rgba(220,226,232,0.98);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  z-index:100;
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:12px;
  pointer-events:none;
}
.dt-mobile-menu[data-open="true"] {
  transform:translateX(0);
  pointer-events:auto;
}
.dt-mobile-menu-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 8px;
  font-size:22px; font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:background .18s;
}
.dt-mobile-menu-item .arrow { color:var(--ink-dim); opacity:.5; transition:transform .18s, opacity .18s; }
.dt-mobile-menu-item:hover, .dt-mobile-menu-item:active { background:var(--lime); }
.dt-mobile-menu-item:active .arrow { transform:translateX(2px); opacity:1; }

/* Fades tied to contact-section visibility */
.dt-hide-on-contact { transition:opacity .35s ease, transform .35s ease; }
.dt-hide-on-contact[data-contact="true"] { opacity:0; transform:translateY(16px); pointer-events:none; }
.dt-show-on-contact { opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .35s ease, transform .35s ease; }
.dt-show-on-contact[data-contact="true"] { opacity:1; transform:none; pointer-events:auto; }
@media (max-width: 900px) {
  .dt-show-on-contact { opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  .dt-hide-on-contact { opacity:1 !important; transform:none !important; pointer-events:auto !important; }
}

/* Mobile header hidden on desktop */
.dt-mobile-header { display:none; }

.dt-contact-title { grid-area:title; }
.dt-contact-cta { grid-area:cta; }
.dt-contact-links { grid-area:links; }
@media (max-width: 900px) {
  .dt-layout { grid-template-columns:1fr !important; padding:6px !important; }
  .dt-sidebar { display:none !important; }
  .dt-main { gap:6px !important; }
  .dt-mobile-header { display:flex !important; }
  .dt-2col { grid-template-columns:1fr !important; gap:20px !important; }
  .dt-contact-grid { grid-template-areas:'title' 'links' 'cta' !important; grid-template-rows:auto auto auto !important; }
  .dt-contact-cta { align-self:auto !important; align-items:stretch !important; }
  .dt-contact-cta-btn { width:100% !important; box-sizing:border-box !important; }
  .dt-works-section { padding:24px 12px !important; }
  .dt-work-cover { width:100% !important; margin-left:0 !important; }
}

@media (max-width: 400px) {
  .dt-mobile-logo-name { display:none !important; }
  .dt-mobile-cta { padding:11px 14px !important; font-size:12px !important; }
}

.dt-mobile-cta[data-contact="true"] { opacity:0; transform:translateY(-8px); pointer-events:none; }

/* ── Case pages (works/*.html) ───────────────────────────────────────────
   Kept in this file rather than a works.css so the deploy allowlist stays
   three entries long; a fourth file would need a line in deploy.sh,
   .dockerignore and the Dockerfile COPY list to ship at all. */

.case-back {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim);
  transition:color .18s;
}
.case-back:hover { color:var(--ink); }

.case-tag {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim); opacity:.6;
}

/* Mirrors .dt-work-cover on the homepage so a tile and its case page frame
   the same image identically. The optional inline background shows through
   for covers that do not fill the frame (Dom.ru, Skyeng). */
.case-cover {
  overflow:hidden; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
}
.case-cover img {
  display:block; width:100%; height:auto; object-fit:contain;
}
.case-cover[style*="background"] img {
  width:auto; max-width:100%; max-height:70vh;
}

/* Unstyled until a write-up exists — see the WRITE-UP comment in each page. */
.case-prose { max-width:68ch; display:flex; flex-direction:column; gap:24px; }
.case-prose h2 { font-weight:500; font-size:clamp(18px,1.4vw,24px); letter-spacing:-.01em; }
.case-prose p  { font-size:clamp(15px,1.1vw,18px); line-height:1.6; color:var(--ink-dim); }

.case-next { max-width:1600px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; }
.case-next a { display:flex; flex-direction:column; gap:6px; flex:1 1 0; }
.case-next__label { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); opacity:.6; }
.case-next__title { font-family:var(--font-heading); font-weight:400; font-size:clamp(18px,1.6vw,28px); letter-spacing:-.02em; color:var(--ink); transition:opacity .18s; }
.case-next a:hover .case-next__title { opacity:.6; }

@media (max-width: 900px) {
  .case-next { flex-direction:column; }
  .case-next a[style*="right"] { text-align:left !important; }
}