/* =====================================================================
   Shared web-scale tokens & helpers for the adamkerpelman.com directions.
   Built on top of Product Lab tokens; adds web-tuned sizes and a few
   conveniences for full-page layouts (vs. slide-native authoring).
   ===================================================================== */

:root {
  --web-h1-xl: 140px;   /* hero wordmark on the home page */
  --web-h1-lg: 96px;
  --web-h1:    64px;
  --web-h2:    44px;
  --web-h3:    28px;
  --web-lede:  22px;
  --web-body:  17px;
  --web-meta:  13px;
  --web-eyebrow: 12px;

  --maxw:      1280px;
  --gutter:    64px;
}

/* Artboard root — each direction is rendered as a full-bleed "page"
   inside a DCArtboard. The artboard scrolls externally (focus mode);
   inside, we lay out top-to-bottom flow with paper background. */
.ak-page {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "lnum" 1, "kern" 1;
  font-size: var(--web-body);
  line-height: 1.55;
}

/* Mono helpers */
.ak-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  font-size: var(--web-eyebrow);
}
.ak-mono-md {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-size: var(--web-meta);
}

/* Section markers used in the chrome of every direction */
.ak-sectionmark {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--orange);
  font-size: var(--web-eyebrow);
}
.ak-sectionmark > .ak-sm-section { color: var(--ink-soft); margin-left: 8px; }

/* Orange italic accent (the load-bearing word) */
.ak-accent { color: var(--orange); font-style: italic; font-weight: 400; }

/* Cards */
.ak-card {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 28px 28px 32px;
  position: relative;
}
.ak-card.fill-cream { background: var(--cream-2); border-color: transparent; }
.ak-card.fill-navy  { background: var(--navy); color: var(--cream); border-color: transparent; }
.ak-card.fill-orange{ background: var(--orange); color: #fff; border-color: transparent; }
.ak-card.fill-white { background: #fff; border-color: var(--rule); }

/* Pills (status + tag) */
.ak-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-mono-tight);
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid currentColor;
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1;
}
.ak-pill.dev    { color: var(--orange);           border-color: var(--orange); }
.ak-pill.live   { color: var(--status-complete);  border-color: var(--status-complete); }

/* Stat range: en-dash always in orange */
.ak-dash { color: var(--orange); font-style: italic; font-weight: 500; }

/* Soft hairline */
.ak-hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.ak-hr-dark { border: 0; border-top: 1px solid var(--rule-on-dark); margin: 0; }

/* Link reset for nav lines (we want serifs not orange underlines) */
.ak-page a.ak-navlink, .ak-page a.ak-quietlink {
  color: inherit; text-decoration: none;
}
.ak-page a.ak-navlink:hover, .ak-page a.ak-quietlink:hover { color: var(--orange); }

/* The Adam-portrait standard frame */
.ak-portrait {
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}
.ak-portrait img { display:block; width: 100%; height: 100%; object-fit: cover; }