/* =============================================================================
   KEYSTONE — sign-in stylesheet
   Wycombe Abbey International Brand Guidelines, Edition 1, August 2026

   THIS FILE IS GENERATED. Do not edit it inside an app.
   Edit _brand/signin/keystone-signin.css and run:

       cd "/Users/techteam/Keystone-Apps/_brand/signin" && node distribute.mjs

   which copies it into every app that uses the template. One edit, 35 apps.
============================================================================= */
/* ---------------------------------------------------------------------------
   Wycombe Abbey International — sign-in template
   Built to the Brand Guidelines, Edition 1, August 2026.

   Every value below is from that document. Where accessibility and the brand
   disagree, the note says so rather than silently picking one:
     - Type on WA Navy is WA Grey, not white (11.95:1).
     - WAS Gold on navy is 7.72:1 and safe for the eyebrow there.
     - Gold Deep on white is only 3.17:1, so on paper gold is used for the
       56px rule and never for text. Eyebrows on light surfaces are Navy 70.
--------------------------------------------------------------------------- */

@font-face { font-family: Lato; font-weight: 300; font-style: normal; font-display: swap; src: url("/brand/fonts/Lato-Light.ttf") format("truetype"); }
@font-face { font-family: Lato; font-weight: 400; font-style: normal; font-display: swap; src: url("/brand/fonts/Lato-Regular.ttf") format("truetype"); }
@font-face { font-family: Lato; font-weight: 400; font-style: italic; font-display: swap; src: url("/brand/fonts/Lato-Italic.ttf") format("truetype"); }
@font-face { font-family: Lato; font-weight: 700; font-style: normal; font-display: swap; src: url("/brand/fonts/Lato-Bold.ttf") format("truetype"); }
@font-face { font-family: Lato; font-weight: 900; font-style: normal; font-display: swap; src: url("/brand/fonts/Lato-Black.ttf") format("truetype"); }

:root {
  /* Primary palette */
  --navy: #1B2034;
  --grey: #E6DDCB;
  --gold: #DEAC35;
  --paper: #FAF7F1;
  --white: #FFFFFF;

  /* Tonal extensions */
  --navy-90: #2A2F44;
  --navy-70: #4B5066;
  --navy-50: #7C8093;
  --navy-20: #C8CAD2;
  --navy-10: #E5E6EB;
  --grey-warm: #D8CFBC;
  --grey-soft: #F1ECE0;
  --gold-deep: #B7892A;

  /* Motion — the house curve */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --fast: 140ms;
  --medium: 220ms;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  /* Regular for text sizes; Light is kept for display type only. See the
     note in keystone-app.css — Regular had never been distributed. */
  font-weight: 400;
  font-size: 17px;           /* Body */
  line-height: 1.65;         /* Generous leading, never dense */
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* The signature separator: 1px high, 56px wide, WAS Gold. */
.rule { width: 56px; height: 1px; background: var(--gold); border: 0; margin: 0 0 20px; }
.rule--deep { background: var(--gold-deep); }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------- layout */

/* Three fifths / two fifths. The right column holds all the words, and a
   wider column wraps them into fewer lines — which buys height, not just
   width. The page is exactly one screen tall; if the column ever outgrows it,
   the column scrolls rather than the page. */
.page { display: grid; grid-template-columns: 3fr 2fr; min-height: 100vh; height: 100vh; }

/* ------------------------------------------------------------ left: navy */

.stage {
  background: var(--navy);      /* Plain navy. No photography, no gradient. */
  color: var(--grey);
  padding: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 44px;                    /* Lockup and words sit together, near the top. */
}


/* The lockup, never the crest alone — the crest stays inside its container.
   Horizontal, per the brand guide: "horizontal for headers, footers and wide
   formats; vertical for covers, title pages and square formats". This panel is
   a wide format, and the horizontal lockup is also ~70px shorter, which the
   13" laptop budget needs. */
.stage__lockup { width: clamp(176px, 19vw, 248px); height: auto; display: block; }

/* Twice the standard eyebrow. At this size the brand's 0.18em tracking opens
   too far, so it eases to 0.12em — the letters still read as a tracked label
   rather than a word. */
.stage__eyebrow {
  color: var(--gold);
  font-size: 24px;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

/* The app's name is the headline. It is what identifies the page, so it is
   the largest thing on it. */
.stage__title {
  font-weight: 300;
  font-size: clamp(44px, 6vw, 88px);     /* Display */
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 12ch;
}

.stage__lead {
  font-size: clamp(20px, 2vw, 28px);     /* Standfirst, below the name */
  line-height: 1.35;
  color: var(--grey-warm);
  margin: 0;
  max-width: 42ch;   /* the line break is deliberate, not a consequence of width:
                        wide enough that a two-line standfirst breaks only where
                        its <br> says, not wherever the column runs out */
}
.stage__lead b { font-weight: 700; color: var(--grey); }  /* Emphasis, sparingly */

/* Everything else sits where the eye lands; only the footing is pushed away.
   `margin-top: auto` must live in the same rule as the rest of the margin,
   or a later `margin: 0` quietly cancels it. */
.stage__foot {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-20);
  margin: auto 0 0;
}

/* --------------------------------------------------------- right: paper */

.panel {
  background: var(--paper);
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;      /* the column scrolls, never the page */
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--navy-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;   /* links keep their underline on hover */
  align-self: flex-start;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.back:hover { color: var(--navy); border-bottom-color: var(--navy); }
.back svg { width: 18px; height: 18px; }
/* ---- the About card as a disclosure --------------------------------------
   Two full cards do not fit a 13-inch laptop without shrinking the type past
   comfort, and the sign-in is what everyone came for. So the explanation
   collapses to one line and opens on a click. It is open by default on tall
   screens, closed on short ones, and closed when JavaScript never runs — the
   safe way round, since a closed disclosure still says what it holds. */
.card--about { padding: 0; }
.card--about > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  transition: background var(--fast) var(--ease);
}
.card--about > summary::-webkit-details-marker { display: none; }
.card--about > summary:hover { background: var(--grey-soft); }
.card--about > summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.card--about > summary .chev {
  margin-left: auto;
  width: 16px; height: 16px; flex: none;
  stroke: var(--navy-50); fill: none; stroke-width: 1.5;
  transition: transform var(--fast) var(--ease);
}
.card--about[open] > summary { border-bottom: 1px solid var(--navy-10); border-radius: 10px 10px 0 0; }
.card--about[open] > summary .chev { transform: rotate(90deg); }
.card--about__body { padding: 16px 20px 20px; }
.card--about__body .card__title { margin-bottom: 8px; }

@media (max-width: 900px) { .back { order: 0; } }

/* The card: white, 1px hairline, 10px corners, no shadow at rest. */
.card {
  background: var(--white);
  border: 1px solid var(--navy-10);
  border-radius: 10px;
  padding: 20px;
  line-height: 1.5;      /* tighter inside a card than in running text */
  transition: box-shadow var(--medium) var(--ease);
}
.card__title { font-size: 22px; font-weight: 300; line-height: 1.2; margin: 0 0 8px; }
.card__eyebrow { color: var(--navy-70); }

.qa { margin: 0; }
.qa dt {
  font-size: 15px;
  font-weight: 700;
  margin: 12px 0 2px;
}
.qa dt:first-of-type { margin-top: 0; }
.qa dd { margin: 0; font-size: 15px; color: var(--navy-70); }

.who {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
  list-style: none;
}
/* Pills are reserved for tags and filters — this is a tag list. */
.who li {
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border: 1px solid var(--grey-warm);
  border-radius: 999px;
  color: var(--navy-70);
  background: var(--grey-soft);
}

/* The padlock sat above "Secure access" on a page that is nothing but a sign-in
   form: it repeated what three other elements already said, and cost 60px of
   height on a laptop screen. Kept in the sheet for anyone who wants it. */
.lock {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: 999px;
  background: var(--grey-soft);
  border: 1px solid var(--grey-warm);
  margin-bottom: 16px;
}
.lock svg { width: 20px; height: 20px; stroke: var(--gold-deep); }

.sub { font-size: 15px; color: var(--navy-70); margin: 0 0 14px; }

/* Filled button lifts to a lighter navy on hover. No transform bounce. */
.btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font: inherit; font-size: 16px; font-weight: 700;
  color: var(--grey);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 8px;
  padding: 14px 18px;
  cursor: pointer;
  text-decoration: none;   /* .btn is used on <a> as well as <button> */
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--navy-90); border-color: var(--navy-90); }
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.btn__ms { width: 18px; height: 18px; flex: none; }

label { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-70); margin: 12px 0 5px; }
input[type="email"], input[type="password"] {
  width: 100%;
  font: inherit; font-size: 16px;
  padding: 10px 13px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--navy-20);
  border-radius: 8px;
  transition: border-color var(--fast) var(--ease);
}
input:focus { outline: none; border-color: var(--gold-deep); }

/* A failed sign-in. Scarlett is the brand's own alarm colour and measures
   5.63:1 on white. One message whether the email or the password was wrong —
   two messages would confirm which half was right. */
.error {
  font-size: 15px;
  font-weight: 700;
  color: #CC1A18;
  background: #FDF3F3;
  border-left: 2px solid #CC1A18;
  border-radius: 0 6px 6px 0;
  padding: 9px 13px;
  margin: 0 0 14px;
}

.note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy-50);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--navy-10);
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }

  /* A banner, not a stage. Small enough that the sign-in card is on screen
     when the page opens, which is the only thing anyone came here to do. */
  .stage { min-height: auto; gap: 14px; padding: 22px 24px 20px; }
  .stage__lockup { width: 148px; }
  .stage__eyebrow { font-size: 16px; letter-spacing: 0.14em; margin-bottom: 10px; }
  .stage__title { font-size: 30px; line-height: 1.1; margin-bottom: 8px; max-width: none; }
  .stage .rule { margin-bottom: 12px; }
  .stage__lead { font-size: 16px; max-width: none; }
  .stage__foot { display: none; }                 /* Kept for wide screens only */

  .panel { padding: 20px 20px 96px; gap: 16px; }

  /* Sign in first; the explanation sits under it for anyone who wants it. */
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}

/* ===================================================================== */
/* OPTIONAL · what the app does, below the first screen                   */
/*                                                                       */
/* Some apps have more to say than two lines. This section carries it     */
/* WITHOUT touching the first screen: .page stays exactly 100vh, so the   */
/* sign-in card still lands whole on a 13" laptop, and this follows below */
/* for anyone who wants it. Leave the markup out entirely and nothing     */
/* changes — no empty space, no stray rule.                               */
/*                                                                       */
/* Number the items only when the numbers mean something: a sequence, a   */
/* set someone will refer to by position. Decoration that looks like      */
/* information is worse than no decoration.                               */
/* ===================================================================== */

.more {
  background: var(--paper);
  border-top: 1px solid var(--navy-10);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px);
}

.more__inner { max-width: 1080px; margin: 0 auto; }

.more__lead { margin: 0 0 8px; }
.more__title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 300; line-height: 1.2; color: var(--navy);
  margin: 0 0 40px; text-wrap: balance;
}

.more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
}

.more__item { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start; }

/* The number is a marker, not a heading — it never competes with the title.
   Scoped to .more__item so it outranks the body-paragraph rule below, which
   would otherwise win on specificity and paint the number navy. */
.more__item .more__num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  grid-row: span 2;
}

.more__item h3 {
  font-size: 19px; font-weight: 700; color: var(--navy);
  margin: 0 0 6px; line-height: 1.35;
}

.more__item p {
  margin: 0; color: var(--navy-70); font-size: 16px; line-height: 1.6;
  max-width: 62ch;
}

/* The cue. Without it a page that is exactly one screen tall looks finished,
   and nobody scrolls. Sits in the stage's foot, so it costs no vertical room. */
.stage__more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--grey); text-decoration: none;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.75; transition: opacity var(--fast) var(--ease);
}
.stage__more:hover { opacity: 1; }
.stage__more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; opacity: 1; }
.stage__more svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .stage__more svg { animation: nudge 2.4s var(--ease) infinite; }
  @keyframes nudge { 0%, 88%, 100% { transform: translateY(0); } 94% { transform: translateY(3px); } }
}

@media (max-width: 900px) {
  .more { padding-inline: 24px; }
  .more__item { grid-template-columns: auto 1fr; gap: 0 14px; }
}