/* Ramen Reserve — manga/ink design system (from Claude Design mockups) */
:root{
  --ink:#141414; --paper:#faf8f2; --yellow:#EFC722;
  --muted:#c9c5bb; --gray:#8a8a8a; --gold:#b98f00; --deep:#7a6300;
  --ink-soft:#2b2b2b; --panel:#1c1c1c;
  --bd:3px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
a{text-decoration:none;color:inherit}

/* themes */
.dark{background:var(--ink);color:var(--paper);--line:var(--paper);--body:var(--muted)}
.light{background:var(--paper);color:var(--ink);--line:var(--ink);--body:var(--ink-soft)}

.display{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.5px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.wrap{padding:56px 64px}
.hl{background:var(--yellow);color:var(--ink);padding:0 12px;box-shadow:5px 5px 0 var(--line)}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 40px;border-bottom:var(--bd) solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:Anton,Impact,sans-serif;font-size:20px;letter-spacing:1px}
.brand a{display:flex;align-items:center;gap:10px}
.mark{width:28px;height:28px;flex:none}
.brand small{font-size:16px;color:var(--gray)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500;flex-wrap:wrap}
.nav-links a:hover{color:var(--yellow)}
.nav-links .here{border-bottom:var(--bd) solid var(--yellow);font-weight:700}

/* ---- buttons ---- */
.btn{display:inline-block;font:700 16px/1 "Space Grotesk",sans-serif;padding:14px 28px;
  background:var(--yellow);color:var(--ink);border:var(--bd) solid var(--yellow);
  box-shadow:5px 5px 0 var(--line);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--line)}
.btn:active{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--line)}
.btn-sm{padding:8px 18px;font-size:15px;box-shadow:4px 4px 0 var(--line)}
.btn-sm:hover{box-shadow:6px 6px 0 var(--line)}
.btn-outline{background:transparent;color:inherit;border-color:var(--line);
  box-shadow:5px 5px 0 color-mix(in srgb,var(--line) 40%,transparent)}
.btn-outline:hover{box-shadow:7px 7px 0 color-mix(in srgb,var(--line) 40%,transparent)}
.light .btn{border-color:var(--ink)}
.btn-term{background:var(--ink);color:var(--yellow);border-color:var(--ink);
  font-family:"IBM Plex Mono",monospace;font-size:13px;box-shadow:4px 4px 0 var(--yellow)}
.btn-term:hover{box-shadow:6px 6px 0 var(--yellow)}
.link-ul{font-weight:700;font-size:15px;border-bottom:var(--bd) solid var(--yellow);cursor:pointer;background:none;border-width:0 0 3px;color:inherit;font-family:inherit;padding:0}

/* ---- speech bubble ---- */
.bubble{display:inline-block;border:var(--bd) solid var(--line);background:inherit;
  border-radius:16px 16px 16px 2px;padding:12px 20px;font-weight:700;font-size:14px;letter-spacing:.5px}
.bubble-r{border-radius:16px 16px 2px 16px}

/* ---- hero ---- */
.hero{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:72px 64px;overflow:hidden;align-items:center}
.hero>*{position:relative}
.speedlines{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 74px,rgba(250,248,242,.06) 74px 78px);
  animation:rr-streak 14s linear infinite}
.halftone{position:absolute;width:260px;height:260px;border-radius:50%;
  background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);background-size:12px 12px;opacity:.13}
.h1{font-family:Anton,Impact,sans-serif;font-size:clamp(44px,7vw,84px);line-height:1.04;letter-spacing:.5px}
.lede{font-size:18px;line-height:1.6;max-width:460px;margin:28px 0 34px;color:var(--body)}
.lede a{font-weight:700;color:var(--line);border-bottom:var(--bd) solid var(--yellow)}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}

/* ---- animated ramen bowl ---- */
.bowl-stage{display:flex;align-items:center;justify-content:center;min-height:380px}
.bowl{position:relative;width:300px;height:300px}
.bowl-plate{position:absolute;left:20px;top:20px;width:260px;height:260px;
  background:var(--ink);border:var(--bd) solid var(--paper);border-radius:50%}
.steam{position:absolute}
.steam svg path{stroke:var(--paper);stroke-width:4;stroke-linecap:round;fill:none}
.chopstick{position:absolute;width:5px;background:var(--paper);border-radius:3px}
.noodles{position:absolute;left:50px;width:200px;height:28px;overflow:hidden}
.noodles svg{position:absolute;left:-40px;top:0;animation:rr-flow 2.8s linear infinite}
.noodles svg path{stroke:var(--yellow);stroke-width:5;stroke-linecap:round;fill:none}
.bowl-cup{position:absolute;left:50px;top:146px;width:200px;height:100px;background:var(--ink);
  border:5px solid var(--paper);border-radius:0 0 100px 100px}

/* ---- ticker ---- */
.ticker{border-top:var(--bd) solid var(--line);border-bottom:var(--bd) solid var(--line);
  background:var(--yellow);color:var(--ink);overflow:hidden;padding:12px 0}
.ticker-track{display:flex;width:max-content;animation:rr-ticker 18s linear infinite;
  font-family:Anton,Impact,sans-serif;font-size:18px;letter-spacing:2px;white-space:nowrap}
.ticker-track span{flex:none;padding-right:48px}

/* ---- section heads ---- */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-family:Anton,Impact,sans-serif;font-size:clamp(28px,4vw,40px);font-weight:400}
.sec-head p{font-size:14px;color:var(--gray);font-weight:500}
.eyebrow{font-family:Anton,Impact,sans-serif;font-size:15px;color:var(--yellow);letter-spacing:3px;margin-bottom:16px}

/* ---- menu cards ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:block;border:var(--bd) solid var(--line);background:var(--ink);color:var(--paper);
  padding:30px;transition:transform .14s,box-shadow .14s}
.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--yellow)}
.card-num{font-family:Anton,Impact,sans-serif;font-size:14px;color:var(--yellow);letter-spacing:2px;margin-bottom:12px}
.card h3{font-family:Anton,Impact,sans-serif;font-size:28px;font-weight:400;margin-bottom:10px}
.card p{font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:18px}
.card .tag{display:inline-block;background:var(--yellow);color:var(--ink);padding:6px 14px;font-weight:700;font-size:13px}
.card-paper{background:var(--paper);color:var(--ink)}
.card-paper .card-num{color:var(--gold)}
.card-paper p{color:var(--ink-soft)}
.card-paper .tag{background:var(--ink);color:var(--yellow);font-family:"IBM Plex Mono",monospace}
.card-yellow{display:flex;flex-direction:column;align-items:flex-start;background:var(--yellow);border-color:var(--yellow);color:var(--ink);width:100%;text-align:left;font-family:inherit;cursor:pointer}
.card-yellow:hover{box-shadow:8px 8px 0 var(--paper)}
.card-yellow .card-num{color:var(--deep)}
.card-yellow p{color:#3a3000}
.card-yellow .tag{background:var(--ink);color:var(--yellow)}

/* ---- crew ---- */
.crew{border:var(--bd) solid var(--line);background:var(--ink)}
.crew-photo{height:190px;background:repeating-linear-gradient(45deg,#242424 0 8px,var(--panel) 8px 16px);
  display:flex;align-items:center;justify-content:center;border-bottom:var(--bd) solid var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8a8578}
.crew-meta{padding:14px 18px;color:var(--paper)}
.crew-meta b{font-size:15px}
.crew-meta span{display:block;font-size:13px;color:var(--gray)}
.crew-cta{border:var(--bd) solid var(--yellow);background:var(--yellow);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;
  padding:24px;transition:transform .14s,box-shadow .14s;min-height:120px}
.crew-cta:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--paper)}
.crew-cta strong{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:26px;text-align:center;line-height:1.1}
.crew-cta em{font-style:normal;font-weight:700;font-size:14px;border-bottom:var(--bd) solid var(--ink)}

/* ---- chapters (about) ---- */
.chapters{background:var(--paper);padding:6px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chapter{background:var(--ink);color:var(--paper);padding:28px}
.chapter b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:34px;color:var(--yellow)}
.chapter h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:19px;margin:10px 0 8px}
.chapter p{font-size:14px;line-height:1.55;color:var(--muted)}
.chapter-yellow{background:var(--yellow);color:var(--ink)}
.chapter-yellow b{color:var(--deep)}
.chapter-yellow p{color:#3a3000}

/* ---- feature strip ---- */
.features{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--bd) solid var(--line)}
.features>div{padding:36px;border-right:var(--bd) solid var(--line)}
.features>div:last-child{border-right:0}
.features b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:14px;color:var(--gold);letter-spacing:2px;display:block;margin-bottom:12px}
.features h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px;margin-bottom:10px}
.features p{font-size:15px;line-height:1.55;color:var(--body)}
.code-chip{font-family:"IBM Plex Mono",monospace;background:var(--yellow);padding:1px 6px;font-size:13px;font-weight:600;color:var(--ink)}

/* ---- chat demo ---- */
.chat{display:flex;flex-direction:column;gap:18px;justify-content:center}
.msg{border:var(--bd) solid var(--ink);background:#fff;border-radius:16px 16px 16px 2px;padding:16px 20px;max-width:380px}
.msg small{display:block;font-size:12px;font-weight:700;color:var(--gray);margin-bottom:6px}
.msg p{font-size:16px;font-weight:500;line-height:1.5}
.msg-user{align-self:flex-end;border-radius:16px 16px 2px 16px;max-width:340px}
.msg-bot{align-self:flex-start;background:var(--yellow);box-shadow:6px 6px 0 var(--ink)}
.msg-bot small{color:var(--deep)}
.typing{align-self:flex-start;display:flex;gap:6px;border:var(--bd) solid var(--ink);background:#fff;
  border-radius:16px 16px 16px 2px;padding:14px 18px;width:max-content}
.typing i{width:9px;height:9px;border-radius:50%;background:var(--ink);animation:rr-dots 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}

/* ---- terminal ---- */
.terminal{width:100%;border:var(--bd) solid var(--ink);background:var(--ink);box-shadow:10px 10px 0 var(--yellow)}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:var(--bd) solid var(--ink-soft)}
.term-bar i{width:12px;height:12px;border-radius:50%;border:2px solid var(--yellow)}
.term-bar i:last-of-type{background:var(--yellow)}
.term-bar span{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--gray)}
.terminal pre{margin:0;padding:24px;font-family:"IBM Plex Mono",monospace;font-size:15px;line-height:1.7;
  color:var(--yellow);min-height:190px;white-space:pre-wrap}
.caret{display:inline-block;width:9px;height:18px;background:var(--yellow);vertical-align:-3px;animation:rr-blink 1s infinite}

/* ---- closing bars ---- */
.closer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 64px;
  background:var(--ink);color:var(--paper);flex-wrap:wrap}
.closer h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:28px}
.install{display:flex;align-items:center;justify-content:center;gap:20px;padding:40px 64px;
  background:var(--yellow);border-top:var(--bd) solid var(--ink);color:var(--ink);flex-wrap:wrap}
.install code{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;
  background:var(--ink);color:var(--yellow);padding:14px 24px}
.install span{font-family:Anton,Impact,sans-serif;font-size:24px}

/* ---- footer ---- */
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 40px;
  border-top:var(--bd) solid var(--line);font-size:13px;font-weight:500;color:var(--gray);flex-wrap:wrap}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer a:hover{color:var(--yellow)}

/* ---- newsletter dialog (pop-out) ---- */
dialog.pop{border:var(--bd) solid var(--ink);background:var(--paper);color:var(--ink);padding:0;
  width:min(440px,calc(100vw - 32px));box-shadow:10px 10px 0 var(--yellow);animation:rr-pop .35s cubic-bezier(.2,1.4,.4,1)}
dialog.pop::backdrop{background:rgba(20,20,20,.72)}
.pop-head{background:var(--ink);color:var(--paper);padding:22px 26px;position:relative}
.pop-head h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;line-height:1.1}
.pop-head p{font-size:14px;color:var(--muted);margin-top:8px}
.pop-close{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--paper);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.pop-close:hover{color:var(--yellow)}
.pop form{padding:26px;display:grid;gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.field input{min-width:0;width:100%;font:500 16px/1 "Space Grotesk",sans-serif;padding:12px 14px;border:var(--bd) solid var(--ink);
  background:#fff;color:var(--ink);border-radius:0}
.field input:focus{outline:0;box-shadow:4px 4px 0 var(--yellow)}
.row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pop-msg{font-size:14px;font-weight:600;min-height:20px}
.pop-msg.err{color:#b3261e}
.pop-msg.ok{color:var(--deep)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---- animations ---- */
@keyframes rr-steam{0%{transform:translateY(0) scaleY(.9);opacity:0}25%{opacity:.9}100%{transform:translateY(-26px) scaleY(1.15);opacity:0}}
@keyframes rr-ticker{to{transform:translateX(-50%)}}
@keyframes rr-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes rr-dots{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes rr-streak{to{background-position:624px 0}}
@keyframes rr-flow{to{transform:translateX(-68px)}}
@keyframes rr-pop{0%{transform:scale(0) rotate(-6deg);opacity:0}70%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes rr-rise{0%{transform:translateY(28px);opacity:0}100%{transform:translateY(0);opacity:1}}
.a-rise{animation:rr-rise .7s ease-out both}
.a-pop{animation:rr-pop .6s cubic-bezier(.2,1.4,.4,1) .9s both}

/* ---- responsive ---- */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;padding:56px 32px}
  .wrap{padding:48px 32px}
  .nav,.footer{padding:18px 24px}
  .grid-3,.grid-4,.chapters,.features{grid-template-columns:1fr 1fr}
  .features>div:nth-child(2){border-right:0}
  .closer,.install{padding:32px}
}
@media(max-width:640px){
  .wrap{padding:40px 20px}
  .hero{padding:44px 20px}
  .grid-3,.grid-4,.chapters,.features,.row-2{grid-template-columns:1fr}
  .features>div{border-right:0;border-bottom:var(--bd) solid var(--line)}
  .bowl{transform:scale(.85)}
  .install code,.install span{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}