/* Kairos Fray. Generated by scripts/import-design.py: do not edit this file.
   Change the design's rules in the design, and the site's own in src/additions.css. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/cormorant-garamond-roman.woff2") format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url("/fonts/cormorant-garamond-italic.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500.woff2") format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/caveat.woff2") format('woff2')}

:root{--paper:#f1eadf;--ink:#1a1712;--red:#a63a2b;--red-on-dark:#e08a74;--muted:#6c645a;--text2:#3d3730;--cream:#f1eadf;--cream2:#cfc6b6;--rule:rgba(26,23,18,.18);--serif:'Cormorant Garamond',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--hand:Caveat,cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
img{display:block;max-width:100%}
p{text-wrap:pretty}
::selection{background:var(--red);color:var(--paper)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.label{color:var(--red)}
.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}
section[id]{scroll-margin-top:72px}

/* announcement bar */
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 28px;padding:11px clamp(20px,5vw,48px);background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bar-links{display:flex;gap:24px}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(241,234,223,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(26,23,18,.12)}
.nav-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding-top:16px;padding-bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nav-links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.brand{font-weight:500;color:var(--red)}
.nav-right{display:flex;gap:24px;align-items:center}
.pill{border:1px solid var(--ink);border-radius:999px;padding:8px 16px}
.pill:hover{background:var(--ink);color:var(--cream);text-decoration:none}

/* buttons + links */
.btn{display:inline-block;background:var(--ink);color:var(--cream);padding:16px 28px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.btn:hover{background:var(--red);text-decoration:none}
.btn.small{padding:14px 22px}
.stitch{display:inline-block;padding:8px 2px;border-bottom:2px dashed var(--red);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.stitch:hover{text-decoration:none;color:var(--red)}
.ul{border-bottom:1px solid var(--ink);padding-bottom:3px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ul:hover{color:var(--red);text-decoration:none}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:clamp(40px,6vw,72px) clamp(20px,5vw,48px) clamp(64px,9vw,112px)}
.hero-texture{position:absolute;inset:0;background:url("/img/paper-texture.jpg") center/cover;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.hero h1{margin:0}
.wordmark{width:min(440px,72vw);height:auto}
.hero p{margin:24px 0 0;max-width:760px;font-size:clamp(22px,2.6vw,32px);line-height:1.3;font-style:italic}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 28px;align-items:center;margin-top:clamp(28px,4vw,44px)}

/* songs */
.songs{padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(56px,7vw,88px)}
.feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(48px,6vw,96px);align-items:start}
.cover-col{display:flex;flex-direction:column;gap:36px}
.cover{width:min(100%,440px)}
.cover img{width:100%;aspect-ratio:1;transform:rotate(-1.5deg);box-shadow:0 40px 60px -30px rgba(26,23,18,.5)}
.player-slot:empty{display:none}
.cover-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.feature h2{margin:14px 0 36px;font-size:clamp(40px,5vw,68px);line-height:1.02;font-weight:500;letter-spacing:-.01em;text-wrap:pretty}
.lyrics{display:flex;flex-direction:column;gap:30px;font-size:clamp(22px,2.2vw,29px);line-height:1.38;font-style:italic}
.lyrics .part{font-style:normal;color:var(--muted);margin-bottom:10px}
.lyrics .chorus{font-size:clamp(30px,3.2vw,40px);line-height:1.2}
.lyrics + .stitch{margin-top:40px}
.more{margin-top:clamp(64px,8vw,104px)}
.more-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--rule);padding-top:20px;color:var(--muted)}
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 32px}
.song{display:flex;flex-direction:column;gap:8px;padding:18px 0;font-size:28px;line-height:1.15}
.song:hover{color:var(--red);text-decoration:none}
.song .mono{color:var(--muted);letter-spacing:.12em}

/* words */
.words{padding-top:clamp(40px,5vw,56px);padding-bottom:clamp(72px,9vw,112px)}
.words-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:32px 48px;align-items:start;max-width:1000px}
.poem{font-size:clamp(28px,3.4vw,44px);line-height:1.28;font-style:italic;text-wrap:pretty}
.words .label{margin-bottom:28px}
.words .stitch{margin-top:40px}
.note{font-family:var(--hand);font-size:28px;line-height:1.2;color:var(--red);transform:rotate(-3deg)}
.words .note{margin-top:clamp(0px,6vw,92px);max-width:260px}

/* about */
.about{padding-bottom:clamp(80px,10vw,120px)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,6vw,88px);align-items:center}
.about .label{margin-bottom:22px}
.about p{margin:0 0 22px;font-size:clamp(20px,2vw,25px);line-height:1.5}
.about p.soft{color:var(--text2);margin-bottom:34px}
.specs{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--muted);letter-spacing:.14em}
.artifact{position:relative;width:min(100%,480px);justify-self:center}
.artifact img{width:100%;mix-blend-mode:multiply}
.artifact .note{position:absolute;right:8px;bottom:-6px;font-size:26px}

/* letters */
.letters{background:linear-gradient(rgba(26,23,18,.78),rgba(26,23,18,.78)),url("/img/letters.jpg") center/cover;color:var(--cream);text-align:center;padding:clamp(80px,11vw,128px) clamp(20px,5vw,48px)}
.letters-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.letters h2{margin:0;font-size:clamp(38px,4.5vw,56px);line-height:1.05;font-weight:500}
.letters p{margin:18px 0 36px;font-size:clamp(20px,2vw,24px);line-height:1.45;color:var(--cream2)}
.letters form{display:flex;flex-wrap:wrap;width:100%;max-width:560px;border-bottom:1px solid var(--cream)}
.letters input{flex:1;min-width:200px;background:transparent;border:0;padding:14px 0;font:inherit;font-size:22px;color:var(--cream);outline:none}
.letters input::placeholder{color:var(--cream);opacity:.45}
.letters input:focus-visible{outline:none;box-shadow:0 2px 0 var(--red)}
.letters button{background:transparent;border:0;cursor:pointer;padding:14px 0 14px 24px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);border-bottom:2px dashed var(--red);margin-bottom:-1px}
.letters button:hover{color:var(--red-on-dark)}

/* footer */
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 48px;padding-top:28px;padding-bottom:28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.6;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:24px}

@media (max-width:640px){
  .bar{justify-content:center;text-align:center}
  .song{font-size:24px}
  .words .note{transform:rotate(-2deg);margin-top:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Additions ───────────────────────────────────────────────────────────
   Site plumbing the design did not need: the inlined wordmark and its
   entrance, held-back links, the working signup, and the small notice pages.
   scripts/import-design.py appends this file to the design's stylesheet. */

/* The design sizes images by width only. Without this, the height written on each
   <img> wins and the square cover shows at 440 x 880. */
img{height:auto}

/* The wordmark is inlined so its script can be written in; it takes the ink color. */
.wordmark{display:block;fill:var(--ink);overflow:visible}

/* The top bar carries only the listening links: right-aligned, centered on phones. */
.bar.links-only{justify-content:flex-end}

/* On phones the logo sits right under the nav, so the nav drops the name and
   tightens up to keep Songs, About, Letters, and Listen on one row. */
@media (max-width:640px){
  .bar.links-only{justify-content:center}
  .nav .brand{display:none}
  .nav-inner,.nav-links{gap:10px 22px}
}

/* Songs listed before their pages exist: same look, not links. */
div.song:hover{color:inherit}

/* Letters: the signup's honeypot, status line, and a focus mark that shows on the dark photo. */
.trap{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.letters input:focus-visible{box-shadow:0 2px 0 var(--red-on-dark)}
.letters button:focus-visible{outline-color:var(--red-on-dark)}
.letters button:disabled{cursor:progress;opacity:.7}
.letters-status{min-height:1.45em;margin:18px 0 0;font-size:clamp(20px,2vw,24px);line-height:1.45;font-style:italic;color:var(--cream2)}
.letters-status[data-tone="error"]{color:var(--red-on-dark)}
.letters.is-done form{display:none}
.letters.is-done .letters-status{margin-top:0;color:var(--cream)}

/* Small notice pages: thanks, try again, not found. */
.notice{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,8vw,96px) clamp(20px,5vw,48px)}
.notice .wordmark-link{display:block;margin-bottom:clamp(32px,5vw,56px)}
.notice .wordmark-link:hover{text-decoration:none}
.notice .wordmark-link img{width:min(200px,50vw);height:auto}
.notice h1{margin:0;font-size:clamp(38px,6vw,64px);line-height:1.05;font-weight:500;font-style:italic}
.notice p{margin:18px 0 32px;max-width:520px;font-size:clamp(20px,2vw,24px);line-height:1.45;color:var(--text2)}

/* Movement lives in the lettering: the capitals settle, then the script is written
   in from the left. Each animation only sets a starting state, so nothing is left
   clipped when it ends, and visitors who ask for reduced motion see it all at once. */
@media (prefers-reduced-motion:no-preference){
  .wordmark .caps{animation:settle .9s cubic-bezier(.2,.7,.2,1) backwards}
  .wordmark .script{animation:write 1.3s cubic-bezier(.5,0,.3,1) .45s backwards}
}
@keyframes settle{from{opacity:0;transform:translateY(8px)}}
@keyframes write{from{clip-path:inset(-10% 100% -10% -5%)}to{clip-path:inset(-10% -5% -10% -5%)}}