/* ==========================================================================
   Washi: the page ground becomes white Japanese paper. Dark blocks (hero,
   banners, strategy, footer) stay as ink; everything else sits on the sheet.
   ========================================================================== */

:root {
  --paper: #F8F6F0;
  --paper-2: #EFEBE1;
  --washi-fibre: rgba(120, 104, 78, .06);
}

body {
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("../img/washi.webp"), radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, .55), transparent 50%);
  background-size: 512px 512px, auto;
}

/* paper sections show the sheet through */
.section-light, .process, .gallery, .stats-band, .marquee { background: transparent; }
.section-light + .section-light { padding-top: 0; }

/* ---- what stays ink -------------------------------------------------------- */
.hero, .section-dark, .section-navy, .banner, .strategy, .cta-band, .footer, .menu, .veil,
.page-hero, .contact-form-wrap, .side-card, .ledger-card-dark, .admin { color: var(--ivory); }

/* ---- default (paper) colour roles ---------------------------------------- */
.lead { color: var(--ink-2); }
.hero .lead, .section-dark .lead, .section-navy .lead, .page-hero .lead, .cta-band .lead, .strategy .lead, .admin .lead { color: var(--muted); }
/* `.section-light p:not(.eyebrow):not(.lead) { color: var(--ink-2) }` paints
   every paragraph on a paper section with ink, which is right for the sheet and
   wrong for the dark panels that sit on it: the enquiry form's note - the one
   line on that form which has to be read - was slate on navy at 1.79:1. That
   rule is (0,3,1), so these have to match it and come later. */
.section-light .contact-form-wrap p:not(.eyebrow),
.section-light .side-card p:not(.eyebrow),
.section-light .ledger-card-dark p:not(.eyebrow) { color: var(--ivory-2); }
.section-light .contact-form-wrap p.form-note,
.section-light .side-card p.form-note { color: rgba(244, 239, 228, .72); }

h1 em, h2 em, h3 em { color: var(--gold-700); }
.hero em, .hero-title em, .section-dark em, .section-navy em, .page-hero em, .cta-band em, .strategy em,
.banner em, .footer em, .contact-form-wrap em, .side-card em, .admin em { color: var(--gold-300); }

.eyebrow { color: var(--gold-700); }
.eyebrow::before { background: var(--gold-700); }
.hero .eyebrow, .section-dark .eyebrow, .section-navy .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow, .strategy .eyebrow,
.contact-form-wrap .eyebrow, .side-card .eyebrow, .admin .eyebrow, .gallery .eyebrow { color: var(--gold); }
.hero .eyebrow::before, .section-dark .eyebrow::before, .section-navy .eyebrow::before, .page-hero .eyebrow::before,
.cta-band .eyebrow::before, .strategy .eyebrow::before, .contact-form-wrap .eyebrow::before, .side-card .eyebrow::before,
.admin .eyebrow::before { background: var(--gold); }

/* stats on paper */
.stats-band { border-color: var(--line-light); color: var(--ink); }
.stat { border-color: var(--line-light); }
.stat-num { color: var(--gold-700); }
.stat-label { color: var(--ink-2); }

/* marquee on paper */
.marquee { border-color: var(--line-light); }
.marquee-track span { color: var(--gold-700); }
.marquee-track span i { color: var(--ink-2); }

/* gallery on paper */
.gallery { color: var(--ink); }
.gallery .eyebrow { color: var(--gold-700); }
.gallery .eyebrow::before { background: var(--gold-700); }
.gallery-item .gallery-img { box-shadow: 0 30px 50px -30px rgba(11, 22, 48, .45); }
.gallery-item figcaption { color: var(--gold-700); }
.gallery-item figcaption span { color: var(--ink-2); }

/* results, cursus and contact details on paper */
.section-light .result { background: #fff; border-color: var(--line-light); box-shadow: 0 20px 40px -32px rgba(11, 22, 48, .35); }
.section-light .result:hover { border-color: rgba(201, 162, 76, .6); }
.section-light .result-meta { color: var(--gold-700); }
.section-light .result h3 { color: var(--ink); }
.section-light .result p:last-child { color: var(--ink-2); }

.section-light .cursus { border-color: var(--line-light); }
.section-light .cursus li { color: var(--ink-2); }
.section-light .cursus li::before { background: var(--paper); }
.section-light .cursus li:last-child::before { background: var(--gold); }
.section-light .cursus-year { color: var(--gold-700); }
.section-light .cursus-what { color: var(--ink); }

.section-light .contact-list dt { color: var(--gold-700); }
.section-light .contact-list dd { color: var(--ink-2); }
.section-light .contact-list a { border-color: rgba(140, 106, 34, .4); }
.section-light .contact-list a:hover { color: var(--gold-700); border-color: var(--gold-700); }

/* the wiped photographs: clip lives on the inner wrapper so the frame itself can be observed */
.js [data-clip] { clip-path: none; }
.js [data-clip] > .img-frame-inner { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) { .js [data-clip] > .img-frame-inner { clip-path: none; } }

/* white cards read as loose sheets on the washi */
.card, .area, .quote, .side-list, .ledger-card { box-shadow: 0 24px 44px -36px rgba(11, 22, 48, .4); }

/* the consultation form is a solid ink card on the paper */
.contact-form-wrap { background: var(--navy-900); border-color: rgba(201, 162, 76, .35); box-shadow: 0 30px 60px -30px rgba(11, 22, 48, .55); }
.contact-form-wrap .field input, .contact-form-wrap .field select, .contact-form-wrap .field textarea { background: rgba(7, 13, 26, .55); }