/* Medinah Group, site stylesheet.
   Visual system: letterhead, not software. Bone paper, ink, brass hairlines,
   bottle green for the footer. Two typefaces, both serif, self-hosted.
   Contrast (measured, WCAG 2.1): ink/bone 14.66, ink-soft/bone 6.79,
   brass-ink/bone 5.48, bone/bottle 9.48, brass-reversed/bottle 5.38.
   Brass #A98548 is used for rules and dots only, never body text.
   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: #16211C;
  --ink-soft: #4A5650;
  --rule: #CFC7B4;
  --bottle: #1F3B30;
  --bone-on-dark: #E8E3D4;
  --ink-soft-on-dark: #B9C0B4;
  --brass: #A98548;
  --brass-ink: #7A5C2A;
  --brass-reversed: #C9A86B;

  --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(--bottle); color: var(--bone-on-dark); }

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

.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(--brass);
  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;
}

.mark { width: 1.5rem; height: 1.5rem; flex: none; color: var(--ink); }
.mark-small { width: 1.15rem; height: 1.15rem; color: var(--bone-on-dark); }
.mark-node { fill: var(--brass); }
.footer .mark-node { fill: var(--brass-reversed); }

.wordmark-text {
  font-family: var(--serif-display);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- the statement: the whole front page -------------------------------- */
/* One sentence 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 {
  flex: 1 0 auto;
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* 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(--brass-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(--bottle); border-color: var(--bottle); }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* ---- login --------------------------------------------------------------- */
/* Operate surface, not a landing page: one field, one action, real states,
   almost no decoration. The masthead and footer keep it in the same house. */

.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; }
.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(--rule);
  border-radius: 0;
  padding: 0.75rem 0;
  transition: border-color 180ms ease;
}
.field:hover { border-bottom-color: var(--ink-soft); }
.field:focus { border-bottom-color: var(--brass); }
.field::placeholder { color: var(--ink-soft); opacity: 0.65; }
.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(--brass);
}
.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; gap: 0.6rem; }
.footer-place { flex: 1 1 auto; text-align: center; }
.footer-name {
  font-family: var(--serif-display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-place,
.footer-year {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft-on-dark);
}

/* ---- 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; }
  .footer { background: none; color: var(--ink); border-top: 1px solid var(--rule); }
  .footer-place, .footer-year { color: var(--ink-soft); }
}

/* ---- motion: one gesture on load, nothing that loops --------------------- */

@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; }
}

@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); }
}