/* Hallmark · shape: editorial case-study sequence · genre: editorial · theme: HughesNet project palette · redesign: full
 * paper: white · accent: HughesNet blue · display: Georgia · body: Inter · hero: dashboard-led · nav: quiet contents rail · footer: typographic return · signature: customer dashboard
 * axes: light/roman-serif/chromatic-blue · posture: restrained · contrast: reviewed · fold: responsive · v2.0.0 */
/* Hallmark · pre-emit critique: replaced stacked override layers with one token-led page system; preserved project narrative, SVG evidence, route links, section anchors, and keyboard navigation. Long case-study length retained by request. */
@import url("./tokens.css");
@import url("./base.css");

:root { --page-width: 1680px; --rail-width: 190px; --rail-gap: clamp(48px, 7vw, 112px); }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-32); }
body { min-width: 320px; }
.skip-link { position: fixed; z-index: var(--z-modal); top: var(--space-xs); left: var(--space-xs); padding: var(--space-sm) var(--space-md); transform: translateY(-150%); background: var(--color-ink); color: var(--color-paper); }
.skip-link:focus { transform: translateY(0); }

.case-layout { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); gap: var(--rail-gap); align-items: start; max-width: var(--page-width); margin: 0 auto; padding: 48px clamp(32px, 6vw, 100px) 0; }
.sidebar { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 28px); padding: 18px 0; color: var(--color-ink); background: transparent; font: 400 16px/1.5 var(--font-body); }
.portfolio-back-link { display: inline-flex; align-items: center; width: fit-content; margin: 0 0 16px 15px; padding: 4px 0; color: var(--color-muted); font-size: var(--type-caption); line-height: 1.4; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.portfolio-back-link:hover { color: var(--color-accent-ink); }
.brand { display: none; }
.nav-disclosure { display: block; }
.nav { display: block; margin: 0; font: 400 16px/1.5 var(--font-body); }
.nav-track { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-track li { min-width: 0; }
.nav a { position: relative; display: block; min-width: 0; padding: 6px 0 6px 15px; color: var(--color-muted); font-size: 16px; font-weight: 400; line-height: 1.5; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav a:hover, .nav a.active { color: var(--color-ink); }
.nav a.active { font-weight: 500; }
.nav a.active::before { position: absolute; inset: 7px auto 7px 0; width: 1px; background: var(--color-accent); content: ""; }
.menu-toggle { display: none; }

.main { width: 100%; max-width: 1200px; min-width: 0; margin: 0; }
.slide { min-width: 0; padding-block: var(--section-gap); border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.slide:first-child { padding-top: var(--space-3xl); }
.inner, .journey-inner, .audit-inner, .showcase-inner, .ds-wrap { width: 100%; max-width: var(--page-width); margin-inline: auto; }
.eyebrow, .audit-kicker { margin: 0 0 var(--space-20); color: var(--color-accent-ink); font-size: var(--type-caption); font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; }
h1, h2, h3, h4 { min-width: 0; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.06; text-wrap: balance; }
h1 { max-width: 22ch; font-size: var(--type-display); }
h2 { max-width: 18ch; font-size: var(--type-display); }
h3 { font-size: var(--type-heading); line-height: 1.2; }
h4 { font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
p { max-width: 68ch; margin: 0; color: var(--color-muted); font-size: var(--type-body); line-height: 1.7; text-wrap: pretty; }
.lead { max-width: 58ch; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--type-body); line-height: 1.55; }
.small, figcaption, .caption { color: var(--color-muted); font-size: var(--type-caption); line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { transition: color var(--dur-short) var(--ease-out); }

/* Overview: concise project statement and compact metadata lead into the dashboard. */
#slide-1 { padding-top: var(--space-48); }
#slide-1 .eyebrow { margin-bottom: var(--space-20); }
#slide-1 h1 { max-width: 22ch; }
#slide-1 > .inner > .lead { max-width: 700px; margin-top: var(--space-lg); }
.hero-intro { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr); gap: var(--space-xl); align-items: start; margin-top: var(--space-32); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.minihead { margin-bottom: var(--space-2xs); color: var(--color-accent-ink); font-size: var(--type-caption); font-weight: 500; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.metadata-value, .scope-items { color: var(--color-ink-2); font-size: var(--type-body); line-height: 1.5; }
.project-scope { justify-self: start; width: 100%; max-width: none; }
.hero-visual { margin: var(--space-36) 0 0; }
.hero-visual img { width: 100%; height: auto; }
.hero-visual figcaption { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }

/* Challenge and evidence: open editorial columns, not repeated cards. */
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin-top: var(--space-52); border-top: 1px solid var(--color-rule); }
.tile { min-width: 0; padding: var(--space-20) 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.metric { margin-bottom: var(--space-md); color: var(--color-accent-ink); font: 400 var(--type-display)/1 var(--font-display); letter-spacing: -.04em; }
.tile b { display: block; margin-bottom: var(--space-xs); color: var(--color-ink); font-size: var(--type-heading); font-weight: 500; line-height: 1.2; }
.tile p { font-size: var(--type-body); }

/* User journey: full-width evidence with an explicit research limitation. */
.journey-section { padding-block: clamp(var(--space-76), 9vw, var(--space-120)); }
.journey-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: var(--gap-columns); align-items: end; }
.journey-head h2 { max-width: 15ch; }
.journey-head p { justify-self: end; max-width: 48ch; }
.journey-art { margin-top: var(--space-xl); background: transparent; border: 0; box-shadow: none; }
.journey-art img { width: 100%; height: auto; }
.journey-art a { display: block; }
.journey-art:focus-visible { outline-offset: var(--space-2xs); }

/* Original experience: a compact two-column editorial audit. */
.audit-inner { width: 100%; }
.audit-kicker { margin-bottom: var(--space-20); }
.audit-heading { margin-bottom: var(--space-32); }
.audit-heading .audit-kicker { text-transform: uppercase; }
.audit-heading h2 { max-width: 22ch; text-align: left; }
.audit-layout { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); gap: var(--gap-columns); align-items: start; }
.audit-visual { min-width: 0; max-width: 560px; margin: 0; padding: 0; background: transparent; }
.audit-topline { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--type-caption); }
.audit-original { display: block; width: 100%; height: auto; background: var(--color-image-paper); }
.audit-bottomline { display: block; padding-top: var(--space-sm); color: var(--color-muted); font-size: var(--type-caption); }
.audit-findings { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: audit-finding; }
.audit-finding { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.audit-index { padding-top: var(--space-3xs); color: var(--color-accent-ink); font-size: var(--type-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.audit-index::before { counter-increment: audit-finding; content: "0" counter(audit-finding); }
.audit-finding-title { display: block; margin: 0 0 var(--space-2xs); color: var(--color-ink); font-size: var(--type-body); font-weight: 700; line-height: 1.4; }
.audit-finding p { max-width: 48ch; color: var(--color-muted); font-size: var(--type-body); line-height: 1.55; }
.audit-takeaway { margin-top: var(--space-28); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-ink); font-size: var(--type-body); line-height: 1.55; }
.audit-takeaway span { color: var(--color-accent-ink); font-weight: 500; }

/* Strategy: a single horizontal information hierarchy. */
.panel { margin-top: var(--space-xl); padding: 0; border: 0; border-top: 1px solid var(--color-rule); border-radius: 0; background: transparent; box-shadow: none; }
.panel > .minihead { padding-top: var(--space-md); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-20); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.step { display: block; padding: var(--space-md) var(--space-sm) var(--space-md) 0; color: var(--color-ink); font-size: var(--type-body); line-height: 1.4; }
.step + .step { padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }
.step::first-letter { color: var(--color-accent-ink); }
.panel .small { margin-top: var(--space-sm); }

/* Exploration: three visual stages with captions directly below the artifacts. */
.wireframe-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-48); }
.wireframe-item { min-width: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.wireframe-top { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-md); }
.wireframe-number { color: var(--color-accent-ink); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.wireframe-top h3 { font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; letter-spacing: -.02em; }
.wireframe-visual { display: block; width: 100%; background: var(--color-wire-paper); }
.wireframe-visual img { width: 100%; height: auto; transition: transform var(--dur-long) var(--ease-out); }
.wireframe-visual:hover img { transform: none; }
.wireframe-item h4 { margin-top: var(--space-20); }
.wireframe-item p { margin-top: var(--space-xs); font-size: var(--type-body); }
.wireframe-disclaimer { max-width: 82ch; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--type-caption); }

/* Iteration: four concise account-condition decisions. */
.iteration-inner > h2 { max-width: 24ch; }
.iteration-intro { max-width: 58ch; margin-top: var(--space-md); }
.iteration-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: var(--space-36) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.iteration-decision { min-width: 0; padding: var(--space-md) 0 var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.iteration-decision-heading { display: flex; align-items: baseline; gap: var(--space-sm); }
.iteration-number { flex: 0 0 24px; color: var(--color-accent); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.iteration-decision-title { color: var(--color-ink); font-size: var(--type-body); font-weight: 700; line-height: 1.4; }
.iteration-rationale { margin: var(--space-xs) 0 0 36px; color: var(--color-muted); font-size: var(--type-body); line-height: 1.55; }
.iteration-action { margin: var(--space-sm) 0 0 36px; padding-left: var(--space-sm); border-left: 1px solid var(--color-accent); color: var(--color-ink-2); font-size: var(--type-body); line-height: 1.55; }

/* Light and dark components form a distinct visual chapter. */
.component-section { padding-block: clamp(var(--space-80), 10vw, var(--space-136)); }
.component-showcase-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-32); }
.component-showcase-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -var(--space-lg); }
.component-showcase-heading h3 { max-width: 14ch; font-size: var(--type-heading); }
.component-showcase-heading p { justify-self: end; max-width: 46ch; font-size: var(--type-body); }
.component-theme-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 5vw, 80px); scroll-margin-top: var(--space-xl); }
.component-theme-figure { min-width: 0; margin: 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.component-theme-top { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--color-muted); font-size: var(--type-caption); letter-spacing: 0; }
.component-theme-figure img { width: 100%; height: auto; background: var(--color-component-paper); }
.component-theme-figure.dark img { background: var(--color-night); color: var(--color-paper); }
.component-theme-figure figcaption { margin-top: var(--space-xs); }

/* Final design: one large dashboard image; no second instance elsewhere. */
.showcase-slide { padding-block: clamp(var(--space-84), 10vw, var(--space-148)); }
.showcase-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .7fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-xl); }
.showcase-heading h2 { max-width: 13ch; }
.showcase-intro { justify-self: end; max-width: 44ch; font-size: var(--type-body); }
.showcase-stage { padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.showcase-stage-top, .showcase-stage-bottom { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--type-caption); letter-spacing: 0; }
.showcase-stage-top { align-items: center; padding-bottom: var(--space-sm); }
.showcase-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.showcase-main-shot { overflow: hidden; background: var(--color-stage); }
.showcase-image { width: 100%; height: auto; }
.showcase-stage-bottom { padding-top: var(--space-sm); letter-spacing: 0; }
.showcase-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-52); }
.showcase-feature { padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.showcase-feature-num { color: var(--color-accent-ink); font-size: var(--type-caption); letter-spacing: 0; }
.showcase-feature h3 { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; letter-spacing: -.02em; }
.showcase-feature p { margin-top: var(--space-xs); font-size: var(--type-body); }
.showcase-footer { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-44); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--type-caption); letter-spacing: 0; }

/* Design system: retain the full vertical artwork and its original ratio. */
.ds-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-36); }
.ds-heading h2 { max-width: 11ch; }
.ds-heading p { justify-self: end; max-width: 48ch; font-size: var(--type-body); }
.ds-frame { width: min(100%, 900px); margin-inline: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.ds-frame-header, .ds-caption { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--type-caption); letter-spacing: 0; }
.ds-frame-header { margin-bottom: var(--space-sm); }
.ds-artwork { width: 100%; height: auto; }
.ds-caption { margin-top: var(--space-sm); letter-spacing: 0; }

/* Outcomes and reflection close with evidence limits, not invented effect sizes. */
.outcome { color: var(--color-ink); font: 400 var(--type-heading)/1.3 var(--font-display); }
.outcome-note { margin-top: var(--space-20); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.reflection-copy { max-width: 70ch; margin-top: var(--space-lg); }
.reflection-copy > p { margin: 0; font-size: var(--type-body); line-height: 1.65; }
.reflection-copy .reflection-takeaway { margin-top: var(--space-md); color: var(--color-ink); font-weight: 600; }
@media (max-width: 1100px) {
  :root { --rail-width: 150px; --rail-gap: var(--space-44); --gutter: 36px; }
  .main { width: calc(100% - var(--rail-width) - var(--rail-gap) - 72px); }
  .journey-head, .showcase-heading, .ds-heading { gap: var(--space-32); }
}
@media (max-width: 760px) {
  :root { --rail-width: 0px; --rail-gap: 0; --gutter: 20px; --type-display: clamp(36px, 10vw, 44px); --type-heading: 22px; }
  .sidebar { position: sticky; top: 0; inset-inline: 0; width: 100%; min-height: 0; padding: var(--space-md) var(--gutter) var(--space-sm); border-bottom: 1px solid var(--color-rule); }
  .brand { font-size: var(--type-caption); }
  .menu-toggle { display: inline-flex; position: absolute; top: var(--space-sm); right: var(--gutter); align-items: center; gap: var(--space-xs); border: 0; padding: var(--space-xs) 0 var(--space-xs) var(--space-sm); background: transparent; color: var(--color-ink); font-size: var(--type-caption); cursor: pointer; list-style: none; }
  .menu-toggle::-webkit-details-marker { display: none; }
  .menu-toggle::after { content: "+"; color: var(--color-accent-ink); font-size: var(--type-body); line-height: 1; }
  .nav-disclosure[open] .menu-toggle::after { content: "−"; }
  .nav { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); max-height: min(65vh, 440px); overflow-y: auto; margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
  .nav-disclosure:not([open]) > .nav { display: none; }
  .nav-disclosure[open] > .nav { display: grid; }
  .nav a { padding-left: var(--space-sm); font-size: 16px; }
  .main { width: auto; margin: 0 var(--gutter); }
  .slide { padding-block: var(--space-72); }
  .slide:first-child { padding-top: var(--space-48); }
  .hero-intro, .journey-head, .showcase-heading, .ds-heading, .component-showcase-heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .project-scope, .journey-head p, .showcase-intro, .ds-heading p, .component-showcase-heading p { justify-self: start; }
  .hero-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-28); }
  .hero-visual { margin-top: var(--space-36); }
  .hero-visual figcaption { font-size: var(--type-caption); }
  .triple { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-32); }
  .tile { padding: var(--space-md) 0 var(--space-20); border-bottom: 1px solid var(--color-rule); }
  .metric { margin-bottom: var(--space-xs); font-size: var(--type-display); }
  .journey-head { align-items: start; }
  .journey-art { width: 100%; margin-top: var(--space-28); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--color-accent) var(--color-paper-3); scrollbar-width: thin; }
  .journey-art a, .journey-art img { width: 1200px; max-width: none; }
  .audit-heading { margin-bottom: var(--space-28); }
  .audit-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-28); }
  .audit-visual { width: 100%; max-width: 500px; }
  .audit-finding { grid-template-columns: 32px minmax(0, 1fr); }
  .audit-takeaway { margin-top: var(--space-20); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step + .step { padding: var(--space-sm) 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--color-rule); }
  .wireframe-board { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .wireframe-visual { max-width: 560px; }
  .iteration-decisions, .component-theme-grid { grid-template-columns: minmax(0, 1fr); }
  .iteration-decisions { margin-top: var(--space-28); }
  .component-showcase-heading .eyebrow { grid-column: auto; margin-bottom: 0; }
  .component-theme-figure { max-width: none; }
  .showcase-features { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); margin-top: var(--space-36); }
  .showcase-feature { display: grid; grid-template-columns: 95px minmax(0, 1fr); column-gap: var(--space-md); }
  .showcase-feature-num { grid-row: span 2; }
  .showcase-feature h3, .showcase-feature p { margin-top: 0; }
  .showcase-feature p { margin-top: var(--space-2xs); }
  .showcase-stage-top, .showcase-stage-bottom { font-size: var(--type-caption); }
  .ds-frame { width: min(100%, 520px); }
  .ds-frame-header, .ds-caption { font-size: var(--type-caption); }
}
@media (max-width: 420px) {
  :root { --gutter: var(--space-md); }
  .audit-topline { font-size: var(--type-caption); }
  .audit-bottomline { font-size: var(--type-caption); }
  .showcase-footer { font-size: var(--type-caption); }
  .showcase-feature { grid-template-columns: 80px minmax(0, 1fr); }
}

/* Match the Moneko case-study contents rail and its compact responsive menu. */
@media(max-width:1199px){
  .case-layout{display:block;max-width:1100px;padding:0 24px}
  .sidebar{position:sticky;top:0;z-index:1000;display:block;margin:0 -24px;padding:12px 24px;min-height:0;background:var(--color-paper)}
  .menu-toggle{position:static;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 0;border:0;background:transparent;color:var(--color-muted);font:400 16px/1.4 var(--font-body);cursor:pointer;list-style:none}
  .menu-toggle::-webkit-details-marker{display:none}
  .menu-toggle::after{content:"⌄";color:var(--color-accent);font-size:var(--type-caption)}
  .nav-disclosure[open] .menu-toggle::after{content:"⌃"}
  .nav{display:none;padding:8px 0 12px}
  .nav-disclosure:not([open])>.nav{display:none}
  .nav-disclosure[open]>.nav{display:block}
  .nav-track{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;max-height:min(65vh,440px);overflow-y:auto;padding-top:8px;border-top:1px solid var(--color-rule)}
  .main{width:auto;margin:0}
  .slide{scroll-margin-top:90px}
}
@media(max-width:760px){
  .case-layout{padding:0 16px}
  .sidebar{margin:0 -16px;padding:11px 16px}
  .nav-track{grid-template-columns:1fr}
}