/* Solas Studio site styles.
   Design tokens (color, type, spacing, radius, elevation) are the single
   source of truth and live in the design system at design/tokens.css — this
   file imports them and consumes everything via var(--token). Never hard-code
   a brand colour here; add/adjust it in design/tokens.css instead. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('design/tokens.css');

:root{
  --line: var(--color-border);
  --focus: 2px solid var(--color-amber);

  /* Fluid spacing scale — one source of truth for vertical rhythm.
     Section spacing is applied as a single gap between siblings (never
     doubled padding), so pages stay uniform regardless of content. */
  --space-section: clamp(2.75rem, 2rem + 3vw, 4.5rem);  /* ~44–72px */
  --space-lg:      clamp(2rem, 1.5rem + 2vw, 3.5rem);   /* hero/grid gaps */
  --space-md:      clamp(1.25rem, 1rem + 1vw, 2rem);
  --measure:       62ch;                                /* shared reading width */
  --wrap-pad:      clamp(1.25rem, 1rem + 1vw, 2rem);    /* fluid horizontal gutter */
}

*{box-sizing:border-box;}
/* scrollbar-gutter:stable reserves the vertical scrollbar's space at all times
   so the content width never changes when a scrollbar appears/disappears. This
   kills the horizontal "jutter" on the events page, where the empty-state → taller
   event-cards swap grows the page, toggles the scrollbar, and shifts everything
   left→right for ~1s. Applied site-wide so page width is consistent between pages
   too. (No effect where the OS uses overlay scrollbars, e.g. most mobile.) */
html{scroll-behavior:smooth; scrollbar-gutter:stable;}
body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-text-body);
  font-family:var(--font-sans);
  line-height:var(--type-body-lh);
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
}
main{flex:1; display:flex; flex-direction:column; gap:var(--space-section);}
h1,h2,h3{
  font-family:var(--font-sans);
  color:var(--color-ink);
  margin:0 0 0.4em 0;
  font-weight:var(--fw-heavy);
  letter-spacing:-0.01em;
  line-height:var(--type-h2-lh);
  text-wrap:balance;
}
h1{font-size:clamp(2rem,4.4vw,var(--type-hero-size)); line-height:var(--type-h1-lh);}
h2{font-size:var(--type-h2-size);}
h3{font-size:var(--type-h3-size); line-height:var(--type-h3-lh);}
p{margin:0 0 1em 0;}
a{color:var(--color-amber-ink);}
a:hover{color:var(--color-amber-hover);}

/* Layout */
/* width:100% is required because sections are flex items of <main>; without an
   explicit width a flex item shrink-wraps to its content (and margin:0 auto then
   centers it), which would make intro sections narrower and centered. Claiming
   full width up to max-width keeps every section the same width, left-aligned. */
.wrap{width:100%; max-width:var(--container-max); margin:0 auto; padding-left:var(--wrap-pad); padding-right:var(--wrap-pad);}
/* Sections have no own vertical padding — the gap on <main> provides a single,
   uniform rhythm between them so adjacent sections never double up. The first
   section gets top spacing to clear the sticky header, on every page. */
section{padding:0;}
main > section:first-child{padding-top:var(--space-section);}

/* Header / nav — ink bar, amber active underline, amber CTA */
header{
  border-bottom:1px solid rgba(217,149,74,0.3);
  background:var(--color-ink);
  position:sticky; top:0; z-index:50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:var(--container-max); margin:0 auto;
}

/* Brand lockup: S² mark · divider · wordmark. The mark is ONE self-contained
   SVG (design/s2-mark.svg, inlined by scripts/build.mjs) — the S and its ²
   superscript are baked into the asset's geometry, so there is no hand-placed
   "2" and no absolute positioning to keep in sync. It's inlined (not <img>) so
   its colours come straight from the tokens: S = currentColor (set below), the
   ² fill = var(--color-amber), both baked into the SVG. */
.brand{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none;
}
/* Sized by the S: the injected viewBox is the S-only box (height 540 = the S
   cap height), so height:24px renders the S at 24px and the lockup centres on
   the S — matching the previous mark exactly. The ² sits above the S cap-line
   and is allowed to overflow the box (overflow:visible), the same way the old
   ² overflowed its 30×24 wrapper. */
.brand .mark{
  height:24px; width:auto; display:block;
  overflow:visible; flex-shrink:0;
  color:var(--color-on-dark);
}
.brand .divider{
  width:1px; height:29px; flex-shrink:0;
  background:rgba(244,245,247,0.28);
}
.brand .word{
  font-family:var(--font-sans); font-weight:var(--fw-semibold);
  font-size:clamp(1rem, 0.85rem + 0.6vw, 20px); line-height:1; color:var(--color-on-dark);
  letter-spacing:0.005em; white-space:nowrap;
  position:relative; top:-1px;
}

ul.links{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
ul.links a{
  text-decoration:none; color:var(--color-on-dark); opacity:0.8;
  font-size:0.9rem; font-weight:var(--fw-semibold);
  border-bottom:2px solid transparent; padding-bottom:4px;
  transition:border-color .15s ease, opacity .15s ease;
}
ul.links a:hover, ul.links a.active{border-bottom-color:var(--color-amber); opacity:1;}
.nav-inner{display:flex; align-items:center; gap:32px; min-width:0;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; padding:0; background:none; border:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px; background:var(--color-on-dark);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Buttons — primary = ink fill / paper text; secondary = ink outline;
   header CTA = amber fill / ink text (on-dark). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--color-ink); color:var(--color-on-dark); text-decoration:none; text-align:center;
  padding:13px 24px; border-radius:var(--radius-sm); font-weight:var(--fw-bold); font-size:0.9rem;
  border:1px solid var(--color-ink); cursor:pointer; transition:transform .12s ease, background .15s ease;
}
.btn:hover{background:#333B4A; transform:translateY(-1px);}
.btn.secondary{background:transparent; color:var(--color-ink);}
.btn.secondary:hover{background:rgba(27,33,48,0.06);}
header .btn{
  background:var(--color-amber); color:var(--color-ink); border-color:var(--color-amber);
  /* Fluid so the CTA scales with the viewport instead of holding a fixed
     desktop size and crowding the brand on phones; nowrap keeps it on one
     line. See design principle: mobile-first, fluid before fixed. */
  padding:clamp(8px, 1.4vw, 11px) clamp(13px, 3vw, 20px);
  font-size:clamp(0.8rem, 0.7rem + 0.4vw, 0.9rem);
  white-space:nowrap;
}
header .btn:hover{background:#E7A85C;}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:var(--focus); outline-offset:2px;}
header .btn:focus-visible{outline-color:var(--color-on-dark);}

/* Hero — home landing, two-column, fills the viewport fold */
.hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-lg); align-items:center;
  flex:1; align-content:center;
}

/* Standard intro on content pages: left-editorial, heading + lead, real
   content follows immediately (no forced fold). */
.intro h1{max-width:26ch;}
.intro p{max-width:var(--measure);}
.intro p:last-child{margin-bottom:0;}

/* Fold modifier: fills the initial viewport and vertically centers its copy. */
.intro-fold{flex:1; display:flex; flex-direction:column; justify-content:center;}
.eyebrow{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:var(--type-eyebrow-ls);
  font-size:var(--type-eyebrow-size); font-weight:var(--fw-bold); color:var(--color-amber-ink);
  margin-bottom:14px; display:block;
}
.lead{font-size:1.1rem; line-height:1.6; max-width:var(--measure); color:var(--color-text-body);}
.hero-copy p.lead{max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap;}

/* Shop window panel (signature visual) — ink surface, amber frame */
.shopwindow{
  background:var(--color-ink);
  border:6px solid var(--color-amber);
  border-radius:var(--radius-lg);
  padding:0;
  position:relative;
  box-shadow: 0 18px 40px rgba(27,33,48,0.25);
  overflow:hidden;
}
.shopwindow-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:rgba(0,0,0,0.18);
  border-bottom:1px solid rgba(217,149,74,0.35);
}
.shopwindow-bar .sign{
  font-family:var(--font-sans); font-size:0.7rem; font-weight:var(--fw-bold); color:#EFB877;
  letter-spacing:0.08em; display:flex; align-items:center; gap:8px;
}
.shopwindow-bar .dot{width:8px; height:8px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 3px rgba(95,191,138,0.2);}
.shopwindow-body{padding:20px; min-height:230px; display:flex; flex-direction:column; gap:12px;}
.demo-msg{
  font-family:var(--font-sans); font-size:0.85rem; padding:10px 14px; border-radius:var(--radius-sm);
  max-width:85%; line-height:1.5;
}
.demo-msg.them{background:rgba(244,245,247,0.08); color:#E4E8F0; align-self:flex-start; border:1px solid rgba(244,245,247,0.12);}
.demo-msg.us{background:var(--color-amber); color:var(--color-ink); align-self:flex-end; font-weight:var(--fw-semibold);}

/* Feature grid */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md);}
.card{
  background:var(--color-surface); border:1px solid var(--color-border-card); border-radius:var(--radius-md);
  padding:24px; position:relative; box-shadow:var(--shadow-card);
}
.card .eyebrow{margin-bottom:10px; font-size:11px; letter-spacing:0.08em;}
.card h3{font-size:1rem; margin-bottom:8px;}
.card p{color:var(--color-text-body); font-size:0.9rem; margin:0; line-height:1.55;}

/* Process timeline (real sequence, numbering justified) — set on a sand panel */
.timeline-panel{
  background:var(--color-sand); border:1px solid var(--color-sand-border);
  border-radius:var(--radius-lg); padding:40px 44px;
}
.timeline{display:flex; flex-direction:column; gap:0; border-left:2px solid var(--color-border); margin-left:14px;}
.timeline .step{position:relative; padding:0 0 32px 32px;}
.timeline .step:last-child{padding-bottom:0;}
.timeline .step::before{
  content:attr(data-n); position:absolute; left:-15px; top:0;
  width:28px; height:28px; border-radius:50%; background:var(--color-ink); color:var(--color-amber);
  font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:0.8rem;
  display:flex; align-items:center; justify-content:center;
}
.timeline h3{font-size:0.95rem; margin-bottom:6px;}
.timeline p{color:var(--color-text-body); margin:0; font-size:0.9rem;}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); align-items:start;}
.price-card{
  background:var(--color-surface); border:1px solid var(--color-border-card); border-radius:var(--radius-md); padding:28px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-card);
}
.price-card.featured{border:2px solid var(--color-amber); box-shadow:var(--shadow-amber);}
.price-card .amount{font-family:var(--font-sans); font-size:2rem; font-weight:var(--fw-heavy); color:var(--color-ink);}
.price-card .amount span{font-family:var(--font-sans); font-size:0.875rem; font-weight:var(--fw-medium); color:var(--color-text-muted);}
.price-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:0.9rem; color:var(--color-text-body);}
.price-card li::before{content:"— "; color:var(--color-amber-ink);}

/* Contact form */
.form-grid{display:grid; gap:18px; max-width:520px;}
label{font-size:13px; font-weight:var(--fw-bold); color:var(--color-ink); display:block; margin-bottom:6px;}
input, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:0.9rem; background:var(--color-surface); color:var(--color-ink);
}
input:focus, textarea:focus{border-color:var(--color-amber); outline:2px solid rgba(217,149,74,0.25); outline-offset:0;}
textarea{resize:vertical; min-height:120px;}

footer{
  border-top:1px solid rgba(217,149,74,0.3); padding:28px 0; margin-top:var(--space-section);
  background:var(--color-ink);
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-inner p{margin:0; font-size:0.8rem; color:var(--color-on-dark); opacity:0.75;}
/* Cloudflare Turnstile attribution — its own muted line below the footer row. */
.footer-inner .turnstile-notice{flex-basis:100%; font-size:0.72rem; opacity:0.55;}
.footer-inner .turnstile-notice a{color:inherit; text-decoration:underline;}

/* ============ Chat Widget ============ */
/* Launcher pill + panel styling only — behaviour lives in script.js and the
   backend in api/chat.js; those are intentionally left untouched. */
#fd-chat-launcher{
  position:fixed; bottom:22px; right:22px; z-index:100;
  background:var(--color-ink); color:var(--color-on-dark);
  border:2px solid var(--color-amber); border-radius:var(--radius-pill);
  padding:12px 18px; font-family:var(--font-sans); font-size:0.8rem; font-weight:var(--fw-bold);
  display:flex; align-items:center; gap:9px; cursor:pointer;
  box-shadow:0 10px 30px rgba(27,33,48,0.3);
  transition:transform .15s ease, bottom .15s ease;
}
#fd-chat-launcher:hover{transform:translateY(-2px);}
#fd-chat-launcher .dot{width:8px; height:8px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 3px rgba(95,191,138,0.25);}

#fd-chat-panel{
  position:fixed; bottom:22px; right:22px; z-index:101;
  width:340px; max-width:calc(100vw - 32px); height:460px; max-height:calc(100vh - 100px);
  background:var(--color-ink); border:2px solid var(--color-amber); border-radius:var(--radius-lg);
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 50px rgba(27,33,48,0.35);
  transition:bottom .15s ease;
}
#fd-chat-panel.open{display:flex;}
.fd-chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:rgba(0,0,0,0.18); border-bottom:1px solid rgba(217,149,74,0.3);
}
.fd-chat-head .title{font-family:var(--font-sans); color:#EFB877; font-size:0.8rem; font-weight:var(--fw-bold); letter-spacing:0.06em; display:flex; align-items:center; gap:8px;}
.fd-chat-head .title .dot{width:7px; height:7px; border-radius:50%; background:var(--color-success);}
.fd-chat-close{background:none; border:none; color:#EFB877; font-size:1.1rem; cursor:pointer; line-height:1; padding:4px;}
.fd-chat-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
.fd-msg{font-family:var(--font-sans); font-size:0.82rem; padding:9px 12px; border-radius:var(--radius-sm); max-width:85%; line-height:1.45;}
.fd-msg.bot{background:rgba(244,245,247,0.08); color:#E4E8F0; align-self:flex-start; border:1px solid rgba(244,245,247,0.12);}
.fd-msg.user{background:var(--color-amber); color:var(--color-ink); align-self:flex-end; font-weight:var(--fw-semibold);}
.fd-msg.typing{color:var(--color-neutral); font-style:italic;}
.fd-chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(217,149,74,0.25);}
.fd-chat-input-row input{
  flex:1; background:rgba(244,245,247,0.06); border:1px solid rgba(244,245,247,0.18);
  color:#E4E8F0; border-radius:var(--radius-sm); padding:10px 12px; font-family:var(--font-sans); font-size:0.85rem;
}
.fd-chat-input-row input::placeholder{color:var(--color-neutral);}
.fd-chat-input-row button{
  background:var(--color-amber); border:none; color:var(--color-ink); border-radius:var(--radius-sm); padding:0 16px;
  font-weight:var(--fw-bold); cursor:pointer; font-size:0.85rem;
}

/* Events & Ticketing */
.events-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-md);}
.event-card{display:flex; flex-direction:column; gap:10px;}
.event-card .eyebrow{margin-bottom:0;}
.event-location{color:var(--color-text-body); font-size:0.9rem; margin:0;}
.event-meta{display:flex; justify-content:space-between; align-items:center; margin:6px 0;}
.event-price{font-family:var(--font-sans); font-weight:var(--fw-heavy); color:var(--color-ink); font-size:1.05rem;}
.event-spots{font-family:var(--font-sans); font-size:0.8rem; font-weight:var(--fw-semibold); color:var(--color-amber-ink);}
.load-more-btn{grid-column:1/-1; justify-self:center; margin-top:var(--space-md);}

/* Checkout summary — the event-summary markup is injected by checkout.js
   (h2 + date <p> + <p class="event-price">); the container is styled as an
   ink card so those injected elements read as the design's summary panel. */
.checkout-summary{
  background:var(--color-ink); border-radius:var(--radius-lg);
  padding:22px 24px; margin-bottom:28px;
}
.checkout-summary h2{color:var(--color-on-dark); font-size:var(--type-h3-size); margin:0 0 6px;}
.checkout-summary p{color:var(--color-neutral); font-size:0.85rem; margin:0 0 4px;}
.checkout-summary p:last-child{margin-bottom:0;}
.checkout-summary .event-price{color:var(--color-amber); font-weight:var(--fw-heavy); font-size:1.15rem; margin-top:8px;}
fieldset.attendee-fields{
  border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px 20px 8px;
  margin:0 0 16px 0; display:grid; gap:14px;
}
fieldset.attendee-fields legend{
  font-family:var(--font-sans); font-size:0.7rem; font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:0.08em; color:var(--color-amber-ink); padding:0 6px;
}
.form-error{color:var(--color-amber-ink); font-size:0.9rem; margin:12px 0 0 0;}
.form-success{
  background:var(--color-surface); border:1px solid var(--color-border-card); border-radius:var(--radius-md);
  padding:24px; margin-top:16px; box-shadow:var(--shadow-card);
}
.rating-group{display:flex; gap:10px; margin-bottom:16px;}
.rating-group label{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--color-border); border-radius:50%; cursor:pointer; font-weight:var(--fw-bold);
  margin-bottom:0; color:var(--color-ink); background:var(--color-surface);
}
.rating-group input{position:absolute; opacity:0; width:0; height:0;}
.rating-group input:checked + label{background:var(--color-amber); border-color:var(--color-amber);}

/* Tablet: step 3-col grids down to 2-col before collapsing to 1 on phones */
@media (max-width:1000px){
  .grid3, .pricing-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:820px){
  .events-grid{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .grid3, .pricing-grid{grid-template-columns:1fr;}
  .nav{padding:14px 16px;}
  .nav-inner{gap:14px;}
  .nav-toggle{display:flex;}
  ul.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--color-ink);
    border-bottom:1px solid rgba(217,149,74,0.3); padding:4px 24px 12px; z-index:60;
  }
  ul.links.open{display:flex;}
  ul.links li{width:100%;}
  ul.links a{
    display:block; padding:14px 0; font-size:1rem;
    border-bottom:1px solid rgba(244,245,247,0.1);
  }
  ul.links li:last-child a{border-bottom:none;}
}

/* Small phones: collapse the brand lockup to just the S² mark so the header
   (mark + amber CTA + hamburger) always fits without crowding or overflow.
   The wordmark/divider return above this width. */
@media (max-width:400px){
  .brand .divider, .brand .word{display:none;}
  .brand{gap:0;}
}

/* Phones: stack the hero CTAs full-width. Side by side, "Start a project" and
   "See packages" have different intrinsic widths, so they read as a ragged,
   unequal two-up row (and wrap unevenly around 320px). Stacking gives both one
   shared left/right edge and equal width — the primary stays on top (DOM order). */
@media (max-width:480px){
  .hero-actions{flex-direction:column; align-items:stretch;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}