/* More You Identity Kit — generated from tokens.json */
:root, [data-theme="sign"] {
  --sign-yellow: #fdea02;
  --sign-tint: #faf17a;
  --paper: #fffbe6;
  --ink: #090805;
  --ink-soft: #3d352c;
  --brush-red: #fb3a0d;
  --brush-deep: #ca0402;
  --cream: #fceaa0;
  --gold: #fcd21b;
  --surface: var(--sign-yellow);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --line: var(--ink);
  --focus: var(--brush-deep);
  --shadow-hard: 6px 6px 0 #090805;
  --shadow-hard-red: 6px 6px 0 #ca0402;
}
[data-theme="ink"] {
  --paper: #1a1612;
  --ink-soft: #b5a883;
  --surface: var(--ink);
  --text: var(--cream);
  --text-soft: var(--ink-soft);
  --line: var(--cream);
  --focus: var(--gold);
  --shadow-hard: 6px 6px 0 #fceaa0;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;
  --radius-none: 0px; --radius-xs: 2px;
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Barlow", Arial, Helvetica, sans-serif;
  --font-text: "Source Sans 3", "Source Sans Pro", "Myriad Pro", Calibri, sans-serif;
}
/* More You — component stylesheet. Loads after tokens.css; every color, size and
   font comes from the tokens. Classes are prefixed my-. */

/* ---------- ground ---------- */
.my-page { background: var(--surface); color: var(--text); font-family: var(--font-text); }
.my-paper { background: var(--paper); color: var(--text); }
.my-measure { max-width: 36em; }

/* ---------- Grain: the covers' paper texture ---------- */
.my-grain { position: relative; isolation: isolate; }
.my-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
[data-theme="ink"] .my-grain::after { mix-blend-mode: screen; opacity: 0.08; }
.my-grain > * { position: relative; z-index: 2; }

/* ---------- Eyebrow ---------- */
.my-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 1.2;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text);
}
.my-eyebrow::before, .my-eyebrow::after { content: ""; width: 22px; height: 2px; background: currentColor; }

/* ---------- Display type helpers ---------- */
.my-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--text); margin: 0; }
.my-display--xl { font-size: 112px; line-height: 0.9; letter-spacing: -0.005em; }
.my-display--lg { font-size: 72px; line-height: 0.92; }
.my-display--md { font-size: 48px; line-height: 0.95; }
.my-display--sm { font-size: 32px; line-height: 1; letter-spacing: 0.01em; }
.my-headline { font-family: var(--font-sans); font-weight: 800; font-size: 36px; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.my-body { font-family: var(--font-text); font-size: 17px; line-height: 1.5; margin: 0 0 var(--space-6); }
.my-body--lg { font-size: 19px; line-height: 1.45; }
.my-small { font-family: var(--font-text); font-size: 14px; line-height: 1.45; color: var(--text-soft); }

/* ---------- BrushBand ---------- */
.my-band {
  display: inline-block; position: relative; box-decoration-break: clone;
  padding: 0.12em 0.4em 0.14em; margin: 0.1em 0;
  transform: rotate(-1.2deg);
  clip-path: polygon(0.6% 8%, 3% 0%, 9% 4%, 16% 0%, 27% 3%, 38% 0%, 52% 2%, 63% 0%, 74% 3%, 86% 0%, 96% 3%, 99.6% 9%, 100% 42%, 99% 70%, 100% 92%, 97% 100%, 88% 96%, 77% 100%, 66% 97%, 55% 100%, 44% 97%, 31% 100%, 19% 96%, 8% 100%, 1% 95%, 0% 72%, 1% 40%);
  font-family: var(--font-display); text-transform: uppercase; line-height: 0.95;
}
.my-band--brush { background: var(--brush-red); color: var(--ink); }
.my-band--deep  { background: var(--brush-deep); color: var(--cream); font-family: var(--font-condensed); font-weight: 800; font-style: italic; }
.my-band--ink   { background: var(--ink); color: var(--cream); font-family: var(--font-condensed); font-weight: 800; font-style: italic; }
.my-band--ink .my-band__hi { color: var(--gold); }
.my-band--deep.my-band--sentence, .my-band--ink.my-band--sentence { text-transform: none; }
.my-band--lg { font-size: 72px; }
.my-band--md { font-size: 40px; }
.my-band--sm { font-size: 28px; }

/* ---------- Underline: the hand-drawn red stroke ---------- */
.my-underline {
  background-repeat: no-repeat; background-size: 100% 0.32em; background-position: 0 100%;
  padding-bottom: 0.14em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 4, 80 3, 118 6 S 170 10, 198 5' fill='none' stroke='%23fb3a0d' stroke-width='5' stroke-linecap='round'/><path d='M12 11 C 60 9, 120 9, 190 10' fill='none' stroke='%23fb3a0d' stroke-width='2.5' stroke-linecap='round' opacity='.9'/></svg>");
}
.my-underline--deep {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 4, 80 3, 118 6 S 170 10, 198 5' fill='none' stroke='%23ca0402' stroke-width='5' stroke-linecap='round'/><path d='M12 11 C 60 9, 120 9, 190 10' fill='none' stroke='%23ca0402' stroke-width='2.5' stroke-linecap='round' opacity='.9'/></svg>");
}

/* ---------- Button ---------- */
.my-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: var(--space-3) var(--space-6); min-height: 48px; border: 2px solid var(--line);
  border-radius: var(--radius-none); background: var(--text); color: var(--surface);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.my-btn:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); }
.my-btn:active { transform: translate(0, 0); box-shadow: none; }
.my-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.my-btn--outline { background: transparent; color: var(--text); border-color: var(--line); }
.my-btn--red { background: var(--brush-deep); border-color: var(--brush-deep); color: var(--cream); }
.my-btn--red:hover { box-shadow: var(--shadow-hard); }
.my-btn--on-ink { background: var(--sign-yellow); border-color: var(--sign-yellow); color: var(--ink); }
.my-btn--on-ink:hover { box-shadow: 6px 6px 0 var(--brush-deep); }
.my-btn--lg { font-size: 16px; min-height: 56px; padding: var(--space-4) var(--space-8); }

/* ---------- Checklist ---------- */
.my-check { list-style: none; margin: 0; padding: 0; font-family: var(--font-text); font-size: 17px; line-height: 1.5; }
.my-check li { position: relative; padding-left: 38px; margin: 0 0 var(--space-4); }
.my-check li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  border: 2.5px solid var(--brush-deep); border-radius: var(--radius-xs); box-sizing: border-box;
  background-repeat: no-repeat; background-size: 26px 26px; background-position: -1px -5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5 L9.5 18 L21 4' fill='none' stroke='%23ca0402' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.my-check b, .my-check strong { font-weight: 700; }

/* ---------- Field ---------- */
.my-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-text); }
.my-field__label { font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.my-field__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.my-input {
  flex: 1 1 240px; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: 400 17px/1.3 var(--font-text); color: var(--text);
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-none);
}
.my-input::placeholder { color: var(--text-soft); opacity: 1; }
.my-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.my-field__help { font-family: var(--font-text); font-size: 14px; line-height: 1.45; color: var(--text-soft); }

/* ---------- PageTile: one of the four pages ---------- */
.my-tile {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--paper); color: var(--text); border: 2px solid var(--line);
  padding: var(--space-8); box-shadow: var(--shadow-hard); border-radius: var(--radius-none);
  min-height: 220px;
}
.my-tile--pointed { box-shadow: var(--shadow-hard-red); }
.my-tile__no { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brush-deep); }
.my-tile__name { font-family: var(--font-display); font-size: 32px; line-height: 1; text-transform: uppercase; margin: 0; }
.my-tile__floor { font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.my-tile__body { font-family: var(--font-text); font-size: 17px; line-height: 1.5; margin: 0; }
.my-tile__dated { margin-top: auto; padding-top: var(--space-3); border-top: 2px solid var(--line); font-family: var(--font-text); font-size: 14px; color: var(--text-soft); }

/* ---------- RedRule: paragraph with the cover's red rule ---------- */
.my-rule { border-left: 4px solid var(--brush-deep); padding-left: var(--space-4); font-family: var(--font-text); font-size: 17px; line-height: 1.5; margin: 0; }
.my-rule b, .my-rule strong { font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.my-rule--h { border-left: 0; border-top: 4px solid var(--brush-deep); padding-left: 0; padding-top: var(--space-3); }