/* Medinah Group, site stylesheet.
   Visual system: letterhead, not software. Bone paper, navy ink, gold
   hairlines, navy for the footer. The two brand colours are sampled from
   Patrick's artwork (Sep 2026): navy #052A47 and gold #CAA058.
   Two typefaces, both serif, self-hosted.
   The statement sits on a veiled beach field: a self-hosted loop, bone over it.
   Contrast (measured, WCAG 2.1): ink/bone 13.02, ink-soft/bone 6.48,
   gold-ink/bone 5.48, bone-on-dark/navy 11.46, gold-on-dark/navy 6.08.
   Gold #CAA058 is used for rules and dots only, never body text (2.14 on bone).
   No analytics, no trackers, no cookies, no third-party requests. */

/* ---- type ---------------------------------------------------------------- */

@font-face {
  font-family: 'Libre Caslon Display';
  src: url('/assets/fonts/libre-caslon-display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-roman.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens -------------------------------------------------------------- */

:root {
  --bone: #F4F1E8;
  --bone-2: #EBE6D9;
  --ink: #052A47;
  --ink-soft: #46586B;
  --rule: #C9C3B3;
  --navy-deep: #03202F;
  --bone-on-dark: #E8E3D4;
  --ink-soft-on-dark: #B4BEC9;
  --gold: #CAA058;
  --gold-ink: #7A5C2A;
  --gold-on-dark: #CAA058;

  --serif-display: 'Libre Caslon Display', 'Big Caslon', 'Times New Roman', serif;
  --serif-text: 'EB Garamond', 'Iowan Old Style', Georgia, serif;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --gutter: clamp(1rem, 2vw, 1.75rem);
  --shell: 1180px;
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: clamp(1.08rem, 0.55vw + 0.94rem, 1.28rem);
  font-weight: 400;
  line-height: 1.62;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
p + p { margin-top: 1.15em; }

a { color: inherit; }

::selection { background: var(--navy-deep); color: var(--bone-on-dark); }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 1px;
}
.footer :focus-visible { outline-color: var(--gold-on-dark); }

.sheet {
  width: min(calc(100% - 2 * var(--gut)), var(--shell));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* the stationery rule across the top of the sheet */
.sheet-rule {
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
}

/* ---- masthead ------------------------------------------------------------ */

.masthead { border-bottom: 1px solid var(--rule); background: var(--bone); }

.masthead-inner { padding-block: 1.05rem; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

/* The mark is Patrick's M artwork (assets/logo-lockup*.png), not CSS. */

.lockup { height: 3.25rem; width: auto; display: block; }
.lockup-footer { height: 2.75rem; }
.footer-mark { display: flex; align-items: center; }

/* ---- the statement: the whole front page -------------------------------- */
/* One line of intent and one action, centred in whatever height is left, so the
   footer always closes the page at the bottom of the screen. The empty space is
   the design, so nothing else goes in here. */

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.statement {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* ---- the beach field ------------------------------------------------------ */
/* A self-hosted, muted, looping beach behind the statement, veiled by the
   paper itself: bone at 76% over a 2.5px blur. The veil keeps the field as
   gentle motion while ink stays far past AA on it (worst case measured in
   the README). The blur is light on purpose: the sea oats in the clip have
   to stay legible as grass. The still is the no-autoplay, no-JS and
   reduced-motion state; if the video cannot play, it never paints. */

.beach {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bone) url('/assets/beach-still.jpg') center / cover no-repeat;
}
.beach-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2.5px);
  transform: scale(1.04);
}
.beach::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 241, 232, 0.76);
}
.statement .sheet { position: relative; z-index: 1; }

/* one left axis: wordmark, statement and footer mark all start here */
.statement-col { grid-column: 1 / -1; }

.statement h1 {
  font-size: clamp(1.7rem, 3.7vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 25ch;
}

.statement-action { margin-top: 3rem; }

.eyebrow {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.9rem;
}

/* the animated hairline under statement links */
.link-underline {
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.15em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 240ms ease;
}
.link-underline:hover,
.link-underline:focus-visible { background-size: 0 1px; }

/* ---- button -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.9rem 1.7rem;
  font-family: var(--serif-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--navy-deep); border-color: var(--navy-deep); }
/* The button sits on the field, so its ring takes the light gold. The ink gold
   is 2.37:1 against navy, under the 3:1 WCAG 1.4.11 asks of a focus indicator;
   the light gold is 6.08:1, the same figure the footer link uses on dark. The
   ring is drawn outside the button, so it is the background behind it that
   matters: a button on the bone paper needs the ink gold instead. */
.btn:focus-visible { outline-color: var(--gold-on-dark); }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* ---- login --------------------------------------------------------------- */
/* The login page is an informational page today: the portal is not open, so it
   carries no form, no inputs and no script (see login.html). The field rules
   below are therefore dormant, kept for the form that will arrive with the
   backend, and corrected against the 28 Sep 2026 pre-launch audit so that the
   form is born compliant rather than inheriting two defects:
     - the resting underline was --rule (#C9C3B3), 1.56:1 on paper, under the
       3:1 that WCAG 1.4.11 wants for the visible boundary of a control. It is
       now --ink-soft (#46586B), 6.48:1.
     - the placeholder was --ink-soft at opacity 0.65, 2.97:1, under the 4.5:1
       for normal text (WCAG 1.4.3). The opacity reduction is gone, so the
       placeholder is the same 6.48:1 as the label colour.
   Re-measure both if the palette moves. */

.login {
  flex: 1 0 auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}
.login-col { grid-column: 4 / span 5; }

.login h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.login-lede { margin-top: 1.3rem; color: var(--ink-soft); max-width: 42ch; }

.login-form { margin-top: 2.6rem; }
/* the second field sits under the first, so it needs its own air */
.field + .field-label { margin-top: 1.7rem; }
.field-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.field {
  width: 100%;
  font-family: var(--serif-text);
  font-size: 1.15rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: 0.75rem 0;
  transition: border-color 180ms ease;
}
.field:hover { border-bottom-color: var(--ink); }
.field:focus { border-bottom-color: var(--gold); }
.field::placeholder { color: var(--ink-soft); opacity: 1; }
.field.is-invalid { border-bottom-color: var(--ink); }

.login-form .btn { margin-top: 1.9rem; }

.login-status {
  margin-top: 0.9rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.login-status strong { color: var(--ink); font-weight: 500; }
.login-note {
  margin-top: 2.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

/* `hidden` loses to any `display` rule, so the status block needs this */
[hidden] { display: none !important; }

/* ---- footer -------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--bone-on-dark);
  border-top: 2px solid var(--gold);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.1rem 2.5rem;
  padding-block: 2.4rem 2.6rem;
}
.footer-mark { display: flex; align-items: center; }
.footer-right {
  /* the copyright line and the field's motion control, side by side when there
     is room and stacked when there is not. Default flex-start so the stacked
     phone layout stays left aligned, which is where the old footer put it. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 1.5rem;
}
.footer-year {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft-on-dark);
}
.footer-year a {
  /* the hairline is not decoration: gold on bone is about 1.6:1, so colour
     alone cannot be what marks this as a link (WCAG 1.4.1) */
  color: var(--gold-on-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: border-color 180ms ease;
}
.footer-year a:hover,
.footer-year a:focus-visible { border-bottom-color: var(--bone-on-dark); }

/* the field's motion control: a real button, so it is reachable by keyboard and
   announced with a name and a pressed state. Quiet by design, but not hidden: a
   control nobody can find is the same failure as no control.
   The gold hairline is the same treatment the footer's legal link carries, so
   the two interactive things in this footer share one affordance instead of two.
   Gold on navy measures 6.08:1, and the text is bone-on-dark at 11.46:1, so
   neither depends on the other to be legible. */
.field-toggle {
  position: relative;
  appearance: none;
  margin: 0;
  padding: 0.4rem 0 1px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold-on-dark);
  font-family: var(--serif-text);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-on-dark);
  cursor: pointer;
  transition: border-color 180ms ease;
}
/* The gold rule has to stay tight under the text, so the padding cannot grow to
   make a thumb-sized target: the rule is the border, and padding would push it
   down where it reads as a divider. This widens the hit area to 44px around the
   control instead, without moving anything visible. site convention for phones
   is 44px, and .cache/verify.cjs probes the area above and below the control to
   confirm it is really there rather than trusting the box height. */
.field-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.field-toggle:hover,
.field-toggle:focus-visible { border-bottom-color: var(--bone-on-dark); }

/* ---- the legal page ------------------------------------------------------ */
/* Prose, so the measure matters more than the grid: one column of plain
   sentences, same letterhead, nothing that has to be read twice. */

.legal {
  flex: 1 0 auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}
.legal-col { grid-column: 3 / span 8; }
/* A link inside legal prose, which today means the operator's contact address.
   The underline has to stay in ink and not go gold: gold on bone is about 1.6:1,
   so a gold hairline would be the only thing marking this as a link while being
   nearly invisible, which is the WCAG 1.4.1 failure already documented for the
   footer. Thickness is pinned to 1px and the line is pushed clear of descenders,
   because an address like legal@medinahgroup.com has two g's for a default
   underline to strike through. */
.legal a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
}
.legal h1 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.legal-updated {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.legal h2 {
  margin-top: 2.7rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.legal p { margin-top: 1rem; max-width: 68ch; }

@media (max-width: 980px) {
  .legal-col { grid-column: 1 / -1; }
}

/* ---- responsive ---------------------------------------------------------- */

@media (min-width: 860px) {
  .masthead { position: sticky; top: 0; z-index: 10; }
}

@media (max-width: 980px) {
  .statement-col, .login-col { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .statement h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .statement-action { margin-top: 2.4rem; }
  .footer-inner { padding-block: 2rem 2.1rem; }
}

/* ---- print: the page should behave like letterhead ----------------------- */

@media print {
  :root { --gut: 0; }
  .sheet { width: 100%; }
  .masthead { position: static; }
  .statement { padding-block: 2rem; }
  .beach { display: none; }
  .footer { background: none; color: var(--ink); border-top: 1px solid var(--rule); }
  .footer-year { color: var(--ink-soft); }
}

/* ---- motion: one gesture on load, and the ambient field ------------------ */

@media (prefers-reduced-motion: no-preference) {
  .sheet-rule { animation: rule-draw 900ms cubic-bezier(0.22, 0.7, 0.2, 1) both; }
  .wordmark { animation: rise 800ms cubic-bezier(0.22, 0.7, 0.2, 1) 120ms both; }
  .statement h1 { animation: rise 900ms cubic-bezier(0.22, 0.7, 0.2, 1) 300ms both; }
  .statement-action { animation: rise 900ms cubic-bezier(0.22, 0.7, 0.2, 1) 480ms both; }
}

@media (prefers-reduced-motion: reduce) {
  /* the field falls back to its still frame, and there is nothing left to
     control, so the toggle goes too. field.js already refuses to reveal it in
     this case; this is the belt to that pair of braces. */
  .beach-video { display: none; }
  .field-toggle { display: none !important; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.55rem); }
  to { opacity: 1; transform: none; }
}
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}