/* ============================================================================
   Shared site styles — Jayant Manchanda
   Loaded by Home.dc.html, Projects.dc.html and Sound and Art.dc.html.

   Every colour, face, radius and shadow comes from the Organic design-system
   tokens in _ds/organic-…/styles.css. Class names here are prefixed (site-,
   page-, row-, media-, lb-) so they can never collide with the design
   system's own component classes (.card, .nav, .dialog, …).
   ============================================================================ */

/* --- Motion scale ---------------------------------------------------------
   One place to tune the feel of the whole site. --ease-out is the same
   cubic-bezier the page-entrance animations already used; everything else
   is derived from it so hovers, page transitions and the lightbox all move
   with the same character. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.34s;
  --dur-slow: 0.6s;
}

/* --- Type ------------------------------------------------------------------
   Overrides the design system's Caprasimo/Figtree pair. Everything in the DS
   stylesheet reads these two variables, so redefining them here (site.css is
   linked after styles.css) re-faces the whole site.

     Cormorant Unicase  — page titles. Its caps-height lowercase gives the big
                          headings an inscriptional look nothing else here has.
     Cormorant Garamond — section headings and all running body copy.
     Space Mono         — every uppercase label: nav, eyebrows, kickers, meta,
                          card titles, buttons. The retro counterweight.
     Inconsolata        — dense technical lists (the Toolkit / Now columns).  */
:root {
  --font-display: "Cormorant Unicase", "Cormorant Garamond", Georgia, serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-code: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Cormorant is a light-set face — 600 gives headings the weight Caprasimo
     carried at 400. */
  --font-heading-weight: 600;
}

/* --- Base ---------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-600); }

/* Themed keyboard focus everywhere — never the default blue ring. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Cross-page transitions ---------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.22s ease both vt-out; }
::view-transition-new(root) { animation: 0.45s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Entrance ------------------------------------------------------------
   Stagger by setting --d on the element: <div class="rise" style="--d:.14s">.
   One keyframe + one custom property replaces the per-element animation
   shorthand that used to be repeated in every inline style attribute. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.rise {
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--d, 0s);
}

/* --- Page shell ---------------------------------------------------------- */
.page {
  font-family: var(--font-body);
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 88px;
}

.site-nav a {
  position: relative;
  font-family: var(--font-mono);
  /* Space Mono is a wide face — less tracking than the old sans needed. */
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Underline wipes in from the left rather than snapping on. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

.site-nav a[aria-current="page"] { color: var(--color-text); }
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--color-accent);
}

.page-head { margin-bottom: 72px; }
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  /* Fluid rather than stepped at a breakpoint — Caprasimo is wide, and a
     hard 44px overflows a 320px phone before any media query would fire. */
  font-size: clamp(30px, 7.5vw, 44px);
  line-height: 1.1;
  margin: 0 0 16px;
}
/* Cormorant sets small — running copy is ~2px larger than the sans it
   replaced, with a touch more leading, to land on the same reading colour. */
.page-intro {
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
  color: var(--color-neutral-800);
}

/* Small uppercase section label (About / Work / Toolkit / Now). */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
  margin: 0 0 20px;
}
.eyebrow-2 { color: var(--color-accent-2-700); }

/* --- Editorial row: 140px kicker column + content ------------------------- */
.row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--color-neutral-200);
}
.row-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-accent-2-700);
  padding-top: 7px;
}
.row-title {
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.2;
}
.row-body {
  font-size: 17.5px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 58ch;
  color: var(--color-neutral-800);
}
.row-body:last-child { margin-bottom: 0; }
.row-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  /* Long URL labels must break rather than push the grid wide on a phone. */
  overflow-wrap: anywhere;
}
.row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-neutral-600);
}

/* --- Media grid ----------------------------------------------------------
   Used for the release covers and every video card on Sound & Art. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 28px 20px;
  max-width: 620px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.media-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.media-item { min-width: 0; }

/* The clickable surface. A <button> for videos (opens the lightbox), an <a>
   for anything that leaves the site — both get the same treatment. */
.media-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.media-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  /* --radius-sm (8px), not the system's --radius-lg (28px): a 28px corner eats
     into a 16:9 still and reads as a rounded button rather than a frame. */
  border-radius: var(--radius-sm);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.media-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hqdefault is letterboxed 4:3 — cover crops it back to a clean 16:9. */
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-mid) var(--ease-out);
}
.media-thumb.is-video { aspect-ratio: 16 / 9; }
.media-thumb.is-square { aspect-ratio: 1; }

.media-open:hover .media-thumb,
.media-open:focus-visible .media-thumb {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.media-open:hover .media-thumb img { transform: scale(1.05); }
.media-open:active .media-thumb { transform: translateY(-1px); }

/* Play affordance — always faintly present, firms up on hover. */
.media-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to top, rgba(32, 30, 29, 0.32), rgba(32, 30, 29, 0));
  opacity: 0.85;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.media-open:hover .media-play { opacity: 1; }
.media-play span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(245, 234, 216, 0.92);
  color: var(--color-accent-700);
  box-shadow: var(--shadow-sm);
  transform: scale(0.9);
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out);
}
.media-open:hover .media-play span {
  transform: scale(1);
  background: var(--color-bg);
}

.media-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 12px 0 0;
  line-height: 1.4;
}
.media-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 5px;
}

/* --- Lightbox ------------------------------------------------------------
   Native <dialog>. The open/close transition is pure CSS — @starting-style
   plus allow-discrete means the close animates too, instead of the dialog
   vanishing the instant .close() is called. */
.lb {
  /* Three constraints: the design cap, the viewport width, and — for short
     or landscape phones — the width at which a 16:9 frame plus its bar still
     fits the viewport height. Whichever is smallest wins, so the player never
     overflows and never letterboxes. */
  width: min(920px, calc(100vw - 32px), calc((100dvh - 110px) * 16 / 9));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              overlay var(--dur-mid) allow-discrete,
              display var(--dur-mid) allow-discrete;
}
.lb[open] { opacity: 1; transform: none; }
@starting-style {
  .lb[open] { opacity: 0; transform: translateY(12px) scale(0.97); }
}

.lb::backdrop {
  background: rgba(32, 30, 29, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out),
              overlay var(--dur-mid) allow-discrete,
              display var(--dur-mid) allow-discrete;
}
.lb[open]::backdrop { opacity: 1; }
@starting-style {
  .lb[open]::backdrop { opacity: 0; }
}

.lb-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.lb-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.lb-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  color: var(--color-bg);
  font-family: var(--font-body);
}
.lb-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.lb-close {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 14px;
  /* font-family after any `font` shorthand — the shorthand resets it. */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-bg);
  background: rgba(245, 234, 216, 0.16);
  transition: background var(--dur-fast) var(--ease-out);
}
.lb-close:hover { background: rgba(245, 234, 216, 0.3); }

/* --- Responsive -----------------------------------------------------------
   Three steps: tablet tightens the kicker column, phone stacks the editorial
   row entirely, and narrow phones drop the media grid to two columns. */

/* Tablet / small laptop — the page is fluid below ~944px. */
@media (max-width: 860px) {
  .page { padding: 40px 24px 80px; }
  .page-head { margin-bottom: 56px; }
  .row { grid-template-columns: 110px 1fr; gap: 20px; }
  .media-grid { max-width: none; }
}

/* Phone — the 140px kicker column no longer earns its width, so the row
   stacks and the kicker becomes a label above the title. */
@media (max-width: 640px) {
  .page { padding: 28px 20px 64px; }
  .site-nav { gap: 18px; margin-bottom: 48px; }
  .page-head { margin-bottom: 40px; }
  .page-intro { font-size: 17px; line-height: 1.5; }

  .row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .row-kicker { padding-top: 0; }
  .row-title { font-size: 23px; }
  .row-body { font-size: 16.5px; }

  .media-grid,
  .media-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .media-title { font-size: 11.5px; }

  /* Hover lift is meaningless on touch; keep the press feedback only. */
  .media-open:hover .media-thumb { transform: none; box-shadow: var(--shadow-sm); }
  .media-open:hover .media-thumb img { transform: none; }
  .media-play span { width: 36px; height: 36px; }

  .lb { width: min(calc(100vw - 20px), calc((100dvh - 100px) * 16 / 9)); }
  .lb-close { padding: 8px 16px; }
}

/* Narrow phones — two columns still hold at 320px (≈130px cards); only the
   nav needs to give, since three mono labels are close to the full width. */
@media (max-width: 380px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 11px; letter-spacing: 0.05em; }
  .media-grid,
  .media-grid.is-wide { gap: 18px 12px; }
}

/* Coarse pointers (touch) at any width: no hover transforms, larger targets. */
@media (hover: none) {
  .media-open:hover .media-thumb,
  .media-open:hover .media-thumb img { transform: none; }
  .site-nav a::after { transition: none; }
  .media-play { opacity: 1; }
}

/* --- Reduced motion -------------------------------------------------------
   Scoped to animation/transform rather than a blanket `* { transition: none }`
   so opacity-only fades (which don't cause motion sickness) still read as
   deliberate, and the lightbox still closes cleanly. */
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .media-open:hover .media-thumb,
  .media-open:hover .media-thumb img,
  .media-open:active .media-thumb { transform: none; }
  .lb, .lb[open] { transform: none; }
  * { transition-duration: 0.01ms !important; }
}