:root {
  --atelier-paper: #efe7d8;
  --atelier-cream: #f8f3e9;
  --atelier-ink: #232522;
  --atelier-muted: #66675f;
  --atelier-red: #9f3f2f;
  --atelier-red-dark: #6e2b22;
  --atelier-green: #2f5d50;
  --atelier-line: rgba(35, 37, 34, .22);
  --atelier-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --atelier-serif: Georgia, "Times New Roman", serif;
}

.atelier-home,
.portrait-page { margin: 0; color: var(--atelier-ink); background: var(--atelier-paper); font-family: var(--atelier-sans); }

.atelier-header {
  display: flex; width: min(1320px, calc(100% - 3rem)); min-height: 92px; align-items: center;
  justify-content: space-between; gap: 2rem; margin: 0 auto; border-bottom: 1px solid var(--atelier-line);
}
.atelier-brand { display: grid; text-decoration: none; line-height: 1.2; }
.atelier-brand strong { font: 700 1rem/1.2 var(--atelier-sans); letter-spacing: -.02em; }
.atelier-brand span { margin-top: .2rem; color: var(--atelier-muted); font-size: .63rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.atelier-nav { display: flex; flex-wrap: wrap; gap: clamp(.85rem, 2.3vw, 2rem); font-size: .78rem; font-weight: 750; letter-spacing: .04em; }
.atelier-nav a { padding: .4rem 0; text-decoration: none; border-bottom: 2px solid transparent; }
.atelier-nav a:hover, .atelier-nav a:focus-visible, .atelier-nav a[aria-current="page"] { color: var(--atelier-red); border-color: currentColor; }

.atelier-hero {
  position: relative; display: grid; width: min(1320px, calc(100% - 3rem)); min-height: 720px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr); align-items: center; gap: 5rem; margin: 0 auto; padding: 5rem 0 7rem;
}
.atelier-hero::after { position: absolute; right: 25%; bottom: 0; width: 1px; height: 34%; background: var(--atelier-line); content: ""; transform: rotate(19deg); transform-origin: bottom; }
.hero-number { position: absolute; top: 2rem; right: 0; color: rgba(35,37,34,.08); font: 700 clamp(7rem, 21vw, 19rem)/.8 var(--atelier-sans); letter-spacing: -.09em; }
.hero-copy { position: relative; z-index: 1; max-width: 850px; }
.kicker { margin: 0 0 1rem; color: var(--atelier-red); font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero-copy h1 { max-width: 850px; margin: 0; font: 400 clamp(4rem, 9.2vw, 9rem)/.82 var(--atelier-serif); letter-spacing: -.075em; }
.hero-copy > p:not(.kicker) { max-width: 690px; margin: 2.5rem 0; color: var(--atelier-muted); font: 400 clamp(1.05rem, 1.8vw, 1.35rem)/1.55 var(--atelier-serif); }
.atelier-button { display: inline-flex; align-items: center; gap: 2rem; padding: .9rem 1.1rem; border: 1px solid var(--atelier-ink); background: var(--atelier-ink); color: var(--atelier-cream); font-size: .82rem; font-weight: 750; text-decoration: none; }
.atelier-button:hover, .atelier-button:focus-visible { background: var(--atelier-red); border-color: var(--atelier-red); }
.hero-note { position: relative; z-index: 2; align-self: end; max-width: 320px; margin-bottom: 3rem; padding: 1.6rem; background: #d8c69c; box-shadow: 9px 12px 0 rgba(35,37,34,.1); transform: rotate(2deg); }
.hero-note span { font-size: .62rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.hero-note p { margin: .8rem 0 0; font: italic 1.03rem/1.5 var(--atelier-serif); }

.atelier-section { width: min(1320px, calc(100% - 3rem)); margin: 0 auto; padding: 8rem 0; }
.section-marker { display: flex; align-items: center; gap: 1rem; margin-bottom: 4rem; border-top: 1px solid var(--atelier-line); }
.section-marker span { min-width: 3rem; padding-top: .8rem; color: var(--atelier-red); font-size: .72rem; font-weight: 850; }
.section-marker p { margin: 0; padding-top: .8rem; font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.section-lead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .55fr); align-items: end; gap: 4rem; margin-bottom: 4rem; }
.section-lead h2, .portrait-copy h2, .eve-grid h2, .next-portrait h2 { margin: 0; font: 400 clamp(2.9rem, 6vw, 6.4rem)/.92 var(--atelier-serif); letter-spacing: -.06em; }
.section-lead > p { margin: 0; color: var(--atelier-muted); font: 400 1.08rem/1.55 var(--atelier-serif); }

.selected-works { background: var(--atelier-cream); box-shadow: 0 0 0 100vmax var(--atelier-cream); clip-path: inset(0 -100vmax); }
.works-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; }
.work-card { min-width: 0; }
.work-card a { display: grid; height: 100%; grid-template-rows: 420px 1fr; color: inherit; background: var(--atelier-paper); text-decoration: none; }
.work-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: filter 250ms ease, transform 450ms ease; }
.work-card a:hover img { filter: saturate(1.05) contrast(1.03); transform: scale(1.015); }
.work-card a { overflow: hidden; }
.work-card div { position: relative; z-index: 1; padding: 1.7rem; background: var(--atelier-paper); }
.work-card span { color: var(--atelier-red); font-size: .64rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.work-card h3 { max-width: 620px; margin: .6rem 0 .8rem; font: 400 clamp(1.8rem, 3.7vw, 3.7rem)/.98 var(--atelier-serif); letter-spacing: -.045em; }
.work-card p { max-width: 560px; margin: 0; color: var(--atelier-muted); font-size: .86rem; }
.work-wide { grid-row: span 2; }
.work-wide a { grid-template-rows: minmax(540px, 1fr) auto; }

.portrait-invite { display: grid; grid-template-columns: minmax(330px, .85fr) minmax(0, 1.15fr); min-height: 760px; background: var(--atelier-red); color: var(--atelier-cream); }
.portrait-crop { min-height: 640px; overflow: hidden; background: #bfc2b1; }
.portrait-crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.9); }
.portrait-copy { display: flex; max-width: 760px; flex-direction: column; justify-content: center; padding: clamp(3rem, 8vw, 8rem); }
.portrait-copy .kicker { color: #e8cba8; }
.portrait-copy p:not(.kicker) { max-width: 570px; margin: 2rem 0; color: rgba(248,243,233,.76); font: 1.1rem/1.6 var(--atelier-serif); }
.text-link { align-self: flex-start; padding: .6rem 0; border-bottom: 1px solid currentColor; font-size: .82rem; font-weight: 800; text-decoration: none; }

.lab { padding-bottom: 9rem; }
.lab-list { border-top: 1px solid var(--atelier-line); }
.lab-list a { display: grid; grid-template-columns: 4rem minmax(0, 1.6fr) minmax(160px, .6fr) 2rem; align-items: center; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--atelier-line); color: inherit; text-decoration: none; }
.lab-list a:hover, .lab-list a:focus-visible { color: var(--atelier-red); }
.lab-list span, .lab-list em { color: var(--atelier-muted); font-size: .72rem; font-style: normal; }
.lab-list strong { font: 400 clamp(1.25rem, 2.2vw, 2rem)/1.1 var(--atelier-serif); }
.lab-list b { font-size: 1.3rem; font-weight: 400; }

.eve-section { padding: 8rem max(1.5rem, calc((100% - 1320px) / 2)); background: var(--atelier-green); color: var(--atelier-cream); }
.eve-section .section-marker { border-color: rgba(248,243,233,.28); }
.eve-section .section-marker span { color: #d6b989; }
.eve-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .65fr); align-items: start; gap: clamp(3rem, 10vw, 9rem); }
.eve-grid h2 { font-size: clamp(2.5rem, 5.3vw, 5.6rem); }
.eve-grid > div { color: rgba(248,243,233,.78); font: 1.08rem/1.65 var(--atelier-serif); }
.eve-grid > div p:first-child { margin-top: 0; }
.privacy-note { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(248,243,233,.25); font: 700 .72rem/1.5 var(--atelier-sans); letter-spacing: .06em; text-transform: uppercase; }
.atelier-footer { display: flex; width: min(1320px, calc(100% - 3rem)); justify-content: space-between; gap: 2rem; margin: 0 auto; padding: 2rem 0; color: var(--atelier-muted); font-size: .72rem; }
.atelier-footer p { margin: 0; }

.portrait-page { background: var(--atelier-cream); }
.portrait-hero { width: min(1320px, calc(100% - 3rem)); margin: 0 auto; padding: 7rem 0 6rem; }
.portrait-hero h1 { margin: 0; font: 400 clamp(4.7rem, 13vw, 12rem)/.78 var(--atelier-serif); letter-spacing: -.08em; }
.portrait-hero h1 span { color: var(--atelier-red); }
.portrait-manifesto { display: grid; max-width: 860px; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 5rem 0 0 auto; color: var(--atelier-muted); font: 1.08rem/1.6 var(--atelier-serif); }
.portrait-manifesto p { margin: 0; }
.portrait-entry { display: grid; width: min(1320px, calc(100% - 3rem)); grid-template-columns: 170px minmax(380px, .95fr) minmax(300px, .7fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); margin: 0 auto; padding: 6rem 0 9rem; border-top: 1px solid var(--atelier-line); }
.portrait-meta { position: sticky; top: 1rem; }
.portrait-meta p { display: grid; gap: .15rem; margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--atelier-line); }
.portrait-meta span { color: var(--atelier-muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portrait-meta strong { font-size: .78rem; }
.portrait-figure { margin: 0; }
.portrait-figure img { width: 100%; height: auto; background: #c8c8b9; }
.portrait-figure figcaption { margin-top: .75rem; color: var(--atelier-muted); font-size: .68rem; }
.portrait-reading { padding-top: 3rem; }
.portrait-reading > div { margin-bottom: 3rem; }
.portrait-reading > div > p:not(.kicker) { margin: 0; color: var(--atelier-muted); font: 1.05rem/1.65 var(--atelier-serif); }
.portrait-reading blockquote { margin: 5rem 0 0; padding: 1.5rem 0 0; border-top: 3px solid var(--atelier-red); font: italic 1.55rem/1.4 var(--atelier-serif); }
.next-portrait { display: grid; grid-template-columns: .35fr 1fr; gap: 3rem; padding: 7rem max(1.5rem, calc((100% - 1320px) / 2)); background: var(--atelier-ink); color: var(--atelier-cream); }
.next-portrait > span { color: rgba(248,243,233,.15); font: 700 clamp(5rem, 14vw, 12rem)/.75 var(--atelier-sans); letter-spacing: -.08em; }
.next-portrait h2 { max-width: 850px; font-size: clamp(2.5rem, 5.5vw, 5.5rem); }

@media (max-width: 850px) {
  .atelier-header { width: min(100% - 2rem, 1320px); min-height: 112px; align-items: flex-start; flex-direction: column; justify-content: center; gap: .7rem; }
  .atelier-nav { width: 100%; justify-content: space-between; gap: .55rem; }
  .atelier-hero, .section-lead, .portrait-invite, .eve-grid, .portrait-entry { grid-template-columns: 1fr; }
  .atelier-hero { width: min(100% - 2rem, 1320px); min-height: 650px; gap: 2rem; padding: 5rem 0; }
  .hero-number { top: 3rem; font-size: 11rem; }
  .hero-note { align-self: auto; margin: 0 0 0 auto; }
  .atelier-section, .portrait-hero, .portrait-entry { width: min(100% - 2rem, 1320px); padding-top: 5rem; padding-bottom: 5rem; }
  .section-lead { align-items: start; gap: 1.5rem; }
  .works-grid { grid-template-columns: 1fr; }
  .work-card a, .work-wide a { grid-template-rows: 380px auto; }
  .work-wide { grid-row: auto; }
  .portrait-invite { min-height: 0; }
  .portrait-crop { min-height: 520px; max-height: 75vh; }
  .portrait-copy { padding: 4rem 1.5rem; }
  .lab-list a { grid-template-columns: 2rem 1fr 1.5rem; }
  .lab-list em { display: none; }
  .eve-section { padding-top: 5rem; padding-bottom: 5rem; }
  .portrait-manifesto { grid-template-columns: 1fr; margin-top: 3rem; }
  .portrait-entry { gap: 2rem; }
  .portrait-meta { position: static; display: grid; grid-template-columns: repeat(3, 1fr); }
  .portrait-meta p { padding-right: .8rem; border-right: 1px solid var(--atelier-line); }
  .portrait-reading { padding-top: 1rem; }
  .next-portrait { grid-template-columns: 1fr; padding-top: 5rem; padding-bottom: 5rem; }
}

@media (max-width: 520px) {
  .atelier-nav { overflow-x: auto; justify-content: flex-start; padding-bottom: .2rem; }
  .atelier-nav a { flex: 0 0 auto; }
  .hero-copy h1 { font-size: clamp(3.4rem, 18vw, 5rem); }
  .hero-note { max-width: 88%; }
  .section-marker { margin-bottom: 2.8rem; }
  .work-card a, .work-wide a { grid-template-rows: 280px auto; }
  .portrait-crop { min-height: 430px; }
  .lab-list strong { font-size: 1.1rem; }
  .portrait-hero { padding-top: 5rem; }
  .portrait-hero h1 { font-size: clamp(3.8rem, 20vw, 6.5rem); }
  .portrait-meta { grid-template-columns: 1fr; }
  .portrait-meta p { border-right: 0; }
  .atelier-footer { width: min(100% - 2rem, 1320px); align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}