/* ===========================================================================
   Shared chrome: the wordmark lockup, the overlay menu and the Menu pill.
   Loaded last on every static page so its palette and body face win over
   whatever stylesheet that page was originally built with.
   =========================================================================== */
@font-face { font-family: EBGaramond; src: url("/assets/EBGaramond-400-vietnamese.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: EBGaramond; src: url("/assets/EBGaramond-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: EBGaramond; src: url("/assets/EBGaramond-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: HWCigars; src: url("/assets/HWCigars-W26.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #171715;
  --paper: #e7e0d5;
  --cream: #f4f0e8;
  --sans: EBGaramond, "EB Garamond", Georgia, serif;
  --display: HWCigars, Georgia, serif;
  --pad: clamp(20px, 3.2vw, 52px);
}
body { font-family: var(--sans); }

/* The header spans the viewport so the wordmark can frame it. */
.site-chrome { position: fixed; z-index: 900; inset: var(--pad); display: flex; height: auto; align-items: flex-start; justify-content: flex-end; pointer-events: none; color: var(--cream); mix-blend-mode: difference; }
.site-chrome > *:not(.brand) { pointer-events: auto; }

/* --- wordmark, matched to the home page ---------------------------------
   Same viewport-spanning lockup: the Pinyon Script name top-left, `content`
   and the mirrored `portfolio®` bottom-right. Vectorised from the font so it
   needs no extra webfont here. */
.case-header .brand {
  --brand-w: 8.6em; --brand-h: 2.7em;
  position: absolute; inset: 0;
  width: auto; height: auto;
  font-size: 1.9rem; line-height: .8;
  color: currentColor; pointer-events: none;
}
.case-header .brand span { pointer-events: auto; }
.brand__normal { position: absolute; top: .2em; left: -.02em; width: 3.45em; }
.brand__script { display: block; width: 100%; height: auto; overflow: visible; }
.brand__script-fill { fill: currentColor; }
.brand__script-line { display: none; }
.brand__is { position: absolute; right: .1em; bottom: 1.15em; font-family: var(--display); font-style: italic; font-size: 1.28em; }
.brand__boring { position: absolute; right: 0; bottom: 0; font-family: var(--display); font-size: 1em; font-weight: 500; text-transform: uppercase; transform: scale(-1, -1); letter-spacing: .011em; white-space: nowrap; }
.brand__boring sup { display: inline-block; margin: 0 .2em; font-size: .4em; font-weight: 400; transform: scale(-1, -1); }

@media (max-width: 950px) {
  /* On a phone the bottom-right pair spans most of the width — keep the name only. */
  .case-header .brand { font-size: 1.5rem; }
  .brand__is, .brand__boring { display: none; }
}

/* --- overlay menu, ported from the home page ----------------------------
   Same panel, same grid, same beige. Variables are remapped to this
   stylesheet's palette; the staggered entrance is CSS here because these
   pages do not load GSAP. */
.menu { position: fixed; inset: 0; z-index: 1000; padding: var(--pad); background: var(--paper); color: var(--ink); transform: translateY(-101%); visibility: hidden; transition: transform .85s cubic-bezier(.22,1,.36,1), visibility .85s; pointer-events: auto; }
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu__top { display: flex; justify-content: space-between; align-items: flex-start; }
.menu__top nav { display: flex; gap: 2.5rem; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.25rem); text-transform: uppercase; }
.menu__top nav a { transition: opacity .25s; }
.menu__top nav:hover a:not(:hover) { opacity: .35; }
.menu__close { position: relative; width: 2.7rem; height: 2.7rem; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.menu__close span { position: absolute; top: 50%; left: 23%; width: 54%; height: 1px; background: currentColor; transform: rotate(45deg); }
.menu__close span:last-child { transform: rotate(-45deg); }
.menu__feature { display: grid; grid-template-columns: minmax(18rem, 31vw) 1fr; gap: 10vw; align-items: end; height: 74vh; padding: 5vh 5vw 2vh; }
.menu__visual { position: relative; }
.menu__visual .media { display: block; aspect-ratio: 4/5; height: min(58vh, 37rem); overflow: hidden; }
.menu__visual .media img { width: 100%; height: 100%; object-fit: cover; }
.menu__visual > span { display: block; margin-top: .7rem; font-family: var(--display); font-size: 2.3rem; text-align: center; }
.menu__projects { align-self: center; max-width: 45rem; }
.menu .eyebrow { margin-bottom: 1.5rem; font-family: var(--display); font-size: 1.6rem; }
.menu__projects a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .68rem 0; border-bottom: 1px solid rgba(23,23,21,.35); font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; }
.menu__projects em { font-family: var(--sans); font-size: 1.15rem; font-style: normal; text-transform: none; }
.menu__mail { position: absolute; left: var(--pad); bottom: var(--pad); font-family: var(--sans); font-size: 1.65rem; text-decoration: underline; text-underline-offset: .2em; }

/* Contents rise a beat after the panel lands. */
.menu__top nav a, .menu__visual, .menu__projects a, .menu__mail { opacity: 0; transform: translateY(1.5rem); transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1); }
.menu.is-open .menu__top nav a, .menu.is-open .menu__visual,
.menu.is-open .menu__projects a, .menu.is-open .menu__mail { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__top nav a:nth-child(1) { transition-delay: .30s; }
.menu.is-open .menu__top nav a:nth-child(2) { transition-delay: .36s; }
.menu.is-open .menu__top nav a:nth-child(3) { transition-delay: .42s; }
.menu.is-open .menu__visual { transition-delay: .36s; }
.menu.is-open .menu__projects a:nth-of-type(1) { transition-delay: .42s; }
.menu.is-open .menu__projects a:nth-of-type(2) { transition-delay: .47s; }
.menu.is-open .menu__projects a:nth-of-type(3) { transition-delay: .52s; }
.menu.is-open .menu__projects a:nth-of-type(4) { transition-delay: .57s; }
.menu.is-open .menu__mail { transition-delay: .62s; }

@media (max-width: 950px) {
  .menu__top nav { flex-direction: column; gap: .3rem; padding-top: 3.6rem; }
  .menu__feature { display: block; height: auto; padding: 3rem 0 0; }
  .menu__visual { display: none; }
  .menu__projects a { font-size: 1.15rem; }
  .menu__projects em { font-size: .8rem; }
  .menu__mail { font-size: 1rem; }
}

/* The pill lives here, not in a per-page stylesheet — about/skills do not load
   case-editorial.css and were rendering a default browser button. */
.case-menu, .chrome-menu {
  display: block;
  border: 0; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  min-height: 2.5rem; padding: .55rem 1.3rem;
  font-family: var(--display); font-size: 1rem; text-transform: none;
  cursor: pointer;
}

/* --- aligning the portfolio.css pages -----------------------------------
   about.html and skills.html were built on a warmer, browner palette with a
   gradient hero. Remap the accents and flatten the hero so they read as the
   same site as the home page and the case studies. */
:root {
  --gold: #a87560;
  --rust: #a87560;
  --plum: #171715;
  --line: rgba(23, 23, 21, .22);
  --clay: #a87560;
  --serif: HWCigars, Georgia, serif;
}
.page-hero, .home-hero { background: var(--ink) !important; color: var(--cream); }
.page-hero:before, .home-hero:before { display: none; }
.page-hero .lede { color: rgba(244, 240, 232, .78); }
.sheet.dark, .sheet.ink { background: var(--ink); color: var(--cream); }
.sheet.dark .section-number, .sheet.ink .section-number,
.sheet.dark .rule-grid b, .sheet.ink .rule-grid b { color: var(--clay); }
.sheet.cream { background: var(--cream); }
.sheet.sand { background: var(--paper); }
.language { display: none; }   /* no VN copy exists yet, so the switch is a dead end */

/* The remaining warm accents are hardcoded hexes rather than variables, so
   they need naming here. Italic emphasis and index numbers take the clay
   accent; the sand and footer tones join the site palette. */
.page-hero h1 em,
.hero-copy h1 em, .projects-intro em, .method-section em, .contact-section em,
.sheet.dark .sheet-head h2 em, .sheet.ink .sheet-head h2 em { color: #c69a86; }
.sheet-head h2 em { color: var(--clay); }
/* `.sheet-head p` is (0,1,1) and was outranking a bare `.section-number`. */
.sheet-head p.section-number, .sheet-head .section-number,
.section-number, .eyebrow, .stage-index,
.method-section .section-number, .method-grid b,
.result-line strong { color: var(--clay); }
.page-hero .section-number, .sheet.dark .sheet-head .section-number, .sheet.ink .sheet-head .section-number { color: #c69a86; }
.projects-intro, .sheet.sand, .cta-band { background: var(--paper); }
.contact-section, .project-page { background: var(--cream); }
.site-footer { background: var(--ink); color: rgba(244, 240, 232, .82); }
.site-footer .wordmark { color: var(--cream); }