/* ============================================================
   SECOND BELL STUDIO — "The Workbench"
   Palette pulled from the desk photo: cream paper, mahogany,
   brass, and the pen/apple red as the single action color.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* wood / mahogany */
  --wood-900: #20100b;
  --wood-850: #2a160f;
  --wood-800: #371d13;
  --wood-700: #4c2718;
  --wood-600: #6a3621;

  /* paper / cream */
  --paper:    #f3e9d6;
  --paper-2:  #ece0c8;
  --paper-3:  #e2d3b6;
  --cream:    #faf5ea;

  /* Light "cream" for text/marks that live on permanently-dark surfaces
     (the hero photo, wood bands, red buttons). Unlike --cream, this token
     is NOT flipped by the night theme, so on-dark text stays legible. */
  --on-wood:  #faf5ea;

  /* cork bulletin board — a lighter, warmer brown than the page wood */
  --cork:      #c8a16a;
  --cork-2:    #bd9258;
  --cork-dark: #a9793f;
  --cork-fleck:#8a5a2c;

  /* metals + ink */
  --brass:        #c08a3e;
  --brass-bright: #e3b864;
  --brass-deep:   #9a6a2c;

  --ink:      #2c1d14;
  --ink-soft: #6a5848;
  --ink-faint:#9a8770;

  /* action */
  --red:        #b23a2a;
  --red-bright: #cc4836;
  --red-deep:   #8c2c1f;

  /* fonts */
  --display: 'Raleway', system-ui, sans-serif;
  --body: 'Lato', system-ui, sans-serif;
  --hand: 'Caveat', cursive;

  /* rhythm */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --shadow-sm: 0 1px 2px rgba(32,16,11,.08), 0 2px 6px rgba(32,16,11,.06);
  --shadow-md: 0 4px 10px rgba(32,16,11,.10), 0 12px 30px rgba(32,16,11,.12);
  --shadow-lg: 0 10px 24px rgba(32,16,11,.14), 0 30px 60px rgba(32,16,11,.20);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red); color: var(--on-wood); }

/* paper grain overlay applied to light sections */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .04; pointer-events: none; mix-blend-mode: multiply;
  z-index: 0;
}

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(72px, 11vw, 150px) 0; }
.eyebrow {
  font-family: var(--display); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; font-size: 13px; color: var(--red);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); display: inline-block; }
.kicker-hand { font-family: var(--hand); color: var(--red); font-weight: 600; }

h1,h2,h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
h2.display { font-size: clamp(34px, 5.6vw, 68px); letter-spacing: -.03em; }
h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(19px, 2.1vw, 23px); color: var(--ink-soft); line-height: 1.6; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--red); --fg: var(--on-wood);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg); color: var(--fg);
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: .01em;
  padding: 15px 26px; border: none; border-radius: 2px;
  position: relative; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 0 var(--red-deep), var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--red-deep), var(--shadow-md); background: var(--red-bright); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--red-deep); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(4px); }

.btn.ghost {
  --bg: transparent; --fg: var(--ink);
  border: 1.5px solid rgba(44,29,20,.28);
  box-shadow: none;
}
.btn.ghost:hover { background: rgba(44,29,20,.05); border-color: var(--ink); box-shadow: none; transform: translateY(-2px); }
.btn.on-dark { --fg: var(--on-wood); border-color: rgba(243,233,214,.3); }
.btn.on-dark:hover { background: rgba(243,233,214,.08); border-color: var(--brass-bright); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* tape + pin accents */
.tape {
  position: absolute; width: 96px; height: 28px;
  background: rgba(227,184,100,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  backdrop-filter: blur(1px);
}