/* Layout concept: one quiet reading column on warm paper; the homepage opens
   into an organic ring of four artworks, every other page returns to the column. */
:root {
  --paper:        #faf7f0;
  --paper-raised: #fffdf9;
  --paper-sunk:   #f3efe4;
  --ink:          #14120f;
  --ink-soft:     #45403a;
  --ink-faint:    #756d64;
  --line:         #e4ddcf;
  --line-strong:  #cdc4b2;
  --gold:         #9c7c35;
  --gold-wash:    #f1e9d6;
  --ok:           #4e6a49;
  --warn:         #8d6a1c;
  --crit:         #8a4a3e;
  --focus:        #5d7fa8;
  /* Sampled from the supplied mockup's heading. */
  --slate:        #405c69;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: .75rem; --t-sm: .85rem; --t-base: 1rem; --t-md: 1.0625rem;
  --t-lg: 1.3rem; --t-xl: 1.75rem; --t-2xl: 2.4rem; --t-3xl: 3.2rem;

  --col: 44rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(43,39,36,.04), 0 8px 28px -18px rgba(43,39,36,.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #1a1816;
    --paper-raised: #232019;
    --paper-sunk:   #141211;
    --ink:          #ece5d8;
    --ink-soft:     #a9a197;
    --ink-faint:    #7b7369;
    --line:         #342f28;
    --line-strong:  #4a4238;
    --gold:         #c7a45c;
    --gold-wash:    #2b2519;
    --ok:           #8bab84;
    --warn:         #d0a84e;
    --crit:         #d08b7d;
    --focus:        #8fb0d8;
    --slate:        #9dc2cf;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:        #1a1816;
  --paper-raised: #232019;
  --paper-sunk:   #141211;
  --ink:          #ece5d8;
  --ink-soft:     #a9a197;
  --ink-faint:    #7b7369;
  --line:         #342f28;
  --line-strong:  #4a4238;
  --gold:         #c7a45c;
  --gold-wash:    #2b2519;
  --ok:           #8bab84;
  --warn:         #d0a84e;
  --crit:         #d08b7d;
  --focus:        #8fb0d8;
  --slate:        #9dc2cf;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: .005em; }
h1 { font-size: var(--t-2xl); line-height: 1.12; }
h2 { font-size: var(--t-xl); line-height: 1.2; }
h3 { font-size: var(--t-lg); line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold-wash); }

.wrap {
  width: 100%; max-width: var(--col); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap-wide { max-width: 72rem; }
.stack { display: flex; flex-direction: column; }
.stack-xs > * + * { margin-top: .4rem; }
.stack-sm > * + * { margin-top: .8rem; }
.stack-md > * + * { margin-top: 1.4rem; }
.stack-lg > * + * { margin-top: 2.4rem; }
.stack-xl > * + * { margin-top: 4rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.row-end { justify-content: flex-end; }
.grow { flex: 1 1 12rem; min-width: 0; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.center { text-align: center; }
.nums { font-variant-numeric: tabular-nums; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- header ---------- */
.masthead {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem;
  width: 100%; max-width: 84rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand {
  font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.15rem);
  line-height: 1.05; font-weight: 500;
  text-decoration: none; white-space: nowrap; letter-spacing: .005em;
}
.brand em { font-style: normal; color: var(--gold); }
/* The middle links sit centred in the space between the wordmark and the
   buttons: a wide gap after the wordmark, a narrow one before the buttons. */
.nav {
  display: flex; flex-wrap: wrap; gap: .1rem 1.05rem;
  flex: 1 1 auto; min-width: 0;
  justify-content: center;
  margin-left: clamp(1.5rem, 4vw, 4.5rem);
  margin-right: .75rem;
}
.nav a {
  font-size: .8rem; letter-spacing: .015em; color: var(--ink-soft);
  text-decoration: none; padding: .2rem 0; border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.nav-toggle { display: none; }
.masthead-end { display: flex; align-items: center; gap: .5rem; flex: none; }

@media (max-width: 1100px) {
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--paper-raised);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: .5rem max(16px, env(safe-area-inset-left, 0px)) 1rem;
  }
  .nav.open { display: flex; }
  .nav { justify-content: flex-start; margin-left: 0; margin-right: 0; }
  .masthead-end { margin-left: auto; }
  .nav a { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav-toggle { display: inline-flex; }
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 5rem; background: var(--paper-sunk); }
.footer-in {
  padding-block: 2.5rem; text-align: center;
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center; }
.footer-links a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm); border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* ---------- buttons & controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: var(--t-sm); letter-spacing: .02em;
  padding: .55rem 1.1rem; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  text-decoration: none; transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover { background: var(--paper-raised); border-color: var(--ink-faint); }
.btn-primary { border-color: var(--gold); color: var(--gold); }
.btn-primary:hover { background: var(--gold-wash); border-color: var(--gold); }
.btn-quiet { border-color: transparent; color: var(--ink-soft); padding-inline: .5rem; }
.btn-quiet:hover { color: var(--ink); background: var(--paper-sunk); }
.btn-danger { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); color: var(--crit); }
.btn-danger:hover { background: color-mix(in srgb, var(--crit) 8%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { font-size: var(--t-xs); padding: .35rem .7rem; }

label.field { display: flex; flex-direction: column; gap: .3rem; }
.field > span.lab { font-size: var(--t-sm); color: var(--ink-soft); letter-spacing: .01em; }
.field > span.lab .req { color: var(--gold); }
.hint { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.5; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], select, textarea {
  font: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .5rem .65rem; width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
textarea { line-height: 1.7; resize: vertical; min-height: 7rem; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px var(--gold-wash); }
.invalid input, .invalid select, .invalid textarea { border-color: var(--crit); }
.err { color: var(--crit); font-size: var(--t-xs); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0; }
legend { font-size: var(--t-sm); color: var(--ink-soft); padding-inline: .4rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-base); line-height: 1.55; cursor: pointer; }
.check input { width: auto; margin-top: .35rem; accent-color: var(--gold); flex: none; }
.checks { display: flex; flex-direction: column; gap: .6rem; }

/* ---------- surfaces ---------- */
.panel {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
}
.panel-sunk { background: var(--paper-sunk); }
/* A heading that introduces the list beneath it rather than labelling the
   panel: centred over the bullets, and set a step larger and heavier than a
   plain h3 so it carries the group. */
.panel-lead {
  text-align: center; font-size: var(--t-xl); font-weight: 500;
  line-height: 1.2; margin-bottom: .4rem;
}
.scroll { background: var(--paper-sunk); border-left: 2px solid var(--gold); padding: 1.6rem 1.7rem; border-radius: 0 var(--radius) var(--radius) 0; }
.scroll p + p { margin-top: 1rem; }
.scroll-alt { background: transparent; border: 1px solid var(--line); border-left: 2px solid var(--line-strong); }
.eyebrow { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.lede { font-size: 1.22rem; line-height: 1.65; color: var(--ink-soft); font-family: var(--font-display); }
.page-head { padding-block: 3.2rem 2rem; }
.rule-dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin: 2.2rem auto; }

.tag {
  display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs);
  letter-spacing: .04em; padding: .15rem .5rem; border-radius: 2px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); white-space: nowrap;
}
.tag-gold { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.tag-ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); color: var(--ok); }
.tag-warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); color: var(--warn); }
.tag-crit { border-color: color-mix(in srgb, var(--crit) 50%, var(--line)); color: var(--crit); }

.note { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--gold-wash); padding: .9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--t-sm); }
.note-crit { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit) 7%, transparent); }
.note-ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* ---------- homepage ring ---------- */
.ring { position: relative; display: grid; gap: 2.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 1rem; }
.ring .gate:nth-child(1) { transform: translateY(0); }
.ring .gate:nth-child(2) { transform: translateY(3.2rem); }
.ring .gate:nth-child(3) { transform: translateY(-1.4rem); }
.ring .gate:nth-child(4) { transform: translateY(1.8rem); }
.gate {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 1rem; transition: border-color .4s ease, background .4s ease, transform .4s ease;
}
.gate:hover, .gate:focus-visible { border-color: var(--line); background: var(--paper-raised); }
.gate-art {
  display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 100%;
  border-radius: 50%; overflow: hidden; background: var(--paper-sunk);
  border: 1px solid var(--line);
  transition: box-shadow .5s ease, border-color .5s ease;
}
/* Supplied artwork has its white ground cut away, so it sits straight on the
   page with no frame: a round crop would lose the edges of every one of them,
   and a plate would reintroduce the white box the cut-out removes. */
.gate-art.is-photo {
  border-radius: 0; background: none; border-color: transparent; padding: 2%;
}
.gate:hover .gate-art { border-color: var(--gold); box-shadow: 0 0 0 6px var(--gold-wash); }
.gate:hover .gate-art.is-photo { border-color: transparent; box-shadow: none; }
.gate-art svg { display: block; width: 100%; height: 100%; }
.gate-art img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform .5s ease;
}
.gate:hover .gate-art img { transform: scale(1.03); }
.gate-step { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.gate h3 { margin-top: .35rem; }
.gate p { margin-top: .5rem; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.65; }
.gate-go { margin-top: .7rem; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: inline-block; }
.gate:hover .gate-go { text-decoration: underline; text-underline-offset: 3px; }
/* Below the ring's width the four gateways become one column, read by
   scrolling, and every image takes the same size. */
@media (max-width: 899px) {
  .ring { grid-template-columns: 1fr; gap: 1.6rem; }
  .ring .gate { transform: none !important; }
  .gate-art { max-width: 20rem; margin-inline: auto; }
}

/* ---------- listings ---------- */
.toolbar { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.cards { display: grid; gap: 1.1rem; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-raised); padding: 1.2rem 1.3rem;
  border-left: 2px solid var(--line-strong);
}
.card.is-scheduled { border-left-color: var(--gold); }
.card-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.card-code { font-size: var(--t-xs); letter-spacing: .1em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.card h3 { font-size: 1.22rem; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: var(--t-xs); color: var(--ink-soft); }
.meta b { font-weight: 500; color: var(--ink-faint); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.pill-list { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---------- calendar ---------- */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; padding: .5rem .2rem; border-bottom: 1px solid var(--line); }
.cal td { border: 1px solid var(--line); vertical-align: top; height: 6.2rem; padding: .3rem; width: 14.28%; }
.cal td.out { background: var(--paper-sunk); }
.cal td.today { box-shadow: inset 0 0 0 1px var(--gold); }
.cal .daynum { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cal-ev {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--t-xs); line-height: 1.3;
  background: var(--gold-wash); border: 0; border-left: 2px solid var(--gold);
  padding: .2rem .3rem; margin-top: .22rem; cursor: pointer; border-radius: 0 2px 2px 0; color: var(--ink);
}
.cal-ev:hover { background: color-mix(in srgb, var(--gold) 20%, var(--paper-raised)); }
.cal-ev.f-inperson { border-left-color: var(--ok); }
.cal-ev.f-hybrid { border-left-color: var(--warn); }
.cal-scroll { overflow-x: auto; }
.cal-scroll .cal { min-width: 40rem; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--t-xs); color: var(--ink-soft); }
.legend i { display: inline-block; width: .8rem; height: 2px; vertical-align: middle; margin-right: .35rem; }

/* ---------- tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--line); }
.tabs button {
  font: inherit; font-size: var(--t-sm); background: none; border: 0; cursor: pointer;
  padding: .5rem .85rem; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- modal ---------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: max(2rem, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-left, 0px)) 3rem;
}
.modal {
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); width: 100%; max-width: 46rem; padding: 1.8rem;
  position: relative;
}
.modal-x { position: absolute; top: .6rem; right: .6rem; }

/* ---------- toast ---------- */
.toasts {
  position: fixed; z-index: 200; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 0 max(16px, env(safe-area-inset-left, 0px)) calc(1.2rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--paper); font-size: var(--t-sm);
  padding: .6rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 34rem;
}
.toast.bad { background: var(--crit); color: #fff; }

/* ---------- progress ---------- */
.progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); transition: width .5s ease; }

/* ---------- disclosure ---------- */
details.qa { border-bottom: 1px solid var(--line); }
details.qa > summary { cursor: pointer; padding: .9rem 0; font-family: var(--font-display); font-size: 1.18rem; list-style: none; display: flex; gap: .7rem; align-items: baseline; }
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::before { content: "+"; color: var(--gold); font-size: 1rem; width: .8rem; flex: none; }
details.qa[open] > summary::before { content: "\2212"; }
details.qa > div { padding: 0 0 1.1rem 1.5rem; color: var(--ink-soft); }
details.qa > div > * + * { margin-top: .7rem; }

/* ---------- messaging ---------- */
.thread { display: flex; flex-direction: column; gap: .8rem; max-height: 22rem; overflow-y: auto; padding-right: .3rem; }
.bubble { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; background: var(--paper-raised); font-size: var(--t-sm); }
.bubble.admin { background: var(--gold-wash); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.bubble.mine { border-left: 2px solid var(--ink-faint); }
.bubble .who { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: .05em; }

/* ---------- admin ---------- */
.admin-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; background: var(--paper-raised); }
.stat b { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th { text-align: left; font-weight: 400; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); padding: .5rem .5rem; }
table.data td { border-bottom: 1px solid var(--line); padding: .6rem .5rem; vertical-align: top; }
.table-scroll { overflow-x: auto; }
.table-scroll table.data { min-width: 36rem; }
.survey-row { display: grid; gap: .4rem; grid-template-columns: 1fr; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.survey-scale { display: flex; flex-wrap: wrap; gap: .4rem; }
.survey-scale label {
  display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-xs);
  border: 1px solid var(--line-strong); border-radius: 2px; padding: .3rem .55rem; cursor: pointer;
}
.survey-scale label:hover { border-color: var(--gold); }
.survey-scale input { width: auto; accent-color: var(--gold); }
.survey-scale input:checked + span { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* `backwards`, not `both`: filling forwards leaves the end keyframe's
   transform applied for good, and any transform makes the element the
   containing block for absolutely positioned children — which stranded the
   movement pages' picture at the edge of the reading column. */
.fade-in { animation: fade .5s ease backwards; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* ============================ brush-stroke rules ========================
   An inked edge where one band of the page meets another. Drawn as a CSS mask
   rather than a black image, so it takes --ink and works in both themes. */
.brush-rule {
  display: block; width: 100%; height: 13px; border: 0; margin: 0;
  background-color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,8 C150,2 300,11 450,5 C600,0 750,10 900,4 C1020,0 1120,8 1197,6 L1197,10 C1120,13.5 1020,6.5 900,10 C750,15.5 600,6 450,12 C300,17.5 150,8.5 3,12 Z' fill='black'/%3E%3Cpath d='M40,13 C200,16 340,11 470,14' stroke='black' stroke-width='1.2' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M760,3 C880,1 1000,5 1120,3' stroke='black' stroke-width='1' fill='none' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,8 C150,2 300,11 450,5 C600,0 750,10 900,4 C1020,0 1120,8 1197,6 L1197,10 C1120,13.5 1020,6.5 900,10 C750,15.5 600,6 450,12 C300,17.5 150,8.5 3,12 Z' fill='black'/%3E%3Cpath d='M40,13 C200,16 340,11 470,14' stroke='black' stroke-width='1.2' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M760,3 C880,1 1000,5 1120,3' stroke='black' stroke-width='1' fill='none' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.brush-rule-soft { opacity: .5; height: 10px; }

.masthead { border-bottom: 0; }
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 11px;
  background-color: var(--ink); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,8 C150,2 300,11 450,5 C600,0 750,10 900,4 C1020,0 1120,8 1197,6 L1197,10 C1120,13.5 1020,6.5 900,10 C750,15.5 600,6 450,12 C300,17.5 150,8.5 3,12 Z' fill='black'/%3E%3Cpath d='M40,13 C200,16 340,11 470,14' stroke='black' stroke-width='1.2' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M760,3 C880,1 1000,5 1120,3' stroke='black' stroke-width='1' fill='none' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,8 C150,2 300,11 450,5 C600,0 750,10 900,4 C1020,0 1120,8 1197,6 L1197,10 C1120,13.5 1020,6.5 900,10 C750,15.5 600,6 450,12 C300,17.5 150,8.5 3,12 Z' fill='black'/%3E%3Cpath d='M40,13 C200,16 340,11 470,14' stroke='black' stroke-width='1.2' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M760,3 C880,1 1000,5 1120,3' stroke='black' stroke-width='1' fill='none' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.footer { border-top: 0; position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 13px;
  background-color: var(--ink); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,8 C150,2 300,11 450,5 C600,0 750,10 900,4 C1020,0 1120,8 1197,6 L1197,10 C1120,13.5 1020,6.5 900,10 C750,15.5 600,6 450,12 C300,17.5 150,8.5 3,12 Z' fill='black'/%3E%3Cpath d='M40,13 C200,16 340,11 470,14' stroke='black' stroke-width='1.2' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M760,3 C880,1 1000,5 1120,3' stroke='black' stroke-width='1' fill='none' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,8 C150,2 300,11 450,5 C600,0 750,10 900,4 C1020,0 1120,8 1197,6 L1197,10 C1120,13.5 1020,6.5 900,10 C750,15.5 600,6 450,12 C300,17.5 150,8.5 3,12 Z' fill='black'/%3E%3Cpath d='M40,13 C200,16 340,11 470,14' stroke='black' stroke-width='1.2' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M760,3 C880,1 1000,5 1120,3' stroke='black' stroke-width='1' fill='none' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ============================== inked buttons ===========================
   A loose wash behind the label, on the two bands that frame every page. */
.masthead .btn, .footer .btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M5,36 C40,20 72,46 112,29 C142,16 172,39 196,24 L196,54 C150,61 88,47 38,56 C22,59 11,50 5,45 Z' fill='%23a8842f' opacity='.20'/%3E%3Cpath d='M9,15 C62,6 122,21 192,10' stroke='%23a8842f' stroke-width='6' fill='none' opacity='.16' stroke-linecap='round'/%3E%3Cpath d='M16,47 C70,54 130,41 188,49' stroke='%23a8842f' stroke-width='3' fill='none' opacity='.13' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
  border-color: var(--ink-faint); color: var(--ink);
}
.masthead .btn:hover, .footer .btn:hover { border-color: var(--ink); }
.masthead .btn-primary, .footer .btn-primary { border-color: var(--gold); color: var(--ink); }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); }

/* ======================= The Process opens on white =====================
   The supplied artwork carries a white ground, so the homepage drops to white
   and the artwork stops reading as four pasted-on boxes. The footer keeps its
   khaki, and the brush rule marks where the two meet. */
body[data-route="process"] { --paper: #ffffff; --paper-raised: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-route="process"] { --paper: #1a1816; --paper-raised: #232019; }
}
:root[data-theme="dark"] body[data-route="process"] { --paper: #1a1816; --paper-raised: #232019; }

/* Multiply drops the artwork's white ground into whatever sits behind it, so
   no white box shows even where the image file is not itself cut out. */
.gate-art.is-photo img { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gate-art.is-photo img { filter: invert(1); mix-blend-mode: screen; }
}
:root[data-theme="dark"] .gate-art.is-photo img { filter: invert(1); mix-blend-mode: screen; }


/* ================= header buttons: a block of ink =======================
   A solid rectangle whose four sides are ragged, as a loaded brush leaves
   them. Drawn as a mask, so it takes --ink and works in either theme. */
.btn-brush { position: relative; border-color: transparent !important; color: var(--paper) !important; }
.btn-brush::before {
  content: ""; position: absolute; inset: -4px -6px; z-index: -1; pointer-events: none;
  background-color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 72' preserveAspectRatio='none'%3E%3Cpath d='M5,9 C48,3 96,11 144,6 C178,2 210,10 235,5 L236,64 C198,70 150,61 104,67 C66,72 30,63 4,68 Z' fill='black'/%3E%3Cpath d='M8,6 C40,10 70,3 100,8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140,66 C176,61 204,69 232,64' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,22 C1,38 6,52 4,62' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M237,14 C239,30 234,46 236,58' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 72' preserveAspectRatio='none'%3E%3Cpath d='M5,9 C48,3 96,11 144,6 C178,2 210,10 235,5 L236,64 C198,70 150,61 104,67 C66,72 30,63 4,68 Z' fill='black'/%3E%3Cpath d='M8,6 C40,10 70,3 100,8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140,66 C176,61 204,69 232,64' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,22 C1,38 6,52 4,62' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M237,14 C239,30 234,46 236,58' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.btn-brush { isolation: isolate; }
.masthead .btn-brush { background-image: none; }
.btn-brush:hover::before { background-color: var(--gold); }
.btn-brush:focus-visible { outline-offset: 7px; }

/* ========================= The Process, as a ring =======================
   Four gateways at roughly ten, one, four and eight o'clock, at the relative
   sizes asked for: the inquiry and sharing images half as large again as the
   diamond, and the closing image three-quarters of it. Below 900px the ring
   unwinds into one column and every image takes the same width. */
/* ===================== The Process: heading and asks ====================== */
.process-head {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  padding-block: 2.5rem 1rem;
}
.process-title {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05;
  color: var(--slate); margin: 0; max-width: 18ch;
}
.process-note {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, .85rem + .5vw, 1.35rem); line-height: 1.45;
  color: var(--ink); max-width: 32ch; margin: 0;
}
.gate-ask {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(.95rem, .85rem + .35vw, 1.2rem); line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  margin-top: .9rem;
}
.gate:hover .gate-ask { color: var(--slate); }

@media (min-width: 760px) {
  .process-head { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 2rem; }
  .process-note { justify-self: end; }
}

@media (min-width: 900px) {
  /* Sizes and centre points are read from the supplied mockup and written as
     percentages of the ring's own width, so the arrangement keeps its shape
     at any screen size rather than only at the width it was drawn for. */
  .ring {
    display: block; position: relative;
    container-type: inline-size;
    aspect-ratio: 100 / 51;
    gap: 0; padding-bottom: 0;
  }
  .ring .gate {
    position: absolute; transform: translateX(-50%) !important;
    text-align: center; padding: 0; max-width: none;
  }
  .ring .gate-art {
    aspect-ratio: auto; width: auto; background: none; border: 0; padding: 0;
    display: block; overflow: visible;
  }
  .ring .gate-art img {
    width: auto; height: auto; object-fit: contain; margin-inline: auto; display: block;
  }

  /* left = the centre the mockup gives; top = that centre less half the
     picture's own height, so the artwork lands on the point, not the text. */
  .ring .gate-listen    { left: 19.1%; top: 6.9cqw; width: 34%; }
  .ring .gate-inquiry   { left: 52.6%; top: 7.3cqw; width: 22%; }
  .ring .gate-shared    { left: 62.6%; top: 35.5cqw; width: 26%; }
  .ring .gate-resonance { left: 86.3%; top: 12.7cqw; width: 21%; }

  .ring .gate-listen    .gate-art img { max-width: 32.8cqw; max-height: 27cqw; }
  .ring .gate-inquiry   .gate-art img { max-width: 12.1cqw; max-height: 12cqw; }
  .ring .gate-shared    .gate-art img { max-width: 10.2cqw; max-height: 9cqw; }
  .ring .gate-resonance .gate-art img { max-width: 16cqw;   max-height: 16cqw; }

  .ring .gate-ask { margin-top: .7rem; }
}


/* ======================= password reveal ================================ */
.peek-wrap { position: relative; display: block; }
.peek-wrap input { padding-right: 2.6rem; }
.peek {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 0; border-radius: 2px;
  color: var(--ink-faint); cursor: pointer;
}
.peek:hover { color: var(--ink); }
.peek[aria-pressed="true"] { color: var(--gold); }

/* ================= movement pages: title with its picture ===============
   The reading column sits a little left of centre on a wide screen, and the
   picture takes the top right corner, about a sixth of the page across. */
.page-head.has-art { display: block; }
.page-head-art { display: none; }

@media (min-width: 1000px) {
  body[data-route="listen"] .wrap,
  body[data-route="inquiry"] .wrap,
  body[data-route="shared"] .wrap,
  body[data-route="resonance"] .wrap { margin-left: 8%; margin-right: auto; }
  body[data-route="shared"] .wrap-wide { margin-left: 4%; }

  /* The picture is lifted out of the flow and hung in the page's own top
     right corner. In the flow it had to reserve its full height, which left
     a tall empty band under a short heading, and it could reach no further
     right than the reading column allowed. */
  main { position: relative; }
  .page-head-art {
    display: block; position: absolute; z-index: 1;
    top: 1.4rem; right: clamp(1rem, 3.5vw, 3.5rem);
    width: 16.6vw; max-width: 15rem; aspect-ratio: 1 / 1;
    margin: 0;
  }
  /* All four movement pages carry their picture at the same size and in the
     same corner, so the set reads as one family. */
  .page-head-art img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    mix-blend-mode: multiply;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .page-head-art img { filter: invert(1); mix-blend-mode: screen; }
  }
  :root[data-theme="dark"] .page-head-art img { filter: invert(1); mix-blend-mode: screen; }
}