/* ═══════════ Large-screen scaling ═══════════
   The base design is tuned for ~1440px. On wider screens everything is scaled by
   --s so type, cards and the reading column grow with the viewport instead of
   floating small in the middle. Loaded last so it overrides styles.css and the
   inline <style> in Portfolio.html. */

/* --sw grows with width, --sh with height; the smaller one wins, so an ultrawide
   (e.g. 4000×1400) is scaled by its height and never gets type too big to fit. */
:root { --sw: 1; --sh: 1; --s: min(var(--sw), var(--sh)); }
@media (min-width: 1600px) { :root { --sw: 1.1; } }
@media (min-width: 1920px) { :root { --sw: 1.2; } }
@media (min-width: 2240px) { :root { --sw: 1.3; } }
@media (min-width: 2560px) { :root { --sw: 1.4; } }
@media (min-width: 3200px) { :root { --sw: 1.6; } }
@media (min-height: 850px)  { :root { --sh: 1.1; } }
@media (min-height: 950px)  { :root { --sh: 1.2; } }
@media (min-height: 1080px) { :root { --sh: 1.3; } }
@media (min-height: 1250px) { :root { --sh: 1.4; } }
@media (min-height: 1500px) { :root { --sh: 1.6; } }

/* content area widens with the scale, so ultrawide screens don't get huge empty margins */
@media (min-width: 1600px) { :root { --container-max: calc(1800px * var(--s)); } }

/* ── Case study: centre the reading column at every desktop width ── */
@media (min-width: 1101px) {
  .cs {
    grid-template-columns: calc(220px * var(--s)) minmax(0, calc(780px * var(--s))) calc(220px * var(--s));
    justify-content: center;
    column-gap: clamp(40px, 5vw, 120px);
    padding-left: var(--side-pad);
    padding-right: var(--side-pad);
  }
  .cs-toc { width: calc(220px * var(--s)); }
}

@media (min-width: 1600px) {
  /* header */
  .site-logo { font-size: calc(15px * var(--s)) !important; }
  .site-nav { padding: calc(12px * var(--s)) calc(24px * var(--s)) !important; gap: calc(24px * var(--s)) !important; }
  .site-nav a { font-size: calc(13px * var(--s)) !important; }
  .lang-btn { font-size: calc(12px * var(--s)) !important; }
  header.site-header { padding-top: calc(24px * var(--s)) !important; padding-bottom: calc(24px * var(--s)) !important; }

  /* body copy + labels (same selectors as the type kit in styles.css, one step more specific) */
  html p:not(.cs-quote):not(.hero-lede), html .stk-desc, html .wg-desc, html .wm-desc, html .cs-p, html .cs-hl-d,
  html .cs-flow-text p, html .cs-learn p, html .career-c2, html .skills-ul li, html .proc-tags, html .prin-d, html .stk-ctacard-s {
    font-size: calc(14px * var(--s)) !important;
  }
  html .cs-p { font-size: calc(15px * var(--s)) !important; max-width: calc(640px * var(--s)); }
  html .t-eyebrow, html .cs-eyebrow, html .cs-meta-k, html .skills-k, html .proc-n, html .prin-n, html .stk-ctacard-k, html .cs-end-k {
    font-size: calc(12px * var(--s)) !important;
  }
  html .wg-meta, html .wm-meta, html .ct-details, html .career-c3, html .career-sub, html .hero-in-5, html .ab-hint, html .stk-hint,
  html .hero-scroll, html .cs-toc-item, html .cs-back, html .cs-meta-v, html .career-note {
    font-size: calc(13px * var(--s)) !important;
  }
  html .cs-toc-item { font-size: calc(14px * var(--s)) !important; }
  html .stk-tagline { font-size: calc(11px * var(--s)) !important; }

  /* home hero */
  .hero-photo > div { width: min(calc(220px * var(--s)), 26vh) !important; border-radius: calc(24px * var(--s)) !important; }
  .hero-name { font-size: calc(64px * var(--s)) !important; }
  .hero-name .hero-apos { font-size: calc(20px * var(--s)) !important; }
  html h1.hero-in .hero-side { font-size: calc(20px * var(--s)) !important; }
  html .hero-lede { font-size: calc(20px * var(--s)) !important; }

  /* work wheel */
  .stk {
    --W: min(calc(780px * var(--s)), 44vw, calc((100vh - 160px) * 0.72));
    padding: 0 max(var(--side-pad), calc((100vw - 1400px * var(--s)) / 2));
  }
  .stk-title { font-size: clamp(26px, min(3.2vw, 5.4vh), calc(64px * var(--s))); }
  .stk-desc { max-width: calc(360px * var(--s)); }
  .stk-cursor { font-size: calc(13px * var(--s)); padding: calc(10px * var(--s)) calc(16px * var(--s)); }

  /* work grid */
  html .wg-title { font-size: calc(12px * var(--s)) !important; }

  /* case study */
  .cs-title { font-size: clamp(38px, 4.6vw, calc(64px * var(--s))); }
  html .cs-h { font-size: calc(34px * var(--s)) !important; max-width: calc(620px * var(--s)); }
  .cs-flow-text h3, .cs-learn h3, .cs-hl-t { font-size: calc(24px * var(--s)) !important; }
  .cs-quote { font-size: calc(26px * var(--s)); }
  .cs-end-t { font-size: calc(44px * var(--s)) !important; }
  .cs-end-d { font-size: calc(14px * var(--s)); } .cs-end-cta { font-size: calc(13px * var(--s)); }

  /* contact */
  .ct-inner { max-width: calc(820px * var(--s)); }
  html .ct-title { font-size: calc(64px * var(--s)) !important; }
  html .ct-eyebrow { font-size: calc(12px * var(--s)) !important; }
  .ct-way { min-width: min(calc(420px * var(--s)), 86vw); padding: calc(14px * var(--s)) calc(22px * var(--s)); }
  .ct-way-k { font-size: calc(16px * var(--s)); }
  .ct-way-v { font-size: calc(16px * var(--s)); }
  .ct-status { font-size: calc(12px * var(--s)); }

  /* about: folders scale as one unit */
  .ab-folders { zoom: var(--s); }
  /* the folders block is already zoomed as one unit, so its hint must not get the type-kit scale on top (that made it ~25px) */
  html .ab-folders .ab-hint { font-size: 13px !important; }
  /* folder windows: the box grows with --s (set inline via var), the text follows the same type rules as the case studies below */
  html .proc-t, html .prin-t { font-size: calc(17px * var(--s)) !important; }
  html .career-p { font-size: calc(15px * var(--s)) !important; }
  html .life-photo-cap { font-size: calc(13px * var(--s)) !important; }
  .life-photo { gap: calc(8px * var(--s)) !important; }
  html .skills-tools > div > div:last-child { font-size: calc(11px * var(--s)) !important; }
  .skills-pane, .proc-pane { padding: calc(24px * var(--s)) calc(28px * var(--s)) calc(28px * var(--s)) !important; }
  .skills-grid, .proc-grid { gap: calc(18px * var(--s)) !important; }
  .proc-step { padding: calc(20px * var(--s)) calc(22px * var(--s)) calc(18px * var(--s)) !important; border-radius: calc(20px * var(--s)) !important; }
  .skills-k { margin-bottom: calc(14px * var(--s)) !important; }
  .skills-ul { gap: calc(8px * var(--s)) !important; }
  .skills-tools { gap: calc(12px * var(--s)) !important; }
  .proc-tags { margin-top: calc(14px * var(--s)) !important; gap: calc(4px * var(--s)) !important; }
  .career-table { gap: calc(22px * var(--s)) !important; }
  .career-row { gap: calc(24px * var(--s)) !important; }
  .ab-window > div:first-child { height: calc(40px * var(--s)) !important; }
  .win-flow.win-photos { gap: calc(12px * var(--s)) !important; padding: calc(20px * var(--s)) calc(24px * var(--s)) calc(22px * var(--s)) !important; }
}

/* ═══════════ Mobile work list (.wm) ═══════════
   Used on screens under 900px (Work page and below the hero on Home).
   Titles stacked; the active one opens a photo card + description under it. */
.wm { position: relative; z-index: 20; min-height: 100vh; min-height: 100svh; background: #F5F1EA;
  padding: 110px var(--side-pad) 56px; box-sizing: border-box; }
.home-mobile .wm { min-height: 0; padding-top: 24px; background: transparent; }
.wm-list { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.wm-title { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.05; color: var(--ink) !important; opacity: 0.32; transition: opacity 300ms ease; }
.wm-item.is-active .wm-title { opacity: 1; }
.wm-body { margin: 12px 0 20px; animation: stk-in 700ms cubic-bezier(0.16,1,0.3,1) both; }
.wm-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 40vh; border-radius: 18px; overflow: hidden; background: #ECE8E1; }
.wm-card .stk-img { transition: opacity 700ms ease; }
.wm-desc { margin-top: 12px; max-width: 46ch; }
.wm-meta { margin-top: 6px; }

/* ═══════════ Phone fixes ═══════════ */
@media (max-width: 719px) {
  /* hero lockup: stack "welcome to" / name's / "portfolio" instead of scattering them */
  /* same lockup as desktop: "welcome to" left, "portfolio" right, both on the baseline of the name's last line (next to ’s) */
  h1.hero-in { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end !important; align-items: last baseline !important; justify-content: center !important; gap: 10px !important; width: fit-content; margin: 0 auto !important; }
  .hero-name { display: block !important; text-align: center; white-space: normal !important; }
  .hero-name-txt { display: inline; }

  /* hero fills the visible viewport (svh excludes the browser bars) so the scroll hint is never hidden under them */
  /* hero runs 15% past the first screen so the glass shape at the bottom isn't clipped; the scroll hint stays inside the first screen */
  .home-mobile-hero { height: auto !important; }
  .home-mobile-hero > section { height: 115vh !important; height: 115svh !important; padding-bottom: calc(96px + 15vh) !important; padding-bottom: calc(96px + 15svh) !important; }
  .home-mobile-hero .hero-in-4 { bottom: calc(15vh + 44px) !important; bottom: calc(15svh + 44px) !important; }

  /* phone: the rotating word sits on its own line under "I create and design", centred */
  .hero-lede .rw { display: block !important; margin: 2px auto 0; text-align: center !important; }

  /* hero photo ~30% larger than the desktop clamp gives on a phone */
  .hero-photo > div { width: min(170px, 28vh) !important; }

  /* about: folder window uses the full width, bigger tap area for the close dot */
  /* phone: pin the window to the centre of the visible viewport (svh) instead of the taller stage, and keep it inside the screen */
  .ab-window { width: calc(100vw - 32px) !important; position: fixed !important; left: 50vw !important; top: 50vh !important; top: 50svh !important; max-height: calc(100svh - 110px) !important; }
  .ab-window button[aria-label="close"] { position: relative; }
  .ab-window button[aria-label="close"]::after { content: ''; position: absolute; inset: -14px; }
  .skills-tools > div { width: auto !important; min-width: 0; }
  .skills-tools > div > div:last-child { overflow-wrap: anywhere; }

}

/* case study on phones + tablets: role / year / team / skills in two columns */
@media (max-width: 900px) {
  .cs-meta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 20px !important; }
}

/* "view case" pill on project photos: light glass pill needs dark text
   (styles.css forces cream text on it, which made it cream-on-cream) */
html .stk-viewbtn, html .wm-card .stk-viewbtn { color: #2A2A2A !important; background: rgba(245,241,234,0.88); }

/* ═══════════ Clickable text = accent purple ═══════════ */
html .site-nav a.is-active, html .cs-toc-item.is-active, html .cs-back,
html .cs-end-item .cs-end-t, html .mmenu-link, html .career-more { color: var(--accent) !important; }
html .mmenu-link { opacity: 0.6; } html .mmenu-link.is-active { opacity: 1; }
html .cs-end-item:hover .cs-end-t { opacity: 1; color: var(--accent-soft) !important; }
html .site-header.on-dark .site-nav a.is-active { color: #F5F1EA !important; }

/* phone: contact rows read bigger */
@media (max-width: 719px) { .ct-way-k, .ct-way-v { font-size: 17px !important; } .ct-way { padding: 16px 20px !important; } }