/* ==========================================================================
   Maya El Helou — shared stylesheet
   Conceit: the site is "printed" in two spot inks on newsprint stock.
   Ink one is always black. Ink two is riso pink across the main site and
   swaps to amber inside Amber Writing Studio (body class="amber").
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --paper:        #e6e5dd;   /* newsprint stock */
  --paper-deep:   #dbdad0;   /* second sheet, for insets */
  --ink:          #191714;   /* warm black, ink one */
  --ink-soft:     #55504a;
  --ink-faint:    #8d877e;

  --spot:         #ff3e96;   /* riso fluorescent pink, ink two */
  --spot-text:    #c2005c;   /* darkened for legible small text */
  --spot-wash:    #ffdfef;

  --rule:         #c6c4b9;

  --strip-frame:  var(--ink);  /* home hero strip frame */
  --strip-stroke: 2px;         /* thinner outer border for the hero strip */

  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body:    "Literata", Georgia, serif;
  --mono:    "DM Mono", ui-monospace, "Courier New", monospace;

  --measure: 34rem;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --panel-gap: 6px;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.8rem, 1.6rem + 5.4vw, 6.5rem);
}

body.amber {
  --spot:      #f2ab00;   /* sampled from the Amber brand sheet */
  --spot-text: #8a5f00;
  --spot-wash: #fdeec6;
  --measure:   32rem;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

/* --- Accessibility ------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--spot-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Halftone ----------------------------------------------------------- */
/* The one texture in the system. Used behind image slots and pull quotes. */

.halftone {
  background-image: radial-gradient(var(--spot) 1.1px, transparent 1.3px);
  background-size: 7px 7px;
  background-position: 0 0;
}

/* --- Masthead ----------------------------------------------------------- */

.press-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.press-bar .chip {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--ink);
}
.press-bar .chip.one { background: var(--ink); }
.press-bar .chip.two { background: var(--spot); }
.press-bar .sep { margin-left: auto; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  text-decoration: none;
  line-height: 1;
}
.wordmark span { color: var(--spot-text); }

/* --- Navigation --------------------------------------------------------- */

.nav-toggle {
  display: none;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
}

.nav a {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav a:hover { border-bottom-color: var(--spot); }
.nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
  font-weight: 500;
}

@media (max-width: 860px) {
  .masthead-inner { align-items: center; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    width: 100%;
    order: 3;
    border-top: 1px solid var(--rule);
    padding: 0.75rem var(--gutter) 1rem;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0.85rem; }
}

/* --- Page frame --------------------------------------------------------- */

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.prose { max-width: var(--measure); }

.band { padding: clamp(3rem, 8vw, 6rem) 0; }
.band + .band { border-top: 1px solid var(--rule); }

/* --- Section labels ----------------------------------------------------- */
/* The label carries the section number from the site outline — it is a real
   index, so the numbering is information rather than decoration. */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spot-text);
  margin: 0 0 0.9rem;
  display: block;
}

.section-head { margin-bottom: 2.25rem; }

h2.title {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h3.sub {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

h4.mini {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 40rem;
}

/* --- Misregistered display type (the signature) -------------------------- */
/* A headline printed twice: black plate, then the spot plate a hair off
   register, the way a two-colour riso pull actually lands. */

.misreg {
  position: relative;
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.86;
  font-size: var(--step-4);
}

.misreg::before {
  content: attr(data-text);
  position: absolute;
  left: 0.055em;
  top: 0.045em;
  color: var(--spot);
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
}

/* --- Comic panel hero ---------------------------------------------------- */

.strip {
  display: grid;
  gap: var(--panel-gap);
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  background: var(--strip-frame);
  border: var(--strip-stroke) solid var(--strip-frame);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}

.panel {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.panel.tall { grid-row: span 2; }
.panel.plate-panel { padding: clamp(1rem, 2.5vw, 1.5rem); }

.balloon {
  font-family: var(--body);
  font-size: var(--step-1);
  line-height: 1.4;
  margin: 0;
}

.caption-box {
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.5;
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  padding: 0.7rem 0.85rem;
}

@media (max-width: 720px) {
  .strip { grid-template-columns: 1fr; }
  .panel.tall { grid-row: auto; }
}

/* --- Image plates -------------------------------------------------------- */

figure.plate { margin: 0; }

.plate-frame {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.plate-frame.portrait { aspect-ratio: 3 / 4; }
.plate-frame.wide { aspect-ratio: 16 / 9; }
.plate-frame.tall { aspect-ratio: 4 / 5; }
.plate-frame.square { aspect-ratio: 1 / 1; }

.plate-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mini-gallery: one large image over two smaller ones, used for the Qissa
   panel on the home page hero strip. */
.plate-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 100%;
}

.plate-panel .plate-gallery .plate-frame {
  border: none;
}

.plate-gallery .plate-frame.gallery-large {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.plate-gallery .plate-frame.gallery-small {
  aspect-ratio: 1 / 1;
}

.plate-panel .credit {
  padding: 0.6rem clamp(1.25rem, 3vw, 2.25rem) 0.9rem;
  margin: 0;
}

/* Shown only when the file is not in /images yet. */
.plate-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  background-image: radial-gradient(var(--spot) 1.1px, transparent 1.3px);
  background-size: 7px 7px;
}

.plate-slot span {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.45rem 0.7rem;
}

figure.plate figcaption {
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  margin-top: 0.6rem;
}

/* --- Entries (works, talks, publications) -------------------------------- */

.entries { border-top: 1px solid var(--ink); }

.entry {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.entry .year {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  padding-top: 0.35rem;
}

.entry h3 {
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.3rem;
}

.entry p { margin: 0; color: var(--ink-soft); }
.entry .meta {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 0.35rem;
}

@media (max-width: 620px) {
  .entry { grid-template-columns: 1fr; gap: 0.35rem; }
  .entry .year { padding-top: 0; }
}

/* --- Cards / routes ------------------------------------------------------ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.card {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card h3 {
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.card p { margin: 0; color: var(--ink-soft); font-size: 0.96em; }

a.card {
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--spot);
}

.card .go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spot-text);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--spot);
}
.btn.ghost { background: transparent; color: var(--ink); }

/* --- Pull quote ---------------------------------------------------------- */

.pull {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 1.4rem 0;
  margin: 2.5rem 0;
  max-width: 44rem;
}

/* --- Definition rows (services, who it's for) ---------------------------- */

.rows { border-top: 1px solid var(--ink); }

.row {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}

.row h3 {
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.row p { margin: 0; color: var(--ink-soft); }

@media (max-width: 700px) {
  .row { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* --- Placeholder for copy that is still to come -------------------------- */

.tocome {
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--spot-text);
  border: 1px dashed var(--spot-text);
  background: var(--spot-wash);
  padding: 0.9rem 1rem;
  margin: 0 0 1.25rem;
}
.tocome::before {
  content: "COPY TO COME — ";
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* --- Forms --------------------------------------------------------------- */

.form { max-width: 34rem; }

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  padding: 0.7rem 0.8rem;
  border-radius: 0;
}

.field textarea { min-height: 9rem; resize: vertical; }

.form-note {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.55;
}

/* --- Inline links in prose ----------------------------------------------- */

.prose a,
.entry a,
.copy a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--spot);
  transition: background 0.15s ease;
}
.prose a:hover,
.entry a:hover,
.copy a:hover { background: var(--spot-wash); }

/* --- Footer -------------------------------------------------------------- */

.colophon {
  border-top: 2px solid var(--ink);
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: 2.5rem var(--gutter) 3rem;
}

.colophon-inner {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.colophon .name {
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: -0.03em;
}

.colophon ul { display: grid; gap: 0.45rem; }

.colophon a {
  font-family: var(--mono);
  font-size: var(--step--1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.colophon a:hover { border-bottom-color: var(--spot); }

.colophon .fineprint {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  width: 100%;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--rule);
}


/* --- Amber identity ------------------------------------------------------ */
/* Rebuilt from Maya's brand sheet: eye mark, italic wordmark, rule bars. */

.amber-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.amber-eye {
  width: 2.6rem;
  height: auto;
  color: var(--ink);
  flex: none;
}

.amber-word {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 0.9;
  display: block;
}

.amber-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-top: 0.15rem;
}

/* Full lockup for the Amber hero: eye over wordmark, bar beneath. */
.amber-mark {
  display: inline-block;
  text-align: left;
  max-width: 22rem;
}

.amber-mark .amber-eye { width: 100%; margin-bottom: 0.5rem; }

.amber-mark .big-word {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(3rem, 9vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 0.85;
  display: block;
}

.amber-mark .bar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.55rem 0.7rem;
  margin-top: 0.6rem;
  text-align: center;
}

/* Amber section heads get the brand's rule bar instead of the misregister. */
body.amber h2.title { font-style: italic; }


/* --- Comic reader -------------------------------------------------------- */
/* The manifesto pages are dense with lettering, so they run full measure in a
   single column rather than as a thumbnail grid. */

.pages {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 46rem;
  margin: 0 auto;
}

.page {
  display: block;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: #fff;
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.page:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--spot); }

.page img { width: 100%; height: auto; }

.page .folio {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}

.reader-note {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-align: center;
  max-width: 46rem;
  margin: 1.25rem auto 0;
}


/* --- Small avatar inset -------------------------------------------------- */
/* The source file is 150px square, so it is never rendered larger than that. */

.byline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.byline img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: cover;
  border: 1px solid var(--ink);
  flex: none;
}

.portrait-stack { display: grid; gap: 1.25rem; }


/* --- Photo credit -------------------------------------------------------- */

.credit {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
}
.credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.credit a:hover { border-bottom-color: var(--spot); }


/* --- Photo credit -------------------------------------------------------- */

.credit {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
}
.credit a { color: inherit; border-bottom: 1px solid var(--rule); text-decoration: none; }
.credit a:hover { border-bottom-color: var(--spot); }