/* Ahmad Dibo — main
   Base type, layout primitives, chrome (header, bracket nav, frosted menu),
   and shared editorial components. */

/* ====================================================================== */
/*  BASE                                                                   */
/* ====================================================================== */

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  flex: 1 0 auto;
}

/* Shared type helpers ---------------------------------------------------- */

.eyebrow,
.label {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.label--ink {
  color: var(--ink);
}

.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.lead {
  font-size: var(--t-lead);
  font-weight: var(--w-regular);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  max-width: 22ch;
}

.mute {
  color: var(--ink-mute);
}

/* Justified body copy — prose only. Labels, tables, nav, captions and the
   figure/spec lists stay ragged right so their alignment stays readable.
   Hyphenation is required: without it, justified narrow columns open rivers. */
.entry__body p,
.landing__note p,
.notice__body p,
.scope__desc {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Never justify a lone short line (the trailing line of a block is ragged
   by definition, but single-line paragraphs like "Resume" must not stretch). */
.entry__action,
.entry__body p.no-justify {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* A deliberate heavy rule, used directly under page H1s (Solitaire ref) */
.rule-strong {
  border: 0;
  border-top: 1.5px solid var(--rule-strong);
  margin: 0;
}

.rule-hair {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* Underlined editorial link --------------------------------------------- */
.link {
  display: inline-block;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease);
}
.link:hover {
  opacity: 0.55;
}

/* + link: no underline; a + appears on hover (matches the index rows) */
.link-plus {
  display: inline-block;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}
.link-plus::after {
  content: "+";
  margin-left: 0.6em;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.link-plus:hover::after {
  opacity: 1;
}

/* red-hover link: turns the single accent color on hover, no underline/+ */
.link-red {
  display: inline-block;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease);
}
.link-red:hover {
  color: var(--accent);
}

/* ====================================================================== */
/*  HEADER — plain nav                                                      */
/* ====================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  /* only a little air around the 13px nav text — the bar is the text plus a
     hairline of breathing room, not a band. Between --s-1 and --s-2, so the
     value is set directly rather than forcing a token that does not fit. */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Header row snaps to the alignment grid: the wordmark occupies the
   wordmark column, the nav cluster begins on the col-1 line, and Notice is
   pushed alone to the right edge. */
.site-head__row {
  display: grid;
  grid-template-columns: var(--col-1) 1fr auto;
  align-items: baseline;
  column-gap: clamp(0.75rem, 2vw, 1.75rem);
}

/* Bracket cell — no current users. The header dropped it, and A3's
   .launch__btn dropped its frame to match the site's bare language. Kept only
   in case a framed control is wanted again; safe to delete otherwise. */
.bracket-cell {
  position: relative;
  padding: 0.32rem clamp(1.25rem, 3vw, 2.5rem) 0.32rem 0.4rem;
  line-height: 1.15;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  color: var(--ink);
}

/* Wordmark — plain text at the left edge, sentence case, no frame */
.wordmark {
  font-size: var(--t-small);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.wordmark sup {
  font-size: 1em;          /* same size as the wordmark */
  font-weight: inherit;
  vertical-align: baseline; /* inline, not superscripted */
  margin-left: 0;
}

/* Nav cluster — Index / About / Contact sit together on the col-1 line,
   evenly spaced; Notice is a separate cell pinned to the right gutter.
   The nav is the site's vertical ruler: the tracks below are what page
   content aligns to, so changing them moves the whole site. */
.nav {
  display: flex;
  gap: var(--nav-gap);
}

.nav__item,
.nav__notice {
  flex: 0 0 auto;
  font-size: var(--t-small);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* "You are here" is a strikethrough, not a weight change — the line is the
   marker so every nav label keeps identical color and weight. */
.nav__item[aria-current="page"],
.nav__notice[aria-current="page"] {
  font-weight: var(--w-regular);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

/* The nav has no hover animation by design: its only state is "you are
   here", drawn as the strikethrough above. */

/* ====================================================================== */
/*  FROSTED FULL-SCREEN MENU (DBD ref)                                      */
/* ====================================================================== */

.menu-toggle {
  display: none; /* shown on mobile / when used */
  position: relative;
  width: 34px;
  height: 18px;
}

/* elongated three-bar hamburger -> X (widened, per the brief).
   three bars closed; on open the middle fades and the outer two cross. */
.menu-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }

body.menu-open .menu-toggle span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(18deg) scaleX(1.15);
}
body.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;                       /* middle bar fades out for the X */
}
body.menu-open .menu-toggle span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-18deg) scaleX(1.15);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(120%) blur(22px);
  backdrop-filter: saturate(120%) blur(22px);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
body.menu-open .menu {
  opacity: 1;
  visibility: visible;
}

/* First-load loader: the menu's frosted glass with the wordmark centred,
   shown once per session on whichever page the visitor enters. Each
   page's head script sets .first-load before first paint, so the glass is
   up from the first frame; js/main.js drops the class once it has cleared.
   The glass is body::after; the wordmark is .loader-mark (first child of
   body). */
.loader-mark { display: none; }
html.first-load body::after,
html.first-load .loader-mark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  animation: loader-out 350ms var(--ease) 450ms both;
}
html.first-load body::after {
  content: "";
  z-index: 100;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(120%) blur(22px);
  backdrop-filter: saturate(120%) blur(22px);
}
html.first-load .loader-mark {
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  white-space: nowrap;
}
@keyframes loader-out { from { opacity: 1; } to { opacity: 0; } }

.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__close {
  position: relative;
  width: 34px;
  height: 18px;
}
.menu__close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
}
.menu__close span:nth-child(1) {
  transform: translateY(-50%) rotate(18deg) scaleX(1.15);
}
.menu__close span:nth-child(2) {
  transform: translateY(-50%) rotate(-18deg) scaleX(1.15);
}

.menu__clocks {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.menu__nav {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.menu__nav a {
  font-size: var(--t-mega);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 0.98;
  text-transform: uppercase;
  width: max-content;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    color var(--dur-fast) var(--ease);
}
body.menu-open .menu__nav a {
  opacity: 1;
  transform: translateY(0);
}
body.menu-open .menu__nav a:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .menu__nav a:nth-child(2) { transition-delay: 0.12s; }
body.menu-open .menu__nav a:nth-child(3) { transition-delay: 0.18s; }
body.menu-open .menu__nav a:nth-child(4) { transition-delay: 0.24s; }
.menu__nav a:hover {
  color: var(--ink-mute);
}

.menu__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* ====================================================================== */
/*  CLOCK (timezones, DBD ref)                                              */
/* ====================================================================== */

.clock {
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.clock b {
  font-weight: var(--w-medium);
  color: var(--ink);
}

/* ====================================================================== */
/*  FOOTER                                                                  */
/* ====================================================================== */

.site-foot {
  flex-shrink: 0;
  padding-block: var(--s-4);
  margin-top: var(--s-7);
}
/* footer snaps to the nav grid: byline | clock, the clock starting on the
   Index column so it sits under the nav's "I" like every other aligned block. */
.site-foot__row {
  display: grid;
  grid-template-columns: var(--col-1) 1fr;
  column-gap: var(--nav-start);
  align-items: baseline;
}
.site-foot__row a,
.site-foot__row span {
  font-size: var(--t-small);
}
.site-foot a {
  transition: color var(--dur-fast) var(--ease);
}
.site-foot a:hover {
  color: var(--accent);
}
.site-foot .clock {
  font-size: var(--t-small);     /* match the footer scale, not micro */
  white-space: nowrap;
}

@media (max-width: 800px) {
  /* (7) byline and clock share one row; no nav to align to once stacked. */
  .site-foot__row {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
    row-gap: var(--s-3);
  }
}

/* ====================================================================== */
/*  SOFT REVEAL (Gentle Systems ref) — opt-in, JS adds .is-in              */
/* ====================================================================== */

/* Visible by default — only hidden once JS confirms it can reveal them.
   This guarantees content is never lost if JS fails or is slow. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================================================== */
/*  RESPONSIVE                                                              */
/* ====================================================================== */

@media (max-width: 800px) {
  .nav,
  .nav__notice {
    display: none;
  }
  .menu-toggle {
    display: block;
  }

  /* wordmark is already unframed; just match the menu's baseline (3) */
  .site-head .wordmark {
    line-height: 1.4;
  }
  .menu .wordmark {
    line-height: 1.4;
  }
  /* (3) keep the wordmark from shifting between header states: with the nav
     hidden, the row collapses to wordmark | toggle. */
  .site-head__row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  /* align the menu's top padding so its wordmark lands at the same y
     as the header wordmark (header uses padding-top var(--s-3)) */
  .menu {
    padding-top: var(--s-3);
  }

  /* (1) all four lines fit: shrink the giant menu type so Index/About/
     Contact/Notice all show without scrolling.
     (6) no stagger motion on open — appear together, immediately. */
  .menu__nav a {
    font-size: clamp(2.25rem, 11.5vw, 3.5rem);
    line-height: 1.05;
    opacity: 1;
    transform: none;
    transition: color var(--dur-fast) var(--ease);
  }
  body.menu-open .menu__nav a { transition-delay: 0s; }

  /* (4) hide the time/location inside the menu */
  .menu .menu__clocks {
    display: none;
  }
  /* (5) hide the menu footer ("Ahmad Dibo — CREATIVE… EST. 2026") */
  .menu .menu__foot {
    display: none;
  }
  /* center the nav block vertically now that clocks/foot are gone */
  .menu__nav {
    margin-block: auto;
  }
}