/* ================================
   SYSTEM CSS — Home + Cases
   No case-specific selectors.
   ================================ */

:root{
  /* Core */
  --bg:#F9F9F7;
  --text:#111111;
  --muted:#6b7280;
  --line:#d1d5db;
  --lineSoft:#e5e7eb;
  --accent:#f97316;

  /* Layout */
  --container-max:1536px;
  --pad-mobile:24px;
  --pad-desktop:48px;

  /* Rhythm */
  --space-xs:8px;
  --space-sm:14px;
  --space-md:28px;
  --space-lg:56px;
  --space-xl:96px;

  /* Chips */
  --chip-bg: rgba(255,255,255,.40);
  --chip-border: rgba(17,17,17,.10);
  --chip-text: #111111;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:rgba(249,115,22,.25);color:#7c2d12;}
a{color:inherit;text-decoration:none;}

/* Container */
.container{
  width:min(100% - (var(--pad-mobile) * 2), var(--container-max));
  margin-inline:auto;
}
@media (min-width:768px){
  .container{
    width:min(100% - (var(--pad-desktop) * 2), var(--container-max));
  }
}

/* Type utilities */
.font-mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.tight-heading{letter-spacing:-0.03em;line-height:0.95;}
.mono-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#888;
}
.muted{color:#9ca3af;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  padding:12px 14px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease,transform .2s ease, background .2s ease;
  background:transparent;
}
.btn:hover{
  border-color:#111;
  color:#111;
  transform:translateY(-1px);
  background:rgba(255,255,255,.25);
}

/* ================================
   NAV
   ================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  background:rgba(249,249,247,.80);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lineSoft);
}
@media (min-width:768px){.nav{padding:18px 48px;}}
.nav__brand{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.nav__brandMark{color:var(--accent);}
.nav__links{display:flex;gap:24px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;}
.nav__link:hover{color:#111;}

/* ================================
   HOME — HERO
   ================================ */

.hero{
  padding-top:calc(112px + 6vh);
  padding-bottom:calc(var(--space-lg) + 6vh);
  border-bottom:1px solid var(--line);
  min-height:85vh;
}

@media (min-width:768px){
  .hero{
    padding-top:calc(128px + 6vh);
  }
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  align-items:flex-end;
}

@media (min-width:768px){
  .hero__grid{
    grid-template-columns:4fr 8fr;
    gap:64px;
  }
}

.hero__lead{
  margin:0;
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  max-width:50ch;
}

@media (min-width:768px){
  .hero__lead{
    font-size:20px;
  }
}

.hero__accent{
  width:40px;
  height:2px;
  background:var(--accent);
  margin:20px 0;
}

.hero__support{
  margin:0;
  margin-top:14px;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:60ch;
}

@media (min-width:768px){
  .hero__support{
    font-size:17px;
  }
}

.hero__cta{
  margin-top:28px;
}

.hero__right{
  display:flex;
  justify-content:flex-end;
}

.hero__title{
  margin:0;
  text-transform:uppercase;
  text-align:right;
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:0.95;
  font-size:64px;
}

@media (min-width:768px){
  .hero__title{
    font-size:104px;
  }
}

@media (min-width:1024px){
  .hero__title{
    font-size:140px;
  }
}

@media (max-width:767px){
  .hero__grid{
    gap:32px;
  }

  .hero__title{
    text-align:left;
    font-size:44px;
    line-height:1;
  }
}

/* =====================================
   WORK — 33 / 66 EDITORIAL SYSTEM
===================================== */
/* ===============================
   WORK — FINAL POLISH
=============================== */

.work{
  padding: 140px 0;
}

.workStack{
  display: grid;
  gap: 40px;
}

/* CARD */
.workCase{
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--lineSoft);
  border-radius: 20px;
  background: rgba(255,255,255,.35);
  transition:
    border-color .2s ease,
    transform .25s ease;
}

.workCase:hover{
  border-color: rgba(17,17,17,.28);
  transform: translateY(-2px);
}

/* LAYOUT */
.workCase__layout{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  padding: 28px;
}

@media (max-width: 900px){
  .workCase__layout{
    grid-template-columns: 1fr;
  }
}

/* LEFT */
.workCase__info{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: center; /* 🔑 vertical centering */
}

.workCase__top{
  color: #9ca3af;
  display: flex;
  gap: 12px;
}

.workCase__impact{
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--accent); /* single orange */
  transition: color .2s ease;
}

.workCase__title{
  font-size: 20px;
  font-weight: 800;
}

.workCase__meta{
  color: #6b7280;
}

.workCase__cta{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* subtle accent on hover */
.workCase:hover .workCase__impact{
  color: color-mix(in srgb, var(--accent), black 15%);
}

/* RIGHT */
.workCase__media{
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform .35s ease;
}

.workCase:hover .workCase__media{
  transform: scale(1.02);
}

.workCase__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ================================
   HOME — ABOUT
   ================================ */
.about{border-top:1px solid var(--lineSoft);padding:120px 0;}
.about__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;}
@media (min-width:1024px){.about__grid{grid-template-columns:1.15fr .85fr;gap:72px;}}
.about__title{margin:0;font-size:44px;font-weight:800;letter-spacing:-0.02em;}
@media (min-width:768px){.about__title{font-size:56px;}}
.about__body{margin-top:18px;font-size:18px;line-height:1.75;font-weight:300;max-width:88ch;}
.about__body p{margin:0 0 16px 0;color:#374151;}
.about__closing{margin-top:18px;padding-left:16px;border-left:2px solid var(--accent);}
.about__closing p{margin:0;color:#111;font-weight:400;}
.about__cta{margin-top:26px;}
.aboutSide{padding-top:8px;}

.panel{margin-bottom:36px;}
.panel__title{padding-bottom:10px;border-bottom:1px solid var(--lineSoft);color:#111;font-weight:800;}
.panel__desc{margin:12px 0 16px 0;font-size:13px;line-height:1.6;color:#4b5563;}

.map{margin-top:10px;display:grid;gap:10px;}
.mapRow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:18px;padding:6px 0;}
.mapLeft{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:#111;}
.mapRight{font-size:11px;letter-spacing:.10em;text-transform:uppercase;text-align:right;}

.timeline{list-style:none;padding:0;margin:12px 0 0 0;display:grid;gap:14px;}
.timelineItem{padding-top:12px;border-top:1px solid var(--lineSoft);}
.timelineMain{display:flex;flex-direction:column;gap:4px;}
.timelineTitle{font-weight:700;color:#111;}
.timelineSub{font-size:12px;letter-spacing:.06em;text-transform:uppercase;}

.panel--toolkit{margin-top:6px;}
.toolkit{margin-top:14px;display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:900px){.toolkit{grid-template-columns:repeat(3,1fr);gap:18px;}}
.toolkitCol{display:flex;flex-direction:column;min-width:0;}
.toolkitCol__title{margin:0 0 10px 0;font-size:13px;font-weight:700;color:#111;line-height:1.2;}
.toolkitList{list-style:none;padding:0;margin:0;display:grid;grid-auto-rows:1fr;gap:8px;align-content:stretch;height:100%;}
.toolkitItem{
  position:relative;display:flex;align-items:center;min-height:44px;
  padding:10px 10px 10px 14px;border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.35);font-size:13px;color:#111;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:520px){.toolkitItem{white-space:normal;min-height:52px;line-height:1.25;}}
.toolkitItem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.toolkitItem:hover{background:rgba(255,255,255,.55);border-color:rgba(17,17,17,.12);}

/* ================================
   HOME — CONTACT
   ================================ */
.contact{border-top:1px solid var(--line);background:#fff;padding:72px 0;}
.contact__grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:end;}
@media (min-width:768px){.contact__grid{grid-template-columns:1fr 1fr;}}
.contact__title{margin:10px 0 0 0;font-size:56px;font-weight:800;letter-spacing:-.02em;}
@media (min-width:768px){.contact__title{font-size:84px;}}
.contact__right{text-align:left;}
@media (min-width:768px){.contact__right{text-align:right;}}
.contact__mail{
  font-size:22px;font-weight:300;text-decoration:underline;
  text-decoration-color:rgba(249,115,22,.65);text-underline-offset:6px;
}
@media (min-width:768px){.contact__mail{font-size:32px;}}
.contact__meta{display:flex;gap:18px;justify-content:flex-start;margin-top:18px;}
@media (min-width:768px){.contact__meta{justify-content:flex-end;}}

/* =========================================
   CASE SYSTEM — Movements (A–E)
   No case-specific selectors.
   ========================================= */

/* Keep anchors readable under fixed nav */
.movement{scroll-margin-top:110px;}

.caseMain{
  padding-top: calc(var(--space-xl) - 8px); /* gives breathing room under fixed nav */
  padding-bottom: var(--space-xl);
}

/* Base movement */
.movement{
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--lineSoft);
}
.movement:last-of-type{border-bottom:none;}

/* Movement header/body */
.movement__header{display:grid;gap:var(--space-sm);}
.movement__kicker{color:#9ca3af;}
.movement__title{
  margin:0 0 var(--space-sm) 0; /* FIX: more air below title */
  font-weight:900;
  letter-spacing:-0.035em;
  line-height:1.05;
  font-size: clamp(34px, 4.2vw, 64px);
  max-width: 26ch;
}
.movement__subtitle{
  margin:0;
  font-size:18px;
  line-height:1.75;
  font-weight:300;
  color:#374151;
  max-width: 78ch;
}
.movement__body{
  font-size:18px;
  line-height:1.75;
  font-weight:300;
  color:#374151;
  max-width: 80ch;
}
.movement__body p{margin:0 0 var(--space-sm) 0;} /* FIX: consistent paragraph rhythm */
.movement__body p:last-child{margin-bottom:0;}

/* Role variants */
.movement--declaration{
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}
.movement--context{
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.movement--context .movement__body{max-width: 70ch;}
.movement--decision{
  padding-block: var(--space-lg);
}
.movement--system{
  padding-block: var(--space-xl);
}
.movement--closure{
  padding-top: var(--space-xl); /* FIX: stronger pause before closure */
  padding-bottom: var(--space-xl);
}
.movement--closure .movement__body{max-width: 60ch;}

/* Movement layout grid (optional helper) */
.movement__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items:start;
}
@media (min-width:1024px){
  .movement__grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items:center; /* FIX: vertical centering of text/image pairs */
  }
}

/* Media roles */
.movement-media{
  margin:0;
  border:1px solid var(--lineSoft);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.movement-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.movement-media--hero{
  aspect-ratio: 16 / 9;
  margin-top: var(--space-md);
}
.movement-media--primary{
  aspect-ratio: 16 / 9;
  margin-top: var(--space-md);
}
.movement-media--supporting{
  aspect-ratio: 4 / 3;
  margin-top: var(--space-sm);
}

/* Caption (optional) */
.movement-caption{
  margin:0;
  padding:10px 12px;
  border:1px solid var(--lineSoft);
  border-top:none;
  background:#fff;
  color:#b6bcc6;
  font-size:12px;
  letter-spacing:.06em;
}

/* Inline emphasis block */
.movement-emphasis{
  margin-top: var(--space-sm);
  padding: 14px 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.35);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  font-weight: 600;
  color: #111;
  max-width: 80ch;
}

/* Case meta row */
.caseMeta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-top: var(--space-xs);
}
.caseMeta .mono-label{color:#9ca3af;}
.caseMeta__dot{color:#cbd5e1;}

/* Case nav */
.caseNav{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding-top: var(--space-md);
}
.caseNav__backLink{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9ca3af;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.caseNav__backLink:hover{color:#111;border-color:#111;}
.caseNav__next{text-align:right;max-width:44ch;}
.caseNav__nextLink{display:inline-block;margin-top:8px;}
.caseNav__nextTitle{
  display:block;
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.caseNav__nextLink:hover .caseNav__nextTitle{color:var(--accent);}

/* =========================================
   MEDIA — VARIABLE RATIO SUPPORT (SYSTEMIC)
   ========================================= */

/* Allow media ratio override when needed */
.movement-media[data-ratio="vertical"]{
  aspect-ratio: 3 / 4;
}

.movement-media[data-fit="contain"] img{
  object-fit: contain;
  background: #fff;
}

/* =========================================
   SYSTEM — Vertical UI Snapshot (Catalog / Dashboard / Tools)
   Role-based media variant (no case hacks)
   ========================================= */

/* Vertical MVP container (catalog view) */
.movement-media--mvp {
  aspect-ratio: 4 / 5;          /* Vertical: shows 2+ product rows */
  max-width: 680px;             /* Prevents over-scaling */
  margin-inline: auto;          /* Centers inside movement */
  background: #ffffff;
}

/* Image behavior: preserve all UI information */
.movement-media--mvp img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* CRITICAL: no cropping */
  background: #ffffff;
}

/* Optional refinement for large screens */
@media (min-width: 1200px) {
  .movement-media--mvp {
    max-width: 760px;
  }
}