/* Grad 214 Rösterei — handcrafted styles
   Industrial / dark / high-contrast. Tailwind handles utilities;
   this file holds the custom layer Tailwind doesn't give us:
   marquee, roast-meter, font wiring, hard-edge details. */

:root{
  --char:#14110e;     /* charcoal background */
  --cream:#efe7da;    /* cream text */
  --ember:#ff5a1f;    /* roast ember orange */
  --brass:#caa46a;    /* brass */
  --char-2:#1d1813;   /* raised surface */
  --char-3:#2a231b;   /* border / hairline */
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }

/* ---------- FULL-WIDTH LAYOUT SHELLS ----------
   No fixed container: sections span the full viewport, content breathes
   with fluid side padding that scales from phone to ultrawide. */
.shell{
  width:100%;
  max-width:none;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4.5vw, 6rem);
}
/* readable column for grouped UI (FAQ, CTA cards) */
.shell-narrow{
  width:100%;
  max-width:64rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4.5vw, 2.5rem);
}
/* tight reading measure for long-form prose (legal, danke) */
.shell-prose{
  width:100%;
  max-width:48rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4.5vw, 2rem);
}
/* on very wide screens keep raw text blocks from stretching too far */
@media (min-width:1800px){
  .shell{ padding-inline:clamp(6rem, 8vw, 12rem); }
}

body{
  background:var(--char);
  color:var(--cream);
  font-family:'Space Grotesk',system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  margin:0;
  /* faint roasted-grain texture, no images */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,90,31,.05), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(202,164,106,.04), transparent 35%);
}

.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

::selection{ background:var(--ember); color:#14110e; }

a{ color:inherit; }

/* ---- focus visibility for keyboard users ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}

/* ---------- MARQUEE (pure CSS, JS just pauses on hover) ---------- */
.marquee{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid var(--char-3);
  border-bottom:1px solid var(--char-3);
  background:#100d0a;
}
.marquee__track{
  display:inline-flex;
  align-items:center;
  gap:0;
  will-change:transform;
  animation:marquee 38s linear infinite;
}
.marquee.is-paused .marquee__track{ animation-play-state:paused; }
.marquee__item{
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream);
  padding:.55rem 0;
}
.marquee__sep{
  color:var(--ember);
  padding:0 1.4rem;
  user-select:none;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; }
}

/* ---------- ROAST METER (bars indicator) ---------- */
.roast{
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.roast__bar{
  width:14px;
  height:8px;
  background:var(--char-3);
  display:inline-block;
}
.roast__bar.on{ background:var(--ember); }

/* ---------- hard-edge utility helpers ---------- */
.hairline{ border:1px solid var(--char-3); }
.edge-ember{ border:1px solid var(--ember); }

.link-underline{
  position:relative;
  text-decoration:none;
}
.link-underline::after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:0; height:2px;
  background:var(--ember);
  transition:width .25s ease;
}
.link-underline:hover::after{ width:100%; }

/* nav active state */
.nav-link[aria-current="page"]{
  color:var(--ember);
}

/* huge hero word kerning */
.hero-word{
  line-height:.92;
  letter-spacing:-.03em;
}

/* mobile menu */
.mobile-menu{ display:none; }
.mobile-menu.open{ display:block; }

/* spec card hover — subtle lift, no rounding */
.spec-card{ transition:border-color .2s ease, transform .2s ease; }
.spec-card:hover{ border-color:var(--ember); transform:translateY(-3px); }

/* details / FAQ */
details > summary{ list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker{ display:none; }
details[open] .faq-plus{ transform:rotate(45deg); }
.faq-plus{ transition:transform .2s ease; }

/* reveal on scroll (JS toggles .in) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* thin scroll progress bar */
.scroll-bar{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--ember); z-index:60;
}