/* =============================================================
   Shared tokens — Sumner Willrodt portfolio (Website Files mock)
   Inspired by the restraint of robin-noguier.com
   ============================================================= */

:root {
  /* Type */
  --serif: 'Italiana', 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Neutrals */
  --ink:        #0F0F0E;     /* near-black hero / contact background */
  --ink-soft:   #1A1A18;     /* secondary dark */
  --paper:      #F5F4F0;     /* light text on dark */
  --paper-soft: rgba(245, 244, 240, 0.62);
  --paper-rule: rgba(245, 244, 240, 0.16);

  /* Channel triplets, so alpha variants reference the token instead of respelling
     the hex. The design system's rule: always reference variables, never hardcode. */
  --ink-rgb:   15 15 14;    /* --ink   #0F0F0E */
  --paper-rgb: 245 244 240; /* --paper #F5F4F0 */

  /* Brand-color palette (each project owns one) */
  --c-lief-brand:  #2A4A36;  /* deep moss */
  --c-lief-ssg:    #C75B30;  /* burnt orange */
  --c-s3:          #1A4A8A;  /* navy */
  --c-qumba:       #6BAE75;  /* sage */
  --c-lief-web:    #1A7A8A;  /* teal */
  --c-lief-raws:   #B8945A;  /* warm tan */
  --c-steveo:      #C8362B;  /* hot red */
  --c-berry:       #A84A7C;  /* muted magenta — gradient accent only */

  /* Layout — fluid: content tracks the window width (side padding scales via --pad-x).
     Set back to a px value (e.g. 1440px) to restore a centered max-width column. */
  --pad-x: clamp(24px, 5vw, 120px);
  --pad-y: clamp(40px, 8vh, 96px);
  --max-w: 100vw;
  --prose-w: 1520px; /* reading sections center at this width on wide screens */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Opt every same-origin navigation into the View Transitions API.
   Chromium morphs the shared project image + title between pages (see the
   ::view-transition tuning in case-study.css). Safari/Firefox ignore this and
   fall back to the JS image-flood handoff. */
@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }

/* ---------- Top chrome (logo + about link, Robin-style minimal) ---------- */
.sw-chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--pad-x);
  pointer-events: none;
  mix-blend-mode: difference;
}
.sw-chrome a { pointer-events: auto; }

/* The chrome is fixed and transparent. On the light pages (about, case studies) it
   has no blend mode, so body copy scrolling underneath collided with the logo and
   the nav links. A soft scrim fades in once the page moves. The homepage keeps its
   mix-blend-mode: difference and gets no scrim. */
.sw-chrome::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(245, 244, 240, 0.92) 55%, rgba(245, 244, 240, 0));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
body.about.is-scrolled .sw-chrome::before,
body.cs-page.is-scrolled .sw-chrome::before { opacity: 1; }

.sw-mark {
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  line-height: 1;
}
.sw-mark-svg {
  width: auto;
  height: 28px;
  fill: currentColor;
  display: block;
}
@media (max-width: 720px) {
  .sw-mark-svg { height: 24px; }
}

.sw-chrome-right {
  display: flex;
  gap: 32px;
  align-items: center;
}
.sw-chrome-right a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
}
.sw-chrome-right a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-chrome-right a:hover::after { transform: scaleX(1); }

/* ---------- Buttons / CTAs ---------- */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  width: max-content;
  transition: gap 0.3s ease, opacity 0.3s ease;
}
.cta-link:hover { gap: 18px; }
.cta-link .arr {
  display: inline-block;
  transition: transform 0.3s ease;
}
.cta-link:hover .arr { transform: translateX(4px); }

/* ---------- Fade reveals ---------- */
.fade-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fade-ready.in { opacity: 1; transform: none; }
.fade-d1 { transition-delay: 0.12s; }
.fade-d2 { transition-delay: 0.24s; }
.fade-d3 { transition-delay: 0.36s; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .sw-chrome { padding: 20px var(--pad-x); }
  .sw-chrome-right { gap: 20px; }
}

/* ---------- Hit areas ----------
   The logo renders at 24-28px and the nav links at 16px tall. ::before widens only
   the touch region to 44px (WCAG 2.5.5); nothing shifts on screen. */
.sw-mark, .sw-chrome-right a, .cta-link { position: relative; }
.sw-mark::before, .sw-chrome-right a::before, .cta-link::before {
  content: '';
  position: absolute;
  left: -10px; right: -10px;
  top: 50%; transform: translateY(-50%);
  height: 44px;
  pointer-events: auto;
}

/* ---------- "Currently" line (homepage hero + about hero) ----------
   One component, two placements. Content comes from js/currently.js so the
   blurb has a single source; edit that file and both pages follow.
   Both host heroes sit on --paper, so this only needs the ink treatment. */
.sw-now {
  /* Column, not a wrapping row: inline, the label jumped above the text only once
     the copy grew long enough to wrap, so the block changed shape with the blurb.
     Stacked, it reads the same at every width and every length. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 46ch;
  text-wrap: pretty;
}
.sw-now[hidden] { display: none; }

.sw-now-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.5);
}

.sw-now-dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--c-qumba);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-qumba) 25%, transparent);
  animation: sw-now-pulse 2.8s ease-in-out infinite;
}
@keyframes sw-now-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-qumba) 25%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-qumba) 0%,  transparent); }
}

.sw-now-text {
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgb(var(--ink-rgb) / 0.78);
  text-wrap: pretty;
}

.sw-now-link {
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.3);
  padding-bottom: 1px;
  transition: border-color 0.3s ease;
}
.sw-now-link:hover { border-bottom-color: var(--ink); }
.sw-now-link .arr {
  display: inline-block;
  transition: transform 0.3s ease;
}
.sw-now-link:hover .arr { transform: translateX(3px); }

/* The dot is decoration; the label already says "Currently". */
@media (prefers-reduced-motion: reduce) {
  .sw-now-dot { animation: none; }
  .sw-now-link .arr { transition: none; }
}

@media (max-width: 720px) {
  .sw-now { gap: 6px 10px; max-width: none; }
}