/* Prototype D's chrome for every other page (branch homepage-cards,
   2026-11-12): the page's colour and its slowly turning ground, the top
   nav (the name, the page links, Résumé) and the footer, after home-d.html.
   Linked after each page's own <style>, so it wins where they meet; the
   pages keep their own content styles. site.js mounts the ground and the
   pointer's halftone, copies the email and keeps the name's colour.

   Body classes: .d on every page that uses this, plus one of
   .d-panel  (About, 404: the old court panel becomes one big rounded window
              under the nav, one screen tall)
   .d-wall   (Creative code, Other work: the panel is a tall rounded tile and
              the document scrolls)
   .d-case   (the case studies: the hero is a full-width tile under the nav,
              and the section list floats beside the reading column) */

/* ---- the page's colour (home-d.html's) -------------------------------- */
:root[data-theme="day"] { --paper: #F6F6F3 !important; --ink: #121212 !important; --link: #253D54 !important; }
:root[data-theme="night"] { --paper: #0C3C20 !important; --ink: #F8F8F8 !important; --link: #E7DB79 !important; }
html { background: var(--paper); }
body.d { background: transparent !important; }   /* the ground is under the body */

#ground { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 0.8s ease-out; }
#ground.is-in { opacity: 1; }
#ground canvas { display: block; }
#screen { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ---- the frame: one column, 1440px at most ------------------------------ */
body.d #page {
  display: block;
  max-width: 1440px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0 56px;
}

/* ---- nav ---------------------------------------------------------------- */
#site-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font-family: "Pangram Sans Rounded", system-ui, sans-serif;
  view-transition-name: site-nav;
}
:root[data-theme="day"] #site-nav ul { font-weight: 600; }
#site-nav ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
#site-name {
  font-family: "City Boy", system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--name, #F42934);
  text-decoration: none;
  transition: color 0.25s ease-out;
}
.d-link {
  position: relative;
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; letter-spacing: -0.02em;
  color: var(--link); text-decoration: none; cursor: pointer;
  transition: opacity 0.14s ease-out;
}
/* the underline is drawn in like a court line being painted; the page
   you're on keeps it */
.d-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 1px;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale 0.28s cubic-bezier(0.2, 0, 0, 1);
}
.d-link[aria-current]::after { scale: 1 1; }
@media (hover: hover) { .d-link:hover { opacity: 0.7; } .d-link:hover::after { scale: 1 1; } }
.d-link:focus-visible, .d-pill:focus-visible, #site-name:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.d-pill {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-decoration: none;
  transition: scale 0.14s ease-out;
}
.d-pill:active { scale: 0.96; }

/* ---- footer --------------------------------------------------------------- */
/* a sign-off over a hairline: "Say hi" and the email, large (it copies
   itself, never a mail app), then LinkedIn, Résumé and the © line on the
   right. The page links left the footer (they are in the nav, and in its
   menu on phones), at the user's request. */
#site-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px 48px; margin-top: 88px; padding: 36px 0 44px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 16px; }
.f-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); }
#site-foot .f-mail { font-size: clamp(26px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); }
#site-foot .f-mail::after { bottom: -6px; height: 3px; }
#site-foot .f-mail .ball { width: 0.36em; height: 0.36em; margin-top: -0.18em; left: calc(100% + 0.3em); }
.f-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.f-links { display: flex; gap: 28px; }
.f-small { margin: 0; font-size: 13px; letter-spacing: -0.01em; color: color-mix(in srgb, var(--ink) 50%, transparent); }
@media (max-width: 900px) {
  #site-foot { grid-template-columns: 1fr; margin-top: 56px; padding: 28px 0 36px; }
  #site-foot .f-mail { font-size: clamp(22px, 6.4vw, 30px); }
  .f-side { align-items: flex-start; }
}
.d-mail .ball {
  position: absolute; left: calc(100% + 10px); top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF7A0, #E7DB79 60%, #C9BD4F); box-shadow: 2px 4px 3px #00000033;
  opacity: 0; pointer-events: none;
}
.d-mail.is-copied .ball { animation: d-hop 0.7s cubic-bezier(0.3, 0, 0.3, 1) both; }
@keyframes d-hop {
  0% { opacity: 0; translate: 0 0; scale: 1; }
  10% { opacity: 1; }
  40% { translate: 0 -16px; scale: 1; }
  62% { translate: 0 0; scale: 1.25 0.75; }
  78% { translate: 0 -5px; scale: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---- About and the 404: the panel is a window one screen tall ------------ */
body.d-panel #panel {
  width: 100%;
  height: max(520px, calc(100svh - 92px));
  flex: none;
  border-radius: 24px;
  box-shadow: 0 1px 2px #0000001F, 0 18px 40px -22px #00000059;
}

/* ---- Creative code and Other work: no box, straight on the page --------
   The work sits on the ground itself, as wide as the nav, and the document
   scrolls. A tall dark-green tile was tried first and dropped at the
   user's request ("full screen outside the box"). The pages' cream type
   was set for that green, so it is turned to ink here. Other work's strips
   bleed to the window's edges. */
body.d-wall { --edge: max(56px, calc((100vw - 1440px) / 2 + 56px)); }
html:has(body.d-wall) { overflow-x: clip; }
body.d-wall #panel {
  flex: none;
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  view-transition-name: none;
}
body.d-wall #scroll { position: relative; inset: auto; overflow: visible; }
body.d-wall #wall { max-width: none; padding: 32px 0 72px; }
body.d-wall :is(#wall-head h1, #wall-head p) { color: var(--ink); }
body.d-wall :is(.piece p, .project-block header p) { color: color-mix(in srgb, var(--ink) 70%, transparent); }
body.d-wall .shot figcaption { color: color-mix(in srgb, var(--ink) 50%, transparent); }
body.d-wall :is(.media, .shot [data-lightbox]):focus-visible { outline-color: var(--ink); }
body.d-wall .shot :is(img, video) {
  outline-color: color-mix(in srgb, var(--ink) 8%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
body.d-wall .strip {
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent;
}

/* ---- case studies ------------------------------------------------------ */
body.d-case #column { max-width: none; }
body.d-case #hero { box-shadow: 0 1px 2px #0000001F, 0 18px 40px -22px #00000059; }
@media (min-width: 1101px) {
  body.d-case #hero { min-height: calc(100svh - 92px); }
  body.d-case #hero .screen { max-height: min(568px, calc(100svh - 252px)); }
}
/* the old sidebar is now a rail that floats beside the reading column once
   the hero has gone by: the way back, the project's name, its sections */
body.d-case #sidebar {
  position: fixed;
  left: max(56px, calc((100vw - 1440px) / 2 + 56px));
  top: 50%;
  translate: -12px -50%;
  width: 210px;
  height: auto;
  max-height: calc(100svh - 160px);
  padding: 0; margin: 0; border: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, translate 0.3s cubic-bezier(0.2, 0, 0, 1), visibility 0s 0.3s;
  view-transition-name: none;
}
body.d-case.rail-on #sidebar { opacity: 1; visibility: visible; translate: 0 -50%; transition: opacity 0.3s ease-out, translate 0.3s cubic-bezier(0.2, 0, 0, 1); }
body.d-case #sidebar #toc { width: auto; }
body.d-case #sidebar .proj-name { white-space: normal; }
/* no room beside the 720px column: the rail stays away */
@media (max-width: 1279px) { body.d-case #sidebar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .d-link::after, .d-pill, #site-name, #ground, body.d-case #sidebar { transition: none !important; }
  .d-mail.is-copied .ball { animation: none; opacity: 1; }
}

/* ---- phones ------------------------------------------------------------ */
@media (max-width: 900px) {
  body.d #page { padding: 0 20px; }
  #site-nav ul li:not(.keep) { display: none; }
  body.d-panel #panel { border-radius: 16px; }
  body.d-wall { --edge: 20px; }
  body.d-wall #wall { padding: 20px 0 48px; }
  /* About's desk keeps its 1101x860 proportions, full height, and scrolls
     sideways (as it did beside the sidebar); the nav and footer stay put */
  html:has(body.d-desk), body.d-desk { height: auto; overflow: visible; }
  body.d-desk #page { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  body.d-desk #panel { width: auto; height: calc(100svh - 92px); aspect-ratio: 1101 / 860; }
  body.d-desk :is(#site-nav, #site-foot) { position: sticky; left: 0; width: calc(100vw - 40px); }
}

body.d { -webkit-font-smoothing: antialiased; }
body.d :is(h1, h2, h3) { text-wrap: balance; }
#site-foot { padding-bottom: max(44px, env(safe-area-inset-bottom)); }
@media (max-width: 900px) { #site-foot { padding-bottom: max(36px, env(safe-area-inset-bottom)); } }