/* ============================================================
   styles.css — Izabela Janczuk Portfolio
   Only two typefaces, site-wide:
     --sans  = Helvetica — main page titles + all body/UI text
     --serif = Fraunces  — subtitles (the "fancier" face, also the I.J. mark)

   Editorial palette: warm ivory/parchment base, dusty rose as the
   through-line accent, with pale blue, denim, forest, and oxblood used
   sparingly as single-moment interruptions — never backgrounds applied
   everywhere at once.
   ============================================================ */

:root {
  --bone: #f4efe6;
  --paper: #eee7da;
  --chalk: #f3efe7;      /* warm paper — primary editorial bg */
  --parchment: #ece3d3;  /* soft paper, one shade warmer than --paper */
  --pale-blue: #d9e3e5;  /* washed blue — quiet section wash */
  --denim: #a9bfc4;      /* faded blue accent */
  --forest: #657568;     /* muted forest green */
  --oxblood: #7a2e28;    /* brick — rules & marks only, never a fill */
  --ink: #252421;        /* soft black, not pure black */
  --ink-soft: #5a5248;
  --rose: #c99391;       /* dusty red */
  --rose-deep: #a9726d;
  --terracotta: #b06a45;
  --moss: #767a5c;
  --moss-deep: #64684a; /* darker moss for text on light backgrounds — 5.1:1 contrast on --bone */
  --stone: #d8cfbf;
  --line: rgba(37,36,33,0.16);
  --accent-blue: #8abcd6; /* the I.J. mark, site-wide */
  --blue-deep: #3e5f78;   /* mid-dark blue — between accent-blue and ink-blue */
  --ink-blue: #1c2b36;    /* dark blue ground for the About page */

  /* Single sans-serif face, site-wide — hierarchy comes from size,
     weight, and italics only. --serif is kept as an alias so existing
     rules that reach for it (bold/italic titles, etc.) still work. */
  --serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --pad: clamp(24px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(199,154,148,0.09), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(124,142,160,0.07), transparent 55%),
    var(--chalk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

.dogear { display: none; }

/* ============================================================
   EDITORIAL PRIMITIVES — small composable pieces used to build a
   different layout per section, instead of one repeated card
   ============================================================ */

.eyebrow {
  display: block; font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}

.rule { height: 1px; background: var(--line); border: none; }
.rule--short { width: 48px; }
.rule--denim { background: var(--denim); opacity: 0.55; }

.cap-num {
  font-family: var(--sans); font-size: 14px; font-style: italic;
  color: var(--ink-soft);
}
.cap-num em {
  font-style: italic; font-weight: 400; color: var(--ink-soft);
  margin-right: 6px;
}

/* wash — a full-bleed section tint, used sparingly for one moment at a time */
.wash-blue { background: var(--pale-blue); }
.wash-parchment { background: var(--parchment); }

/* Grain overlay */
.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.035; z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* Tag component */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px dashed var(--line);
  padding: 6px 12px; border-radius: 2px; margin-bottom: 28px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244,239,230,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; padding-bottom: 24px;
}

.logo {
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: 0.1em; color: var(--accent-blue);
}

.nav {
  display: flex; gap: 36px;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.nav a {
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.nav a:hover, .nav a.active { color: var(--ink); border-color: var(--accent-blue); }

.menu-toggle {
  display: none; background: none; border: none;
  color: var(--ink); font-size: 1.5rem; line-height: 1; padding: 4px;
}

/* Home page: header floats transparent over the full-bleed hero photo
   until the visitor scrolls past it, then it picks up the same solid
   bar every other page always has */
body.home-page .site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
body.home-page main { padding-top: 0; }
body.home-page .site-header .logo {
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  transition: color 0.3s;
}
body.home-page .site-header .nav a,
body.home-page .site-header .menu-toggle {
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  transition: color 0.3s;
}
body.home-page .site-header .nav a:hover,
body.home-page .site-header .nav a.active { border-color: #fff; }
body.home-page .site-header.scrolled {
  background: rgba(244,239,230,0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
body.home-page .site-header.scrolled .logo { text-shadow: none; }
body.home-page .site-header.scrolled .nav a,
body.home-page .site-header.scrolled .menu-toggle { color: var(--ink-soft); text-shadow: none; }
body.home-page .site-header.scrolled .nav a:hover,
body.home-page .site-header.scrolled .nav a.active { color: var(--ink); border-color: var(--accent-blue); }

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

.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }

.site-footer .wrap {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 56px; padding-bottom: 56px;
}

.footer-wordmark {
  font-family: var(--sans); font-weight: 500; font-size: 16px;
  letter-spacing: 0.1em; color: var(--accent-blue);
}

.footer-meta {
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: right; line-height: 1.9;
}
.footer-meta a {
  border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 0.2s;
}
.footer-meta a:hover { border-color: var(--rose-deep); }

/* ============================================================
   HOME PAGE — EDITORIAL OPENING SPREAD
   One full-bleed photograph stretched across the entire page width,
   with the name scrolling over it in a slow right-to-left marquee.
   ============================================================ */

.hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100dvh; min-height: 560px;
}

.hero-fig {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; margin: 0; background: var(--parchment);
}
.hero-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fig::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(37,36,33,0.12) 0%, rgba(37,36,33,0.22) 50%, rgba(37,36,33,0.32) 100%);
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero-label {
  position: absolute; left: var(--pad); bottom: clamp(24px, 5vh, 48px); z-index: 2;
  font-family: var(--sans); font-size: 15px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff;
}

.marquee { width: 100%; overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex; width: max-content;
  animation: marquee-scroll 7s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--sans); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.4rem, 11.5vw, 8.5rem); line-height: 1;
  letter-spacing: 0.02em; color: #8abcd6;
  padding-right: clamp(48px, 6vw, 100px);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Drag a new photo onto the hero image to preview a replacement */
.drop-hint {
  position: absolute; bottom: 16px; right: 16px; z-index: 3;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em;
  color: rgba(243,239,231,0.9); background: rgba(37,36,33,0.55);
  padding: 4px 10px; border-radius: 1px;
  pointer-events: none; opacity: 0; transition: opacity 0.3s; white-space: nowrap;
}
.hero-fig.dragover .drop-hint { opacity: 1; }
.hero-fig.dragover img { filter: brightness(0.6); }
.hero-fig.dragover::before {
  content: ""; position: absolute; inset: 8px; z-index: 3;
  border: 1px dashed rgba(243,239,231,0.7); pointer-events: none;
}

/* ============================================================
   HOME PAGE — WORK SECTION (bone background, below the cover)
   ============================================================ */

.intro {
  padding: 100px var(--pad) 100px;
  max-width: var(--maxw); margin: 0 auto;
}
.intro-text {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(16px, 1.9vw, 26px); line-height: 1.3;
  color: var(--ink-soft);
  white-space: nowrap;
}
.intro-text em { color: var(--ink); font-style: italic; }
.intro-text strong { font-weight: 600; }

.section-head {
  padding: 0 var(--pad) 40px;
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
}
.section-title {
  font-family: var(--sans); font-weight: 400; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.section-count { font-size: 14px; letter-spacing: 0.12em; color: var(--ink-soft); text-transform: uppercase; }

.work {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad) 100px;
}

/* ---- alternating entries, each visual a pulsing circular aura
   rather than a photograph ---- */
.entry {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center;
  padding: 64px 0;
}
.entry:nth-child(even) { grid-template-columns: 1fr 0.85fr; }
.entry:nth-child(even) .entry-visual { order: 2; }
.entry:nth-child(even) .entry-copy { order: 1; }

.entry-visual { display: flex; justify-content: center; }
.aura {
  width: clamp(220px, 26vw, 360px); aspect-ratio: 1/1; border-radius: 50%;
  filter: blur(10px);
  animation: aura-pulse 3s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.entry:hover .aura { transform: scale(1.04); }
.aura-a { background: radial-gradient(circle at 36% 32%, var(--pale-blue) 0%, var(--denim) 42%, transparent 72%); }
.aura-b { background: radial-gradient(circle at 36% 32%, var(--accent-blue) 0%, var(--blue-deep) 42%, transparent 72%); }
.aura-c { background: radial-gradient(circle at 36% 32%, var(--denim) 0%, var(--ink-blue) 42%, transparent 72%); }
@keyframes aura-pulse {
  0%, 100% { transform: scale(1); opacity: 0.62; }
  50% { transform: scale(1.06); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .aura { animation: none; }
}

.entry-copy { max-width: 460px; }
.entry-title {
  font-family: var(--sans); font-weight: 700; font-style: normal;
  font-size: 20px; line-height: 1.25; margin: 8px 0 10px; color: var(--ink);
}
.entry-desc {
  font-family: var(--sans); font-weight: 400; font-style: normal;
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
}
.entry-view {
  display: inline-block; margin-top: 20px;
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: opacity 0.2s;
}
.entry:hover .entry-view { opacity: 0.55; }

/* Scroll reveal — one shared easing/timing across the page so content
   settles in rather than snapping into place */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   ABOUT PAGE — inverted: dark ground, bone/white text
   ============================================================ */

body.about-page { background: var(--ink-blue); }
body.about-page .site-footer {
  background: var(--ink-blue);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: rgba(243,239,231,0.15);
}
/* The menu bar itself flips to the light accent blue on this page,
   with bone text and the I.J. mark in dark blue for contrast */
body.about-page .site-header {
  background: var(--accent-blue);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: rgba(28,43,54,0.2);
}
body.about-page .site-header .logo { color: var(--ink-blue); }
body.about-page .nav a { color: var(--bone); }
body.about-page .nav a:hover,
body.about-page .nav a.active { color: var(--ink-blue); border-color: var(--ink-blue); }
body.about-page .menu-toggle { color: var(--bone); }
body.about-page .footer-meta { color: rgba(243,239,231,0.75); }
body.about-page .footer-meta a:hover { border-color: var(--accent-blue); }

body.about-page .about-greeting { color: var(--chalk); }
body.about-page .about-cv-label { color: rgba(243,239,231,0.7); }
body.about-page .about-bio-text p { color: rgba(243,239,231,0.82); }
body.about-page .about-cv { border-top-color: rgba(243,239,231,0.18); }
body.about-page .cv-head { color: var(--chalk); }
body.about-page .cv-col ul li { color: rgba(243,239,231,0.75); }
body.about-page .cv-entry .t { color: var(--chalk); }
body.about-page .cv-entry .s { color: rgba(243,239,231,0.7); }

main.about-page {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(60px, 9vw, 100px);
}

.about-lead {
  display: grid; grid-template-columns: 1fr 0.65fr;
  gap: clamp(40px, 6vw, 80px); align-items: stretch;
  margin-bottom: clamp(56px, 8vw, 90px);
}

.about-greeting {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1;
  color: var(--ink); margin-top: -0.155em; margin-bottom: 28px;
}

.about-photo { overflow: hidden; border-radius: 2px; }
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(0.06) brightness(0.97) contrast(1.03);
}

.about-bio-text p {
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  max-width: 64ch; margin-bottom: 14px;
}
.about-bio-text p:last-child { margin-bottom: 0; }

.about-cv { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 80px); }
.about-cv-label {
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 40px;
}

.cv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

.cv-head {
  font-family: var(--sans); font-style: italic; font-size: 18px; font-weight: 400;
  color: var(--ink); margin-bottom: 16px; margin-top: 32px;
  text-wrap: pretty;
}
.cv-col > .cv-head:first-child { margin-top: 0; }

.cv-col ul li {
  font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 6px;
  text-wrap: pretty;
}

.cv-entry { margin-bottom: 16px; }
.cv-entry .t { font-size: 15px; color: var(--ink); font-weight: 500; line-height: 1.35; margin-bottom: 2px; text-wrap: pretty; }
.cv-entry .s { font-size: 14px; color: var(--ink-soft); line-height: 1.45; text-wrap: pretty; }

/* ============================================================
   PROJECTS PAGE
   ============================================================ */

.projects-page {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(60px, 9vw, 100px);
}

.page-head {
  padding-top: 24px; margin-bottom: 24px;
}

.page-display {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05;
  letter-spacing: -0.01em; margin-bottom: 14px;
  color: var(--ink);
}

.page-lead {
  font-size: 16px; color: var(--ink-soft); line-height: 1.6;
}

.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; margin-top: 0;
}

/* Project cards: gradient thumbnails matching home entry visuals */
.project-card { position: relative; display: block; overflow: hidden; border-radius: 2px; }
.project-card .thumb { aspect-ratio: 4/3; overflow: hidden; }
.project-card .thumb img { display: none; }

.project-card:nth-child(1) .thumb { background: linear-gradient(160deg, var(--pale-blue), var(--denim)); }
.project-card:nth-child(2) .thumb { background: linear-gradient(160deg, var(--accent-blue), var(--blue-deep)); }
.project-card:nth-child(3) .thumb { background: linear-gradient(160deg, var(--denim), var(--ink-blue)); }

.project-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(43,38,33,0.5) 0%, transparent 65%);
  font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 400; font-style: italic; color: rgba(255,255,255,0.95);
  text-align: left;
  opacity: 1;
  transition: background 0.3s;
}
.project-card:hover .project-overlay {
  background: linear-gradient(to top, rgba(43,38,33,0.65) 0%, transparent 65%);
}

/* ============================================================
   CASE STUDY PAGES (ecobite + segostop)
   ============================================================ */

.cs-hero {
  padding: clamp(60px, 9vw, 110px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.cs-hero .wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}

.cs-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 1.0; letter-spacing: -0.02em; margin-bottom: 16px;
}
.cs-meta {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 20px;
}
.cs-desc {
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  max-width: 52ch; margin-bottom: 12px;
}
.cs-collab { font-size: 14px; color: var(--ink-soft); opacity: 0.65; font-style: italic; text-wrap: pretty; }

.cs-hero-fig { margin: 0; overflow: hidden; border-radius: 2px; background: var(--paper); }
.cs-hero-fig img {
  width: 100%; display: block; height: auto;
  filter: sepia(0.06) brightness(0.97) contrast(1.03);
}

.cs-body { padding: clamp(56px, 9vw, 100px) 0; }

.cs-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color 0.2s;
}
.cs-back:hover { color: var(--ink); }

.cs-section { margin-bottom: clamp(32px, 4.5vw, 52px); }
.cs-section:last-child { margin-bottom: 0; }

.cs-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.01em; margin-bottom: 24px;
}
.cs-subh { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 28px 0 14px; }

.cs-text { max-width: none; }
.cs-text p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }

/* Ecobite — text stays the same ink as every other page; moss kept
   only as a non-text border accent */
.ecobite-page .cs-h       { color: var(--ink); }
.ecobite-page .cs-subh    { color: var(--ink); }
.ecobite-page .acc-group  { border-top: 1px solid rgba(118,122,92,0.3); }
.ecobite-page .acc        { border-bottom: 1px solid rgba(118,122,92,0.3); }
.ecobite-page .acc summary { color: var(--ink); }

/* Segostop — text stays ink; terracotta kept only as a non-text
   border/background accent */
.segostop-page .cs-h       { color: var(--ink); }
.segostop-page .cs-subh    { color: var(--ink); }
.segostop-page .acc-group  { border-top: 1px solid rgba(176,106,69,0.3); }
.segostop-page .acc        { border-bottom: 1px solid rgba(176,106,69,0.3); }
.segostop-page .acc summary { color: var(--ink); }
.segostop-page .sego-metric-num { color: var(--ink); }
.segostop-page .sego-vote-bar   { background: var(--terracotta); }
.segostop-page .sego-pivot      { border-left-color: var(--terracotta); }
.segostop-page .sego-pivot-title { color: var(--ink); }

/* ReLume accent — ink (dusty rose retired as a text color) */
.relume-page .cs-h       { color: var(--ink); }
.relume-page .cs-subh    { color: var(--ink); }
.relume-page .acc-group  { border-top: 1px solid rgba(169,114,109,0.3); }
.relume-page .acc        { border-bottom: 1px solid rgba(169,114,109,0.3); }
.relume-page .acc summary { color: var(--ink); }
.relume-page .sego-pivot      { border-left-color: var(--rose-deep); }
.relume-page .sego-pivot-title { color: var(--ink); }

/* ============================================================
   SHARED CASE STUDY COMPONENTS
   ============================================================ */

.personas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); margin-top: 24px;
}
.persona .line { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }

/* Accordions */
.acc-group { margin-top: 8px; }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 12px 0; font-family: var(--sans); font-weight: 500; font-size: 16px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-weight: 300; font-size: 1.1rem; color: var(--ink-soft); }
.acc[open] summary::after { content: "−"; }
.acc-body { padding: 4px 0 clamp(16px, 2.5vw, 26px); max-width: 68ch; }
.acc-body p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; }
.acc-body ul { padding-left: 1.4em; margin-top: 6px; }
.acc-body li { font-size: 16px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.5; }

/* JTBD */
.jtbd { max-width: 68ch; margin-bottom: 20px; }
.jtbd p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }

/* Image layouts */
.sego-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.sego-pair figure { margin: 0; overflow: hidden; border-radius: 2px; }
.sego-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sego-pair figcaption {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 8px;
}

.sego-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; }
.sego-trio figure { margin: 0; overflow: hidden; border-radius: 2px; }
.sego-trio img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.sego-lead { margin: 20px 0 28px; overflow: hidden; border-radius: 2px; }
.sego-lead img { width: 100%; height: auto; display: block; }

.fig-framed { max-width: 620px; margin: 20px auto 28px; }
.fig-framed img {
  width: 100%; display: block; border-radius: 2px;
}
.fig-framed figcaption {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-soft); margin-top: 10px;
}

/* Small credit line under a reference-image group sourced from the web,
   not the designer's own photography */
.source-note {
  font-size: 12px; font-style: italic; color: var(--ink-soft); opacity: 0.6;
  margin-top: -12px; margin-bottom: 20px;
}

.sego-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: start; margin: 20px 0 28px;
}
.sego-split figure { margin: 0; overflow: hidden; border-radius: 2px; }
.sego-split img { width: 100%; height: auto; display: block; }

.sego-render { margin: 20px 0 28px; overflow: hidden; border-radius: 2px; background: var(--paper); }
.sego-render img { width: 100%; height: auto; display: block; }
.sego-render figcaption {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 10px 14px 14px;
}

/* Two renders side by side — no card background (renders sit directly
   on the page), both locked to the same height so they read as the
   same size and their captions land on the same baseline regardless
   of each render's native aspect ratio */
.render-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 28px; }
.render-pair .sego-render {
  margin: 0; background: none;
  display: flex; flex-direction: column;
}
.render-pair .sego-render img {
  height: clamp(200px, 26vw, 320px); width: 100%;
  object-fit: contain; display: block;
}

.sego-hero-fig { margin: 0; overflow: hidden; border-radius: 2px; background: var(--paper); }
.sego-hero-fig img { width: 100%; display: block; height: auto; }

/* Ecobite image figures */
.cs-fig { margin: 20px 0; overflow: hidden; border-radius: 2px; }
.cs-fig img { width: 100%; height: auto; display: block; }
.cs-fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.cs-fig-pair figure { margin: 0; overflow: hidden; border-radius: 2px; }
.cs-fig-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.cs-fig-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; }
.cs-fig-trio figure { margin: 0; overflow: hidden; border-radius: 2px; }
.cs-fig-trio img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* Research metrics */
.sego-metrics { display: flex; gap: clamp(32px, 6vw, 72px); margin: 24px 0 32px; flex-wrap: wrap; }
.sego-metric-num {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1; letter-spacing: -0.02em;
}
.sego-metric-label {
  display: block; font-size: 14px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px;
}

/* Terrain pivot callout */
.sego-pivot { border-left: 2px solid; padding: 12px 0 12px 20px; margin: 20px 0 28px; }
.sego-pivot-title { font-family: var(--sans); font-weight: 500; font-size: 16px; margin-bottom: 6px; }
.sego-pivot p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; }

/* Making steps */
.sego-steps { margin-top: 20px; }
.sego-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 22px; align-items: start;
  padding-bottom: clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--line);
  margin-bottom: clamp(18px, 3vw, 32px);
}
.sego-step:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sego-step-n {
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 3px; text-align: right;
}

/* Concept voting */
.sego-vote { margin: 16px 0 24px; max-width: 480px; }
.sego-vote-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sego-vote-bar { height: 3px; border-radius: 2px; flex-shrink: 0; background: var(--stone); }
.sego-vote-bar.dim { opacity: 0.3; }
.sego-vote-label { font-size: 14px; color: var(--ink-soft); width: 180px; flex-shrink: 0; }
.sego-vote-n { font-size: 14px; color: var(--ink-soft); opacity: 0.65; }

/* Video */
.cs-video { width: 100%; border-radius: 2px; display: block; margin-bottom: 26px; background: var(--ink); }

/* Brief grid — What / Who / Why / How (or similar short structured facts) */
.brief-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 32px); margin: 20px 0 28px;
}
.brief-grid dt {
  font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.65; margin-bottom: 8px;
}
.brief-grid dd { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* 4-up figure grid (pattern studies etc.) */
.fig-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 20px 0; }
.fig-quad figure { margin: 0; overflow: hidden; border-radius: 2px; }
.fig-quad img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* Aspect-ratio overrides for a grouping whose source photos don't fit
   the 4/3 default without cropping away the actual subject — apply to
   the row/grid container (.sego-pair, .sego-trio, .fig-quad, .cs-fig-pair,
   .cs-fig-trio) when its images are portrait or unusually wide/panoramic */
.ar-tall.sego-pair img, .ar-tall.sego-trio img, .ar-tall.fig-quad img { aspect-ratio: 3/4; }
.ar-square.sego-pair img, .ar-square.sego-trio img { aspect-ratio: 1/1; }
.ar-wide.sego-pair img, .ar-wide.cs-fig-pair img { aspect-ratio: 3/1; }
.ar-16-9.sego-pair img { aspect-ratio: 16/9; }
.fig-quad figcaption {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 8px;
}

/* Materials & cost block */
.cost-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); margin: 20px 0 8px;
}
.cost-item { border-top: 1px solid var(--line); padding-top: 14px; }
.cost-item .mat { font-family: var(--serif); font-weight: 500; font-size: 16px; margin-bottom: 4px; }
.cost-item .spec { font-size: 13px; color: var(--ink-soft); opacity: 0.75; margin-bottom: 12px; }
.cost-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); padding: 5px 0; }
.cost-row + .cost-row { border-top: 1px solid var(--line); }
.cost-total {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--serif); font-weight: 500; font-size: 17px;
}
.cost-total span:last-child { font-size: 13px; font-family: var(--sans); font-weight: 400; color: var(--ink-soft); }

/* ============================================================
   GALLERY PAGE
   ============================================================ */

.gallery-page {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(60px, 9vw, 100px);
}

.gallery-intro { padding-top: 24px; margin-bottom: 28px; }

.gallery-cat { margin-bottom: clamp(48px, 7vw, 80px); }
.gallery-cat-label {
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}

.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}

.gallery-thumb {
  width: 100%; display: block; cursor: zoom-in;
  transition: opacity 0.22s;
}
.gallery-thumb:hover { opacity: 0.82; }

/* Masonry (JS-built gallery) */
.masonry { display: flex; gap: 8px; align-items: flex-start; }
.masonry-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.masonry img { width: 100%; display: block; cursor: zoom-in; transition: opacity 0.22s; }
.masonry img:hover { opacity: 0.85; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(25,20,16,0.97);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 86vw; max-height: 86vh; object-fit: contain; }
.lightbox button {
  position: absolute; background: none; border: none;
  color: rgba(255,255,255,0.6); font-size: 2rem; cursor: pointer;
  padding: 24px; line-height: 1; transition: color 0.18s;
}
.lightbox button:hover { color: #fff; }
.lb-prev  { left: 2vw; }
.lb-next  { right: 2vw; }
.lb-close { top: 1vh; right: 2vw; font-size: 1.6rem; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(60px, 9vw, 100px);
}

.contact-head { border-top: 1px solid var(--line); padding-top: 56px; margin-bottom: 48px; }

.form { max-width: 600px; }

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }

.field { margin-bottom: 32px; }
.field label {
  display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
}
.field .req { opacity: 0.55; font-size: 0.85em; }
.field input, .field textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--line); color: var(--ink);
  font-family: var(--sans); font-size: 15px; padding: 10px 0;
  outline: none; transition: border-color 0.2s;
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }

.btn-send {
  background: none; color: var(--ink); border: 1px solid var(--line);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 14px 44px; cursor: pointer; transition: background 0.22s, color 0.22s, border-color 0.22s;
  margin-top: 8px;
}
.btn-send:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.form-status { margin-top: 14px; font-size: 14px; color: var(--ink-soft); min-height: 1.4em; }

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

@media (max-width: 820px) {
  .marquee-track span { font-size: clamp(2.6rem, 15vw, 4.2rem); }
  .hero-label { font-size: 12px; }
  .intro { grid-template-columns: 1fr; gap: 18px; padding-bottom: 70px; }
  .intro-text { white-space: normal; font-size: clamp(20px, 5vw, 28px); }
  .section-head { padding-bottom: 32px; }
  .entry, .entry:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .entry-visual, .entry:nth-child(even) .entry-visual { order: -1; }
  .entry-copy, .entry:nth-child(even) .entry-copy { order: 2; max-width: none; }
  .ed-frag { display: none; }
  .about-lead { grid-template-columns: 1fr; }
  .about-bio { grid-template-columns: 1fr; gap: 18px; }
  .cv-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-hero .wrap { grid-template-columns: 1fr; }
  .sego-split { grid-template-columns: 1fr; }
  .sego-pair { grid-template-columns: 1fr; }
  .sego-trio { grid-template-columns: 1fr 1fr; }
  .cs-fig-pair { grid-template-columns: 1fr; }
  .cs-fig-trio { grid-template-columns: 1fr 1fr; }
  .personas { grid-template-columns: 1fr; }
  .brief-grid { grid-template-columns: 1fr 1fr; }
  .fig-quad { grid-template-columns: 1fr 1fr; }
  .cost-block { grid-template-columns: 1fr; }
  .render-pair { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-meta { text-align: left; }
}

@media (max-width: 720px) {
  .menu-toggle { display: block; z-index: 40; }
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 32px; background: rgba(244,239,230,0.98);
    transform: translateX(100%); transition: transform 0.28s ease; z-index: 20;
  }
  .nav.open { transform: none; }
  .nav a { font-size: 1rem; letter-spacing: 0.14em; }
  .name-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cv-grid { grid-template-columns: 1fr; }
  .sego-trio { grid-template-columns: 1fr; }
  .cs-fig-trio { grid-template-columns: 1fr; }
  .sego-step { grid-template-columns: 24px 1fr; gap: 14px; }
  .brief-grid { grid-template-columns: 1fr; }
  .fig-quad { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}