@import url('fonts.css');

:root {
  --color-paper: #e9e4da;
  --color-field-blue: #dce1ef;
  --color-field-mint: #dde8e1;
  --color-pearl: #e6e4e1;
  --color-ink: #37322b;
  --color-cream: #f2eee6;
  --accent-works: #4f63ae;
  --accent-essays: #3f7a49;
  --accent-essays-2: #55965e;
  --accent-voices: #7d63b5;
  --accent-voices-2: #9179c2;
  --accent-about: #c07a3f;
  --accent-about-2: #d9915b;
  --accent-contact: #8e3a4d;
  --font-display: 'Bellefair', 'Cormorant Garamond', serif;
  --font-body: 'Karla', 'Mulish', sans-serif;
  --font-logo: 'La Belle Aurore', cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* Sticky footer: when a page's content is shorter than the viewport, main
   grows to fill the remaining space so the footer sits at the bottom of
   the screen instead of floating right under the content. It is NOT
   position:fixed — once content exceeds the viewport, the footer simply
   follows it and scrolls away normally, same as any in-flow element. */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body > main { flex: 1 0 auto; }
a { color: var(--accent-works); text-decoration: none; }
a:hover { color: var(--color-ink); }
::selection { background: var(--color-field-blue); }
img { max-width: 100%; display: block; }

@keyframes kvDrift { from { transform: translate(-34px, -10px); } to { transform: translate(34px, 14px); } }

/* No horizontal padding here on purpose: every .container is nested inside
   a section that already provides clamp(18px, 4vw, 44px) side padding
   (.section / .section-catalogue / .container.hero-grid) — matching the
   brand kit's actual structure of "padded section > unpadded 1240px div",
   not "padded section > ALSO-padded div" (which was double-insetting the
   content and making it look narrower than the approved template). */
.container { max-width: 1240px; margin: 0 auto; }

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1.15; }
.h1, h1 { font-size: clamp(32px, 3.6vw, 44px); text-wrap: pretty; }
.h2, h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; }
.h3, h3 { font-size: 21px; }
p { margin: 0; line-height: 1.7; color: rgba(55, 50, 43, .78); }
.eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }
.back-link:hover { color: var(--color-ink); }
.back-link:hover .back-label { color: var(--color-ink); }
.back-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(55, 50, 43, .65); }
.logo-mark { font-family: var(--font-logo); display: inline-block; transform: rotate(-6deg); line-height: .8; }
.logo-word { font-family: var(--font-logo); display: inline-block; font-size: 22px; color: rgba(55, 50, 43, .75); }
.logo-link { display: flex; align-items: baseline; gap: 12px; color: var(--color-ink); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(233, 228, 218, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(55, 50, 43, .1); }
.site-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px clamp(18px, 4vw, 44px); max-width: 1240px; margin: 0 auto; }
.site-header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(16px, 2.4vw, 30px); }
.site-nav { display: flex; flex-wrap: wrap; gap: 14px clamp(14px, 2.4vw, 30px); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
.site-header .logo-mark { font-size: 22px; }
.lang-switch { display: flex; gap: 10px; align-items: baseline; border-left: 1px solid rgba(55, 50, 43, .2); padding-left: 14px; }
.lang-switch a { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; padding: 4px 2px; color: rgba(55, 50, 43, .45); }
.lang-switch a[aria-current="true"] { color: var(--color-ink); border-bottom: 2px solid var(--color-ink); }

/* Section shells + per-section decorative halos, matching the brand kit exactly */
.section { padding: clamp(48px, 7vw, 84px) clamp(18px, 4vw, 44px); }
.section-hero { position: relative; overflow: hidden; padding: 0; background: linear-gradient(90deg, var(--color-field-blue) 0%, #e6e3e0 42%, #e6e3e0 58%, var(--color-field-mint) 100%); }
.section-works { background: var(--color-field-blue) radial-gradient(560px 380px at 82% 14%, rgba(255, 255, 255, .55), transparent 72%); }
.section-essays { background: var(--color-field-mint) radial-gradient(520px 360px at 18% 20%, rgba(178, 158, 214, .16), transparent 70%); }
.section-voices { background: var(--color-pearl) radial-gradient(520px 360px at 84% 78%, rgba(129, 148, 209, .12), transparent 70%); }
.section-about { background: var(--color-paper) radial-gradient(560px 400px at 86% 24%, rgba(178, 158, 214, .15), transparent 70%); }
.section-contact { background: linear-gradient(90deg, var(--color-field-blue) 0%, #e6e3e0 45%, var(--color-field-mint) 100%), radial-gradient(430px 300px at 50% 40%, rgba(178, 158, 214, .15), transparent 70%); }
.section-catalogue { background: var(--color-field-blue) radial-gradient(560px 380px at 82% 8%, rgba(255, 255, 255, .55), transparent 72%); padding: clamp(40px, 6vw, 70px) clamp(18px, 4vw, 44px) clamp(56px, 8vw, 90px); }
.section-catalogue > .container { display: flex; flex-direction: column; gap: 28px; }
.catalogue-header { display: flex; flex-direction: column; gap: 12px; }

.section > .container { display: flex; flex-direction: column; gap: 30px; }

/* Hero: decorative drift overlay + 3-column split (two text panels around a center logo) */
.hero-decor { position: absolute; inset: -60px; pointer-events: none; background: radial-gradient(460px 330px at 50% 50%, rgba(178, 158, 214, .2), transparent 70%), radial-gradient(340px 260px at 40% 40%, rgba(129, 148, 209, .13), transparent 70%), radial-gradient(340px 260px at 60% 62%, rgba(133, 178, 142, .13), transparent 70%); animation: kvDrift 16s ease-in-out infinite alternate; }
.container.hero-grid { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px clamp(16px, 3vw, 40px); padding: clamp(30px, 5vw, 54px) clamp(18px, 4vw, 44px) clamp(38px, 6vw, 60px); }
.hero-panel { flex: 1 1 340px; min-width: 290px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.hero-panel p { max-width: 42ch; font-size: 14px; }
.hero-panel a { font-size: 12.5px; letter-spacing: .08em; }
.hero-logo { flex: 0 1 250px; min-width: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 10px 0; text-align: center; }
.hero-logo .logo-mark:first-child { font-size: clamp(72px, 8vw, 100px); line-height: 1.3; transform: rotate(-8deg); }
.hero-logo .logo-mark:last-of-type { font-size: 30px; line-height: 1.3; transform: rotate(-3deg); }
.hero-logo p { font-size: 11px; color: rgba(55, 50, 43, .65); }

/* Section header with a title on the left and a link on the right, on the same row */
.section-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; }
.section-header-title { display: flex; flex-direction: column; gap: 10px; }
.section-header-row > a { font-size: 12.5px; letter-spacing: .06em; border-bottom: 1px solid rgba(79, 99, 174, .4); padding-bottom: 2px; }
.section-header-row > a:hover { color: var(--color-ink); }
/* Standalone section header (label + title [+ intro]), tightly grouped
   with a 10px gap — distinct from the 30px gap .section > .container uses
   between the header block and the rest of the section's content. */
.section-header { display: flex; flex-direction: column; gap: 10px; }
.section-header p:not(.eyebrow) { max-width: 60ch; font-size: 14px; }
.section-header-center { text-align: center; align-items: center; }
.section-header-center p:not(.eyebrow) { max-width: 52ch; }

/* Grids — auto-fill (works/catalogue, where the grid is usually full) vs
   auto-fit (essays/voices/contact/sketchbook, so a short last row stretches
   to fill the width instead of staying narrow-left with empty trailing
   space), each with the exact minmax/gap the brand kit specifies per section. */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px 22px; }
.grid-fit-essays { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.grid-fit-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.grid-fit-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.contact-grid { max-width: 980px; margin: 0 auto; width: 100%; }

/* About: portrait + copy split
   Note: uses the compound selector `.container.about-grid` (two classes) rather than
   `.about-grid` alone, so its specificity ties `.section > .container` above and,
   being declared later, wins the flex-direction/gap cascade instead of silently
   losing to the generic vertical-stack rule. */
.container.about-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: clamp(26px, 4vw, 54px); align-items: flex-start; }
.about-grid > :first-child { flex: 1 1 280px; min-width: 260px; max-width: 420px; }
.about-grid > :last-child { flex: 2 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: 18px; }
.about-grid p { font-size: 14.5px; line-height: 1.8; max-width: 62ch; }

/* Cards, tinted hover shadow per section */
.card { background: rgba(255, 255, 255, .5); border-radius: 20px; padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; transition: transform .4s ease, box-shadow .4s ease; }
.contact-card { border-radius: 22px; padding: 28px; align-items: flex-start; gap: 10px; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px var(--tint, rgba(55, 50, 43, .15)); }
.section-works .card { --tint: rgba(79, 99, 174, .28); }
.section-essays .card { --tint: rgba(85, 150, 94, .28); }
.section-contact .card { --tint: rgba(133, 178, 142, .26); }
.card figcaption { display: flex; flex-direction: column; gap: 4px; }
.card p { font-size: 14px; line-height: 1.75; }
[data-essay-card] { min-height: 220px; }
blockquote.card { margin: 0; }
blockquote.card p { font-family: var(--font-display); font-size: 20px; line-height: 1.45; }
blockquote.card footer { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(55, 50, 43, .65); margin-top: auto; }
.section-essays .card > a:last-child { margin-top: auto; }
blockquote.card footer::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--dot-color, var(--accent-voices)); flex: none; }

/* Work figures: unlike .card, these have NO background/padding/radius of
   their own — only the photo stub inside is the rounded, tinted box. This
   matches the brand kit exactly (a work figure is just stub + caption,
   not a stub wrapped in another card). */
.work-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; transition: transform .4s ease; }
.work-figure:hover { transform: translateY(-4px); }
.work-figure .media-stub { transition: box-shadow .4s ease; }
.work-figure:hover .media-stub { box-shadow: 0 18px 44px var(--tint, rgba(55, 50, 43, .2)); }
.work-figure figcaption { display: flex; flex-direction: column; gap: 4px; }
.work-figure figcaption a.h3 { color: var(--color-ink); }
.work-figure figcaption a.h3:hover { color: var(--accent-works); }

/* Buttons, chips, mentions */
.btn { display: inline-block; font-size: 12.5px; letter-spacing: .06em; border-radius: 999px; padding: 10px 22px; cursor: pointer; border: none; }
.btn-green { color: var(--color-cream); background: var(--accent-essays); }
.btn-green:hover { background: #2f5c37; color: var(--color-cream); }
.btn-wine { color: var(--color-cream); background: var(--accent-contact); }
.btn-wine:hover { background: #6f2c3c; color: var(--color-cream); }
.btn-outline { color: var(--color-ink); background: transparent; border: 1px solid rgba(55, 50, 43, .35); }
.btn-outline:hover { background: rgba(255, 255, 255, .7); }

.chip { font-family: var(--font-body); font-size: 12px; letter-spacing: .06em; border-radius: 999px; padding: 9px 18px; cursor: pointer; border: 1px solid rgba(55, 50, 43, .25); background: rgba(255, 255, 255, .55); color: var(--color-ink); }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips .chip, .chips span { font-size: 12px; letter-spacing: .04em; color: rgba(55, 50, 43, .75); border: 1px solid rgba(55, 50, 43, .25); border-radius: 999px; padding: 7px 14px; background: none; cursor: default; }

.mentions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.mentions button, .mentions a, .mentions span { font-family: var(--font-body); font-size: 11px; letter-spacing: .04em; color: rgba(55, 50, 43, .72); background: transparent; border: 1px solid rgba(55, 50, 43, .22); border-radius: 999px; padding: 5px 12px; text-decoration: none; display: inline-block; }
.mentions button, .mentions a { cursor: pointer; }
.mentions button:hover, .mentions a:hover { background: rgba(255, 255, 255, .7); color: var(--color-ink); }

/* Photo placeholders — sized per context (hero strip / card / portrait) */
.media-stub { width: 100%; min-height: 330px; border-radius: 18px; background: rgba(255, 255, 255, .5); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.media-stub-sm { min-height: 150px; border-radius: 20px; }
.media-stub-md { min-height: 190px; border-radius: 16px; background: rgba(255, 255, 255, .55); }
.media-stub-lg { min-height: 440px; border-radius: 24px; }
.media-stub span { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(55, 50, 43, .5); }

.site-footer { border-top: 1px solid rgba(55, 50, 43, .12); padding: 36px clamp(18px, 4vw, 44px) 44px; }
.footer-inner { max-width: 1240px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.site-footer .logo-mark { transform: rotate(-7deg); }
.site-footer p { font-size: 12px; color: rgba(55, 50, 43, .6); }
.footer-dots { display: flex; gap: 9px; }
.footer-dots span { width: 9px; height: 9px; border-radius: 50%; }

[data-reveal] { transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-decor { animation: none; }
}