/* Olgun Kaşıkçı, design system: tokens, base and the components every page shares.
   Page stylesheets (home.css, project.css) build on this and add no new colours or
   type sizes of their own; when a page needs one, it is added here first.
   Documentation: DESIGN-SYSTEM.md. Load order: fonts.css, scrollcraft.css, system.css,
   then the page stylesheet. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Colour: his palette, measured from the artwork (dna/design-dna.json) */
  --red:    #c0372c;   /* the one UI accent: link and pill hover, selection */
  --black:  #0d0704;   /* his black: all text on light grounds */
  --pale:   #f1e0e4;   /* his paper: text on dark or colour grounds, the close */
  --cobalt: #3469d0;   /* statement ground */
  --sun:    #fdc434;   /* link hover on black */

  /* Colour: grounds and chrome chosen by the client */
  --offwhite:   #f2f0ef;   /* main page ground: hero, Selected Work */
  --paper:      #f7f8f9;   /* menu panel, What I Make */
  --white:      #ffffff;   /* header ink, print mats */
  --true-black: #000000;   /* header ink, the Lego drawing's own ground */
  --signal:     #e30f14;   /* menu link hover */

  /* Colour: the four kinds of work (What I Make cards, project-page accents) */
  --kind-poster:    #e30f14;
  --kind-brand:     #fece00;
  --kind-editorial: #4b5ee0;   /* takes --paper ink; the other three take --black */
  --kind-pattern:   #facfef;

  /* Theme: light by default, dark when the system or the toggle asks.
     Only the close section and project-page bodies follow the theme. */
  --canvas: var(--pale);
  --canvas-ink: var(--black);

  /* Type */
  --font-display: "Rebond Grotesque", "Helvetica Neue", Arial, sans-serif;  /* 500 600 700 */
  --font-text:    "Rebond Grotesque", "Helvetica Neue", Arial, sans-serif;     /* 400 500 600 */
  --fs-mega:      clamp(3.6rem, 13vw, 13.5rem);              /* one per page: a section's name */
  --fs-section:   clamp(3rem, 8vw, 8.4rem);                  /* section titles */
  --fs-title:     clamp(2.8rem, 1.9rem + 4.2vw, 5.6rem);     /* closing asks, project titles */
  --fs-statement: clamp(1.9rem, min(4.4vw, 7.6svh), 5rem);   /* a held sentence on a colour ground */
  --fs-card:      clamp(2.2rem, 5vw, 4.8rem);                /* card and block heads */
  --fs-lead:      clamp(1.9rem, min(3.3vw, 6svh), 3.9rem);   /* the opening line of a page */
  --fs-index:     clamp(1.6rem, min(4.6vw, 5.3svh), 4.6rem); /* list of titles */
  --fs-menu:      clamp(3rem, 7vw, 4.6rem);
  --fs-label:     clamp(1.4rem, 2.2vw, 2rem);                /* museum-label title */
  --fs-l:    1.375rem;    /* large link */
  --fs-cta:  1.1875rem;   /* "Email Olgun" */
  --fs-m:    1.0625rem;   /* ledes, facts */
  --fs-base: 1rem;
  --fs-s:    0.9375rem;   /* labels, footer, pills */
  --fs-xs:   0.8125rem;   /* header role, hints, menu chrome */
  --fs-mark: 1.4167rem;   /* wordmark */

  --tr-mega:  -0.055em;   /* tracking tightens as size grows */
  --tr-title: -0.045em;
  --tr-head:  -0.035em;
  --tr-label: -0.03em;
  --lh-mega:  0.86;
  --lh-title: 0.92;
  --lh-head:  1.04;
  --lh-text:  1.45;

  /* Space and layout */
  --gut:   clamp(16px, 2.4vw, 36px);   /* page gutter and column gap */
  --split: 58.5vw;                       /* editorial split: art column width (55/45) */
  --bar-clear: 96px;                   /* top padding that clears the fixed header */

  /* Lines, corners, depth */
  --rule: 1px solid var(--black);      /* label rules */
  --rule-strong: 2px solid currentColor;
  --r-pill: 999px;                     /* controls */
  --r-panel: 22px;                     /* floating panels and cards; artwork is never rounded */
  --shadow-print: 0 1px 0 rgba(13, 7, 4, 0.06), 0 24px 40px -18px rgba(13, 7, 4, 0.35);
  --shadow-print-lift: 0 1px 0 rgba(13, 7, 4, 0.06), 0 44px 60px -22px rgba(13, 7, 4, 0.42);
  --shadow-cutout: drop-shadow(0 1px 1px rgba(13, 7, 4, 0.26)) drop-shadow(0 6px 12px rgba(13, 7, 4, 0.08));

  /* Motion */
  --ease: var(--sc-ease-out);
  --t-fast: 160ms;    /* hover colour */
  --t-ink: 450ms;     /* header ink change */

  /* scrollcraft roles, mapped onto the tokens above */
  --sc-canvas: var(--canvas);
  --sc-surface: var(--pale);
  --sc-ink: var(--canvas-ink);
  --sc-ink-soft: color-mix(in oklab, var(--canvas-ink) 72%, var(--canvas));
  --sc-accent: var(--red);
  --sc-accent-ink: var(--pale);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-text);
  --sc-shadow-color: 18 53% 3%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --canvas: var(--black); --canvas-ink: var(--pale); }
}
:root[data-theme="dark"] { --canvas: var(--black); --canvas-ink: var(--pale); }

/* ------------------------------------------------------------------ base -- */
body { background: var(--canvas); color: var(--canvas-ink); }
ul, ol, dl, dd { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
img { height: auto; }
/* Short copy breaks into lines of similar length. */
p, dd { text-wrap: balance; }

/* One focus ring that reads on every ground: pale line, dark halo. */
:focus-visible {
  outline: 2px solid var(--pale);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--black);
  border-radius: 2px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: -64px; z-index: 100;
  background: var(--pale); color: var(--black); padding: 10px 16px; border-radius: var(--r-pill);
  text-decoration: none; transition: top 200ms var(--ease);
}
.skip:focus { top: 12px; }
/* A failed image hides itself; its frame shows the artwork's ground instead (system.js). */
.is-missing > img { visibility: hidden; }

/* ------------------------------------------------------------ type roles -- */
/* For new pages. The homepage sets the same tokens on its own section classes. */
.type-mega    { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-mega);    line-height: var(--lh-mega);  letter-spacing: var(--tr-mega); }
.type-section { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-section); line-height: 0.9;             letter-spacing: -0.05em; }
.type-title   { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title);   line-height: 0.94;            letter-spacing: var(--tr-title); text-wrap: balance; }
.type-card    { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-card);    line-height: var(--lh-title); letter-spacing: var(--tr-title); }
.type-lead    { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead);    line-height: 1.06;            letter-spacing: -0.034em; text-wrap: balance; }
.type-lede    { font-size: var(--fs-m); line-height: var(--lh-text); max-width: 34ch; }
.type-hint    { font-size: var(--fs-xs); line-height: 1.3; color: color-mix(in oklab, currentColor 66%, transparent); }

/* ------------------------------------------------------------- controls -- */
/* Interactive = pill. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); text-decoration: none; white-space: nowrap;
  background: var(--black); color: var(--pale);
  font-size: var(--fs-s); font-weight: 600; padding: 12px 20px;
  transition: background-color var(--t-fast) var(--ease), transform 120ms var(--ease);
}
.pill:hover { background: var(--red); }
.pill:active { transform: scale(0.97); }
/* "Email Olgun" and every other call to action: an underlined text link whose
   colour answers the pointer. Set --cta-hover where red would not read. */
.cta {
  font-size: var(--fs-cta); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em;
  transition: color var(--t-fast) var(--ease);
}
.cta:hover { color: var(--cta-hover, var(--red)); }
/* Quiet text link (All work, footer links). */
.link {
  font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 0.22em;
  transition: color var(--t-fast) var(--ease);
}
.link:hover { color: var(--red); }

/* --------------------------------------------------------- museum label -- */
/* Every piece of work is described the same way: count, title, kind, ground. */
.swatch {
  display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.06em;
  background: var(--s); box-shadow: 0 0 0 1px currentColor; margin-right: 0.4em;
}
.label { border-top: var(--rule); padding-top: 10px; font-size: var(--fs-s); line-height: 1.35; }
.label__count { font-variant-numeric: tabular-nums; color: color-mix(in oklab, currentColor 62%, transparent); margin-bottom: 4px; }
.label__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tr-label); line-height: 1.05; }
.label__meta { margin-top: 6px; font-variant-numeric: tabular-nums; }
/* Facts: a two-column definition list (For / Contact, Client / Year ...). */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; font-size: var(--fs-m); }
.facts div { display: contents; }
.facts dt { color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- loader -- */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.loader__sheet {
  position: absolute; inset: 0; background: var(--c);
  transform: translateY(101%);
  animation: sheet-in 460ms var(--ease) forwards;
}
.loader__sheet:nth-child(2) { animation-delay: 110ms; }
.loader__sheet:nth-child(3) { animation-delay: 220ms; }
.loader__sheet:nth-child(4) { animation-delay: 330ms; }
.loader__sheet--last { animation-delay: 440ms; display: grid; place-items: center; }
.loader__name {
  font-family: var(--font-display); font-weight: 700; color: var(--pale);
  font-size: clamp(3rem, 20vw, 24rem); letter-spacing: -0.045em; line-height: 1;
  clip-path: inset(0 100% 0 0);
  animation: name-in 460ms var(--ease) 560ms forwards;
}
.loader.is-out { animation: lift 720ms var(--sc-ease-in-out) forwards; }
.loader.is-gone { display: none; }
@keyframes sheet-in { to { transform: translateY(0); } }
@keyframes name-in { to { clip-path: inset(0 0 0 0); } }
@keyframes lift { to { transform: translateY(-100%); } }

/* ---------------------------------------------------------------- header -- */
/* Wordmark | role | Menu. The role ends one gutter before the split line (55%), so
   the header shares the editorial split's columns. Its ink follows the ground under
   it (system.js). */
.bar {
  --hdr-ink: var(--white); --hdr-bg: var(--true-black);
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: 1fr auto calc(var(--split) - var(--gut)); column-gap: var(--gut); align-items: center;
  padding: 18px var(--gut);
  color: var(--hdr-ink);
  transition: color var(--t-ink) var(--ease);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark {
  justify-self: start;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-mark);
  letter-spacing: -0.03em; text-decoration: none; line-height: 1;
}
.bar__role {
  font-size: var(--fs-xs); margin: 0; justify-self: end;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-ink) var(--ease), visibility 0s linear var(--t-ink);
}
/* The role line shows only over sections marked [data-bar-role] (the hero). */
.bar[data-role] .bar__role { opacity: 0.75; visibility: visible; transition: opacity var(--t-ink) var(--ease); }
.bar__menu {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 18px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--hdr-ink); color: var(--hdr-bg);
  font-size: var(--fs-xs); font-weight: 600;
  transition: background-color var(--t-ink) var(--ease), color var(--t-ink) var(--ease), transform 120ms var(--ease);
}
.bar[data-split] .bar__menu { background: var(--white); color: var(--true-black); }
.bar__menu i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bar__menu:active { transform: scale(0.97); }

/* ------------------------------------------------------------------ menu -- */
.menu { position: fixed; inset: 0; z-index: 80; }
.menu[hidden] { display: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 400ms; }
.menu__panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px;
  width: min(440px, calc(100% - 24px));
  background: var(--paper); color: var(--true-black); border-radius: var(--r-panel);
  padding: 28px 32px; display: flex; flex-direction: column;
  transform: translateX(calc(100% + 24px));
  transition: transform 550ms var(--ease);
}
.menu.is-open .menu__scrim { opacity: 1; }
.menu.is-open .menu__panel { transform: none; }
.menu__close {
  align-self: flex-end; font-size: var(--fs-xs); font-weight: 600; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: var(--r-pill); background: var(--true-black); color: var(--paper);
}
.menu__links { margin-top: auto; }
.menu__links li { overflow: hidden; }
.menu__links a {
  display: block; padding: 2px 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-menu); line-height: 1.02; letter-spacing: -0.04em;
  text-decoration: none;
  transform: translateY(105%); transition: transform 600ms var(--ease), color var(--t-fast) var(--ease);
}
.menu.is-open .menu__links a { transform: none; }
.menu.is-open .menu__links li:nth-child(2) a { transition-delay: 50ms; }
.menu.is-open .menu__links li:nth-child(3) a { transition-delay: 100ms; }
.menu__links a:hover { color: var(--signal); }
.menu__links a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; box-shadow: none; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 40px; font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- footer -- */
.foot {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 20px 0 22px; font-size: var(--fs-s);
}
.theme-toggle {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  text-decoration: underline; text-underline-offset: 0.22em; font-size: inherit;
}

/* --------------------------------------------------------- small screens -- */
@media (max-width: 820px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__role { display: none; }
  .foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js .loader { display: none; }
}