/* Hallmark · shape: Instrument (a page that is played, not read) · genre: atmospheric · theme: Nine Strings brand (by request) · job: listen · idea: "the nine strings of the mark are the nine rasas, and you can pluck them" · vibe: "warm paper, deep maroon, quiet concert hall"
 * paper: oklch(96% 0.015 90) · accent: oklch(33% 0.12 18) · display: Playfair Display · body: Jost · hero: the brand mark set huge beside a four-word head · nav: edge-aligned wordmark and one link · footer: the lockup over two links · imagery: none, the mark is the picture · signature: nine pluckable strings, one per rasa, that sound
 * axes: cream/serif/maroon · posture: split · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, no photographs or releases exist yet, so the strings carry the page instead of stand-ins */
/* Hallmark · waive 65 · cream, Playfair and maroon · the locked brand palette and logo face, signed off by the client */
/* Hallmark · waive 39b · the nine strings stand tall · each string is the instrument itself, a full-height pluck target, not a marketing button */
/* Hallmark · waive 79 · the space beside the head · the mark fills the right half and the maroon band shows at the fold */
/* Hallmark · waive 44c · hero copy ends above the fold · the mark carries the first screen and the strings band starts in view */
/* Hallmark · waive 26b · no :disabled state · no control on the page can ever be disabled */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Playfair Display"; src: url("fonts/playfair.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { --container: 1280px; --peg: 9px; }

body { font-size: 1.0625rem; }

/* masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-maroon); }
.brand img { width: 40px; height: 40px; }
.navlink { color: var(--color-ink-2); text-decoration: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.navlink:hover { background: var(--color-paper-2); color: var(--color-maroon); }
.navlink:active { background: var(--color-paper-3); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; min-height: calc(100svh - 170px); padding-block: var(--space-lg) var(--space-2xl); }
.hero h1 { font-size: clamp(3rem, 6.4vw + 0.5rem, 6.75rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.03em; color: var(--color-maroon); max-width: 9ch; }
.lead { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 34ch; }
.actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-xl); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; font-weight: 500; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button:hover { background: var(--color-maroon-deep); }
.button:active { transform: translateY(1px); }
.textlink { color: var(--color-maroon); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.textlink:hover { text-decoration-color: var(--color-maroon); }
.hero-mark { margin: 0; justify-self: center; width: 100%; max-width: min(700px, 78svh); }
.hero-mark img { width: 100%; height: auto; }

/* the nine */
.nine { background: var(--color-maroon); color: var(--color-on-maroon); padding-block: var(--section-gap-s); }
.nine-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.nine h2 { font-size: var(--text-section); font-weight: 500; line-height: 1.05; letter-spacing: var(--tracking-display); }
.nine-head p { color: var(--color-on-maroon-2); font-size: var(--text-lead); max-width: 46ch; }
.strings { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.strings li { min-width: 0; }
.string { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-rows: 380px auto auto; justify-items: center; padding-bottom: var(--space-sm); border-radius: var(--radius-card); -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .string:hover { background: color-mix(in oklab, var(--color-on-maroon) 6%, transparent); } }
.string:active { background: color-mix(in oklab, var(--color-on-maroon) 10%, transparent); }
.string:focus-visible { outline: 2px solid var(--color-on-maroon); outline-offset: 2px; }
.wire { position: relative; width: 3px; height: 100%; margin-top: var(--space-lg); background: var(--color-on-maroon); border-radius: 2px; transform-origin: 50% 50%; }
.wire::before { content: ""; position: absolute; top: calc(var(--peg) * -1); left: 50%; width: calc(var(--peg) * 2); height: calc(var(--peg) * 2); margin-left: calc(var(--peg) * -1); border-radius: 50%; background: var(--color-on-maroon); }
.string.plucked .wire { animation: pluck 900ms var(--ease-out); }
@keyframes pluck {
  0% { transform: scaleX(1) translateX(0); }
  8% { transform: translateX(5px); }
  18% { transform: translateX(-4px); }
  30% { transform: translateX(3px); }
  44% { transform: translateX(-2px); }
  62% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
.rasa { margin-top: var(--space-lg); font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; text-align: center; }
.meaning { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-on-maroon-2); text-align: center; }

/* house */
.house { padding-block: var(--section-gap); display: grid; gap: var(--space-2xl); }
.partners { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.house h2 { font-size: clamp(2.25rem, 3.6vw + 1rem, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 20ch; }
.partners p:first-child { color: var(--color-muted); font-size: var(--text-sm); }
.names { margin-top: var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-maroon); line-height: 1.3; }
.names span { white-space: nowrap; }
.names .x { color: var(--color-muted); margin-inline: var(--space-2xs); }

/* footer */
.footer { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.footer-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.footer-lockup { width: 140px; height: auto; }
.footer-links { display: grid; gap: var(--space-xs); justify-items: end; color: var(--color-muted); font-size: var(--text-sm); }
.footer-links a { color: var(--color-maroon); text-decoration-color: var(--color-rule); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.footer-links a:hover { text-decoration-color: var(--color-maroon); }

@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: var(--space-md); padding-bottom: var(--space-3xl); }
  .hero-mark { order: -1; justify-self: start; max-width: 300px; }
  .nine-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  /* the instrument turns on its side: nine horizontal strings, labels read normally */
  .strings { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-xl); }
  .string { grid-template-rows: none; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; justify-items: start; column-gap: var(--space-md); min-height: 64px; padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; }
  .rasa { grid-column: 1; grid-row: 1; margin-top: 0; text-align: left; font-size: var(--text-lg); line-height: 1.1; }
  .meaning { grid-column: 1; grid-row: 2; margin-top: 0; text-align: left; }
  .wire { grid-column: 2; grid-row: 1 / span 2; justify-self: stretch; width: auto; height: 3px; margin: 0 var(--space-xs) 0 var(--space-md); }
  .wire::before { top: 50%; left: calc(var(--peg) * -1); margin-left: 0; margin-top: calc(var(--peg) * -1); }
  @keyframes pluck {
    0% { transform: translateY(0); } 8% { transform: translateY(5px); } 18% { transform: translateY(-4px); }
    30% { transform: translateY(3px); } 44% { transform: translateY(-2px); } 62% { transform: translateY(1px); } 100% { transform: translateY(0); }
  }
}
@media (max-width: 40rem) {
  :root { --peg: 7px; }
  .hero-mark { max-width: 220px; }
  .actions { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .string { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .rasa { font-size: var(--text-md); }
  .footer-links { justify-items: start; }
  .names span { display: block; }
  .names .x { margin: var(--space-2xs) 0; font-size: var(--text-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .string.plucked .wire { animation: none; }
  .string.plucked { background: color-mix(in oklab, var(--color-on-maroon) 10%, transparent); }
}