:root {
  --ink: #1c211c;
  --paper: #f2efe7;
  --red: #d5492e;
  --yellow: #e8c544;
  --green: #6f8b72;
  --line: rgba(28, 33, 28, 0.22);
  --mono: "DM Mono", "Courier New", monospace;
  --serif: "Noto Serif SC", "Songti SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--serif); }
.grain { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.site-header, footer { display: flex; align-items: center; justify-content: space-between; padding: 27px clamp(24px, 5vw, 76px); border-bottom: 1px solid var(--line); }
.brand { color: inherit; text-decoration: none; font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: -.08em; }
.brand span { color: var(--red); }
.header-note, .eyebrow, .section-label > p, .tag, footer { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.header-note { margin: 0; }
main { padding: 0 clamp(24px, 5vw, 76px); }
.hero { min-height: min(690px, 78vh); padding: clamp(65px, 12vw, 170px) 0 48px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.eyebrow { margin: 0; color: var(--red); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: clamp(25px, 5vw, 72px) 0; max-width: 1120px; font-size: clamp(48px, 8.5vw, 134px); font-weight: 600; line-height: .99; letter-spacing: -.09em; }
h1 span { position: relative; color: var(--red); font-style: italic; }
h1 span::after { content: ""; position: absolute; left: 0; right: -2%; bottom: -.05em; height: .075em; background: var(--yellow); z-index: -1; transform: rotate(-2deg); }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.hero-bottom > p { max-width: 310px; margin: 0; font-size: 15px; line-height: 1.9; }
.scroll-cue { color: inherit; font-family: var(--mono); font-size: 11px; text-decoration: none; white-space: nowrap; }
.scroll-cue span { display: inline-block; margin-left: 8px; font-size: 18px; transition: transform .2s ease; }
.scroll-cue:hover span { transform: translateY(4px); }
.applications { padding: clamp(74px, 10vw, 150px) 0; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); gap: clamp(40px, 8vw, 145px); }
.section-label h2 { margin-bottom: 0; font-size: clamp(29px, 3.1vw, 47px); letter-spacing: -.07em; }
.section-label > p { color: var(--red); }
.app-list { border-top: 1px solid var(--ink); }
.app-card { position: relative; display: grid; grid-template-columns: 50px 1fr 50px; gap: 18px; min-height: 187px; padding: 31px 8px 26px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); overflow: hidden; transition: color .25s ease, padding-left .25s ease; }
.app-card::before { content: ""; position: absolute; z-index: -1; inset: 100% 0 0; background: var(--card); transition: inset .33s cubic-bezier(.2,.9,.2,1); }
.app-card:hover { padding-left: 18px; }
.app-card:hover::before { inset: 0; }
.app-no { padding-top: 7px; font-family: var(--mono); font-size: 11px; }
.app-copy h3 { margin-bottom: 11px; font-size: clamp(26px, 2.8vw, 41px); font-weight: 600; letter-spacing: -.08em; }
.app-copy p { max-width: 430px; margin-bottom: 17px; font-size: 14px; line-height: 1.8; }
.tag { display: inline-block; padding: 4px 8px; border: 1px solid currentColor; border-radius: 99px; font-size: 10px; }
.arrow { justify-self: end; padding-top: 1px; font-family: var(--mono); font-size: 31px; transition: transform .25s ease; }
.app-card:hover .arrow { transform: translate(5px, -5px); }
.orders { --card: #d8dfcf; }.disc { --card: #eadfba; }.venue { --card: #e5c4b5; }
.future { display: flex; align-items: flex-start; justify-content: space-between; padding: clamp(54px, 8vw, 110px) 0; border-top: 1px solid var(--ink); }
.future > p:last-child { margin: 0; font-size: clamp(25px, 3.2vw, 48px); font-weight: 600; line-height: 1.22; letter-spacing: -.075em; text-align: right; }
footer { border-top: 1px solid var(--line); border-bottom: 0; color: rgba(28, 33, 28, .7); }
@media (max-width: 680px) { .header-note { display: none; }.hero { min-height: 590px; }.hero-bottom, .future { display: block; }.scroll-cue { display: inline-block; margin-top: 32px; }.applications { display: block; }.section-label { margin-bottom: 44px; }.app-card { grid-template-columns: 36px 1fr 27px; min-height: 166px; gap: 9px; }.app-copy h3 { font-size: 27px; }.future > p:last-child { margin-top: 36px; text-align: left; }.future br { display: none; } footer span:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }