/* ============================================================
   VITREA GLASSWORKS — heat-to-cold cooling curve
   Palette: furnace orange → heat white | smoke black | aquamarine | sand
   Type: Fraunces (SOFT axis up — molten terminals) + Archivo + Spline Sans Mono
   ============================================================ */

:root{
  --furnace:#ff6a1a;
  --ember:#ff8a3d;
  --heat-white:#ffe9c4;
  --smoke:#0d0b09;
  --char:#191009;
  --aqua:#7fd6c9;
  --aqua-deep:#0f2b28;
  --aqua-mid:#2b8a7e;
  --sand:#eae3d3;
  --coldshop:#f4f4ef;
  --ink:#1a2523;
  --ink-soft:#4c5f5b;
  --light:#f6ede0;
  --light-soft:#cbbfae;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:'Archivo',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  background:var(--smoke); /* JS drives this along the cooling curve */
  color:var(--light);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--furnace);color:var(--smoke)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-3rem;z-index:100;background:var(--heat-white);color:var(--smoke);padding:.5rem 1rem;font-family:var(--mono);font-size:.8rem;transition:top .2s}
.skip:focus{top:1rem}

a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--furnace);outline-offset:3px}
body.cooled a:focus-visible,body.cooled [tabindex]:focus-visible{outline-color:var(--aqua-mid)}

/* ---------- masthead ---------- */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.1rem 1.6rem;
  color:var(--light);
  transition:color .6s;
}
body.cooled .masthead{color:var(--ink)}
.wordmark{
  font-family:var(--serif);
  font-variation-settings:'SOFT' 100,'opsz' 40;
  font-weight:600;font-size:1.35rem;letter-spacing:.01em;
  text-decoration:none;
}
.wordmark span{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin-left:.5rem}
.masthead nav{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.masthead nav a{text-decoration:none;opacity:.85;padding:.2rem 0;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
.masthead nav a:hover{opacity:1;border-bottom-color:currentColor}
.nav-cta{border:1px solid currentColor;border-radius:2rem;padding:.3rem .85rem !important;opacity:1 !important}
.nav-cta:hover{background:var(--furnace);border-color:var(--furnace);color:var(--smoke)}
body.cooled .nav-cta:hover{background:var(--aqua-mid);border-color:var(--aqua-mid);color:var(--coldshop)}

/* ---------- temperature ticker ---------- */
.ticker{
  position:fixed;right:1.1rem;top:50%;z-index:40;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;
  font-family:var(--mono);
  color:var(--light);
  transition:color .6s;
  pointer-events:none;
  text-align:right;
}
.ticker.cooled{color:var(--ink)}
.ticker-temp{font-size:1.05rem;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ticker-stage{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;opacity:.65}
.ticker::after{content:'';width:1px;height:6.5rem;background:linear-gradient(var(--furnace),var(--aqua));margin-top:.6rem;opacity:.85}

/* ---------- shared section chrome ---------- */
.section{position:relative;max-width:72rem;margin:0 auto;padding:9rem 4.5rem 7rem}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;opacity:.75;margin-bottom:1.6rem}
.k-temp{display:inline-block;border:1px dashed currentColor;border-radius:2px;padding:.15rem .55rem;margin-right:.9rem;opacity:.9}
h2.molten{
  font-family:var(--serif);
  font-variation-settings:'SOFT' 100,'opsz' 100;
  font-weight:420;
  font-size:clamp(2.2rem,5vw,3.9rem);
  line-height:1.04;letter-spacing:-.01em;
  margin-bottom:2.2rem;
  text-wrap:balance;
}
h2.molten em{font-style:italic;font-variation-settings:'SOFT' 100,'opsz' 100}

/* batch tickets */
.ticket{
  display:inline-flex;gap:1.1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px dashed currentColor;border-radius:2px;
  padding:.45rem .8rem;opacity:.8;
}
.ticket span+span{position:relative;padding-left:1.1rem}
.ticket span+span::before{content:'·';position:absolute;left:.25rem;opacity:.6}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:34rem;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.03)}
.hero-grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,11,9,.62) 0%,rgba(13,11,9,.12) 30%,rgba(13,11,9,.05) 55%,rgba(13,11,9,.88) 100%),
    radial-gradient(90% 70% at 62% 42%,transparent 40%,rgba(13,11,9,.5) 100%);
  mix-blend-mode:normal;
}
.hero-title-zone{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#shimmerCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#heroTitle{
  font-family:var(--serif);
  font-variation-settings:'SOFT' 100,'opsz' 144;
  font-weight:560;
  font-size:clamp(4.4rem,17vw,15rem);
  letter-spacing:.01em;line-height:1;
  color:var(--heat-white);
  text-shadow:0 0 60px rgba(255,106,26,.55);
}
.hero.webgl-on #heroTitle{opacity:0}
.hero-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  padding:0 4.5rem 3.2rem;
}
.hero-line{font-family:var(--serif);font-variation-settings:'SOFT' 60,'opsz' 20;font-weight:400;font-style:italic;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.45;max-width:26em;color:var(--heat-white)}
.hero-actions{display:flex;gap:.9rem;flex-shrink:0}
.btn{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-radius:2rem;padding:.85rem 1.5rem;white-space:nowrap;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-fire{background:var(--furnace);color:var(--smoke);border:1px solid var(--furnace)}
.btn-fire:hover{background:var(--heat-white);border-color:var(--heat-white)}
.btn-ghost{border:1px solid rgba(246,237,224,.55);color:var(--heat-white)}
.btn-ghost:hover{border-color:var(--heat-white)}
.hero-ticket{position:absolute;top:5.4rem;left:4.5rem;z-index:3;color:var(--heat-white)}

/* ---------- gather ---------- */
.gather-body{columns:2;column-gap:3.5rem;max-width:58rem}
.gather-body p{break-inside:avoid;margin-bottom:1.4rem;font-size:1.02rem;color:var(--light);opacity:.92}
.gather-body em{color:var(--ember);font-style:italic}
.gather-facts{display:flex;gap:3.5rem;margin-top:3.4rem;flex-wrap:wrap}
.gather-facts div{display:flex;flex-direction:column;gap:.3rem}
.gather-facts b{font-family:var(--serif);font-variation-settings:'SOFT' 100,'opsz' 60;font-weight:500;font-size:2.1rem;color:var(--ember)}
.gather-facts span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;max-width:15em}

/* ---------- bench / tools ---------- */
.bench-photo,.gallery-photo{margin:0 0 2.6rem;position:relative}
.bench-photo img,.gallery-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:4px}
.bench-photo figcaption,.gallery-photo figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(13,11,9,.72);backdrop-filter:blur(4px);color:var(--heat-white)}
.gallery-photo figcaption{background:rgba(244,244,239,.82);color:var(--ink)}
.reveal{clip-path:inset(9% 6% 9% 6% round 4px);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{clip-path:inset(0 0 0 0 round 4px)}

.bench-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;opacity:.65;margin-bottom:2rem;max-width:44em}
.tools{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:rgba(246,237,224,.16)}
@media (min-width:1100px){.tools{grid-template-columns:repeat(5,1fr)}}
.tool{
  background:var(--tool-bg,rgba(13,11,9,.55));
  padding:1.6rem 1.4rem 1.8rem;
  transition:background .3s;
  cursor:default;
}
.tool:hover,.tool:focus-visible{background:rgba(255,106,26,.08)}
.tool svg{width:100%;height:5.2rem;margin-bottom:1rem;overflow:visible}
.tool svg path,.tool svg line{stroke:var(--light-soft);stroke-width:3;fill:none}
.tool svg .pivot{fill:var(--light-soft)}
.tool h3{font-family:var(--serif);font-variation-settings:'SOFT' 100,'opsz' 30;font-weight:500;font-size:1.25rem;margin-bottom:.5rem}
.tool p{font-size:.85rem;opacity:.78;line-height:1.55}
.tool-glass{fill:var(--furnace);opacity:.85;stroke:none !important;filter:drop-shadow(0 0 8px rgba(255,106,26,.6))}

/* tool demos */
.jack-a,.jack-b{transform-origin:60px 12px;transition:transform .5s cubic-bezier(.3,1.4,.4,1)}
.tool:hover .jack-a,.tool:focus-visible .jack-a{transform:rotate(9deg)}
.tool:hover .jack-b,.tool:focus-visible .jack-b{transform:rotate(-9deg)}
.tool:hover .jack-a + .jack-b ~ *{}
.tool:hover ellipse.tool-glass{transition:rx .5s, ry .5s}
.tool:hover .jack-a ~ .tool-glass{rx:11;ry:14}

.block-gob{transition:transform .5s}
.tool:hover .block-gob,.tool:focus-visible .block-gob{transform:translateY(6px)}
.steam path{stroke-width:2;opacity:0;transition:opacity .3s}
.tool:hover .steam path,.tool:focus-visible .steam path{opacity:.6;animation:steam 1.6s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.3s}
.steam path:nth-child(3){animation-delay:.6s}
@keyframes steam{0%{transform:translateY(0)}100%{transform:translateY(-8px);opacity:0}}

.punty-dab{transform:scale(0);transform-origin:94px 45px;transition:transform .45s cubic-bezier(.3,1.5,.4,1)}
.tool:hover .punty-dab,.tool:focus-visible .punty-dab{transform:scale(1)}

.marver-gob{transition:transform .5s, rx .5s, ry .5s}
.tool:hover .marver-gob,.tool:focus-visible .marver-gob{rx:22;ry:11;transform:translateY(7px)}

.glory-body{stroke-width:3}
.glory-glow{transition:filter .4s, r .4s}
.tool:hover .glory-glow,.tool:focus-visible .glory-glow{r:18;filter:drop-shadow(0 0 16px rgba(255,106,26,.95))}

/* ---------- forms (inflate) ---------- */
.forms{text-align:center}
.forms-row{display:flex;justify-content:center;gap:clamp(1rem,6vw,5rem);margin:2.5rem 0 2rem}
.form-svg{width:clamp(5.5rem,14vw,10rem);height:auto}
.form-svg .inflate{fill:rgba(127,214,201,.14);stroke:var(--aqua);stroke-width:2.5}
.forms-caption{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;opacity:.8;max-width:40em;margin:0 auto}

/* ---------- anneal ---------- */
.anneal-lede{max-width:44em;font-size:1.05rem;opacity:.9;margin-bottom:3rem}
.chart-wrap{margin:0;position:relative}
.chart{width:100%;height:auto;display:block}
.chart .grid line{stroke:currentColor;opacity:.14;stroke-width:1}
.chart .grid text,.chart .marks text{fill:currentColor;font-family:var(--mono);font-size:11px;letter-spacing:.08em;opacity:.75}
.chart .curve{stroke-width:3.5;stroke-linecap:round}
.chart .marks circle{fill:currentColor}
.chart .tip{fill:var(--furnace);filter:drop-shadow(0 0 6px rgba(255,106,26,.8))}
.chart .marks .mark-label{font-size:11.5px;opacity:.95}
.chart-ticket{margin-top:1.2rem}

/* ---------- gallery ---------- */
.gallery-lede{max-width:46em;font-size:1.05rem;margin-bottom:3rem}
.ledger{list-style:none;border-top:1px solid currentColor;margin-top:2.6rem}
.ledger li{
  display:grid;grid-template-columns:3.2rem 1fr auto auto;gap:1.5rem;align-items:baseline;
  padding:.9rem .2rem;border-bottom:1px solid;
  border-color:color-mix(in srgb,currentColor 25%,transparent);
  transition:background .2s;
}
.ledger li:hover{background:color-mix(in srgb,currentColor 5%,transparent)}
.ledger-no{font-family:var(--serif);font-variation-settings:'SOFT' 100,'opsz' 30;font-weight:500;font-size:1.15rem;transition:color .25s,text-shadow .25s}
.ledger li:hover .ledger-no{color:var(--aqua-mid);text-shadow:0 0 14px rgba(127,214,201,.55)}
.ledger-name{font-size:.95rem}
.ledger-dim{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;opacity:.7}
.ledger-status{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.2rem .6rem;border-radius:2rem;border:1px solid transparent}
.is-placed{opacity:.55;border-color:currentColor}
.is-held{border-color:var(--furnace);color:#b04a12}
.is-avail{background:var(--aqua-mid);color:var(--coldshop)}
.is-studio{border:1px dashed currentColor;opacity:.7}
.gallery-cta{margin-top:2.4rem;font-size:.95rem}
.gallery-cta a{color:var(--aqua-mid);text-underline-offset:3px}

/* ---------- sessions ---------- */
.sessions-lede{max-width:46em;font-size:1.05rem;margin-bottom:3.2rem}
.session-log{border-top:2px solid var(--ink)}
.log-head,.log-row{
  display:grid;
  grid-template-columns:1.35fr 1fr 1.4fr .5fr .5fr;
  gap:1.4rem;align-items:center;
  padding:1.15rem .4rem;
}
.log-head{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;border-bottom:1px solid;border-color:color-mix(in srgb,currentColor 30%,transparent);padding:.7rem .4rem}
.log-row{
  text-decoration:none;border-bottom:1px solid;
  border-color:color-mix(in srgb,currentColor 22%,transparent);
  transition:background .25s,padding-left .25s;
  position:relative;
}
.log-row::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scale(0);
  width:.5rem;height:.5rem;border-radius:50%;background:var(--furnace);
  transition:transform .3s cubic-bezier(.3,1.5,.4,1);
}
.log-row:hover{background:color-mix(in srgb,currentColor 4%,transparent);padding-left:1.2rem}
.log-row:hover::before{transform:translateY(-50%) scale(1)}
.log-row b{font-family:var(--serif);font-variation-settings:'SOFT' 100,'opsz' 30;font-weight:520;font-size:1.2rem;display:block}
.log-row i{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.log-row span{font-size:.9rem}
.log-fee{font-family:var(--mono);font-size:.85rem !important;font-variant-numeric:tabular-nums}
.log-book{font-family:var(--mono);font-size:.72rem !important;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua-mid);white-space:nowrap;text-align:right}
.sessions-fine{margin-top:2.6rem;font-size:.85rem;opacity:.7;max-width:48em}

/* ---------- cooled sections text colour ---------- */
.anneal,.gallery,.sessions,.footer{color:var(--ink)}
.gallery .kicker,.sessions .kicker{opacity:.85}
.anneal-lede,.gallery-lede,.sessions-lede{color:var(--ink-soft)}

/* ---------- footer ---------- */
.footer{max-width:72rem;margin:0 auto;padding:4rem 4.5rem 6rem;border-top:1px solid;border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.foot-brand{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.foot-word{font-family:var(--serif);font-variation-settings:'SOFT' 100,'opsz' 60;font-weight:560;font-size:2rem}
.foot-brand p:last-child{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.foot-links{display:flex;gap:2rem;flex-wrap:wrap;font-size:.9rem;margin-bottom:2.2rem}
.foot-links a{color:var(--aqua-mid);text-underline-offset:3px}
.foot-note{font-family:var(--serif);font-variation-settings:'SOFT' 60,'opsz' 20;font-style:italic;font-size:.95rem;opacity:.65}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .section{padding:6.5rem 1.4rem 4.5rem}
  .hero-foot{flex-direction:column;align-items:flex-start;padding:0 1.4rem 5.5rem}
  .hero-ticket{left:1.4rem;top:auto;bottom:auto;top:5.2rem}
  .gather-body{columns:1}
  .masthead{padding:.9rem 1.4rem;flex-wrap:wrap;gap:.5rem}
  .masthead nav{gap:.9rem;font-size:.62rem;flex-wrap:wrap}
  .ticker{right:.8rem;top:auto;bottom:1.2rem;transform:none;flex-direction:column}
  .ticker::after{display:none}
  .footer{padding:3rem 1.4rem 5rem}
  .log-head{display:none}
  .log-row{grid-template-columns:1fr auto;grid-template-areas:'name fee' 'time book' 'take take';row-gap:.5rem}
  .log-row span:nth-child(1){grid-area:name}
  .log-row span:nth-child(2){grid-area:time;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
  .log-row span:nth-child(3){grid-area:take;font-size:.85rem;opacity:.85}
  .log-fee{grid-area:fee;text-align:right}
  .log-book{grid-area:book}
  .ledger li{grid-template-columns:2.2rem 1fr;grid-template-rows:auto auto;row-gap:.25rem}
  .ledger-dim{grid-column:2}
  .ledger-status{grid-column:2;justify-self:start}
  .ledger-no{grid-row:1 / span 2}
}

@media (max-width:480px){
  .masthead nav a:not(.nav-cta){display:none}
  .hero-actions{flex-direction:column;width:100%}
  .btn{text-align:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{clip-path:none;opacity:1}
  #shimmerCanvas{display:none}
  .hero.webgl-on #heroTitle{opacity:1}
}