/* ==========================================================================
   SteveBailey.me — styles
   Extracted verbatim from the approved v6 prototype. Do not "improve" the
   design while restructuring. Font faces are self-hosted (see @font-face below).
   ========================================================================== */

/* ---- self-hosted fonts (Google latin subset, woff2) ----
   Anton ships a single 400 weight. Nunito's latin face is a variable font,
   so one file serves the whole 400–800 range (normal), plus one italic file. */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Nunito';
  font-style:italic;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/nunito-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy:#16376B; --navy-deep:#0F2650;
  --lake:#2E86C8; --sky:#93CFEC; --sky-pale:#CFE9F6;
  --cream:#FCF5E7; --cream-2:#EFE2CC; --sand:#F6E7C8;
  --sun:#FFC24D; --coral:#E9633C;
  --pine:#1F6152; --fern:#5FA872;
  --ink:#1B2A3A; --ink-60:rgba(27,42,58,.62);
  --display:'Anton',Impact,system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.66;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}

/* ================= HERO ================= */
/* Height comes FROM the picture: the box is exactly the illustration's ratio, so with
   preserveAspectRatio="meet" the whole scene fits with no crop and no letterbox bars. */
.hero{position:relative;width:100%;aspect-ratio:1600/760;background:var(--navy);overflow:hidden;z-index:1;display:flex;align-items:center}
.hero .art{position:absolute;inset:0;z-index:1;line-height:0}
.hero .art svg{width:100%;height:100%;display:block}
.hero .scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(15,38,80,.95) 0%,rgba(15,38,80,.88) 20%,rgba(15,38,80,.6) 36%,rgba(15,38,80,.22) 50%,rgba(15,38,80,0) 62%)}
.hero .copy{position:relative;z-index:3;width:100%;padding:92px 0}
.hero .inner{max-width:50%}
.hero h1{font-family:var(--display);font-size:clamp(44px,6.4vw,92px);line-height:.9;margin:0 0 22px;color:var(--cream)}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero p.sub{font-size:clamp(16.5px,1.3vw,19px);max-width:46ch;color:rgba(252,245,231,.9);margin:0}
.hero p.sub b{color:var(--sun);font-weight:700}
/* Below 1140 the 2.1:1 picture would be too short to read, so we stack and
   re-aim the viewBox at the right-hand third instead of shrinking everything. */
@media(max-width:1139px){
  .hero{aspect-ratio:auto;display:block}
  /* no max-height: it was capping the art and letterboxing it inside its own box.
     Full width at the same 1000/760 frame the desktop range ends on = zero jump. */
  .hero .art{position:relative;inset:auto;width:100%;aspect-ratio:1000/760}
  .hero .scrim{display:none}
  .hero .copy{padding:38px 0 52px;background:var(--navy)}
  .hero .inner{max-width:100%}
}

/* ================= CHOOSER ================= */
.chooser{background:linear-gradient(180deg,var(--sky-pale) 0%,var(--cream) 40%);padding:66px 0 86px;position:relative;z-index:2}
.chooser .lede{max-width:60ch;margin:0 0 34px;color:var(--ink-60);font-size:16px}
.chooser .lede b{color:var(--ink);font-weight:700}
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
/* six cards want an even 3x2, not 4+2 with a hole in it */
@media(min-width:1000px){ .rooms{grid-template-columns:repeat(3,1fr)} }
.room{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--cream-2);border-top:5px solid var(--coral);padding:22px 22px 52px;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.room:hover,.room:focus-visible{transform:translateY(-7px);box-shadow:0 18px 34px rgba(22,55,107,.2);outline:none}
.room:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,134,200,.5),0 18px 34px rgba(22,55,107,.2)}
.room .n{font-weight:800;font-size:10.5px;letter-spacing:.2em;color:var(--ink-60);text-transform:uppercase}
.room h3{font-family:var(--display);font-size:24px;margin:7px 0 8px}
.room p{font-size:14.5px;color:var(--ink-60);margin:0}
.room .ico{display:block;margin-bottom:8px}
.room .cue{position:absolute;left:22px;bottom:18px;display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);
  opacity:.55;transform:translateX(0);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.room:hover .cue,.room:focus-visible .cue{opacity:1;transform:translateX(5px)}
.room .cue svg{transition:transform .34s var(--ease)}
.room:hover .cue svg{transform:translateX(4px)}
.room:nth-child(2){border-top-color:var(--fern)}
.room:nth-child(3){border-top-color:var(--navy)}
.room:nth-child(4){border-top-color:var(--sun)}
.room:nth-child(5){border-top-color:var(--lake)}
.room:nth-child(6){border-top-color:var(--pine)}
.room.pro .co{font-family:var(--display);font-size:22px;margin:0 0 4px;display:block}
.room.pro h3{font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);margin:0 0 9px}

/* ================= PANELS ================= */
.panel{position:fixed;inset:0;z-index:100;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.panel.open{opacity:1;visibility:visible}
.panel .bg{position:absolute;inset:0;z-index:1;line-height:0}
.panel .bg svg{width:100%;height:100%;display:block}
.panel .pscrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(15,38,80,.97) 0%,rgba(15,38,80,.94) 28%,rgba(15,38,80,.74) 44%,rgba(15,38,80,.2) 58%,rgba(15,38,80,0) 68%)}
.panel .scroller{position:relative;z-index:3;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:84px 0 90px;-webkit-overflow-scrolling:touch}
.panel .content{max-width:52%;transform:translateY(22px);transition:transform .6s var(--ease) .08s}
.panel.open .content{transform:none}
.panel .n{font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sun)}
.panel h2{font-family:var(--display);font-size:clamp(34px,5vw,68px);line-height:.94;margin:10px 0 0;color:var(--cream)}
.panel .co{font-family:var(--display);font-size:clamp(30px,4.4vw,60px);line-height:.96;margin:10px 0 4px;color:var(--cream);display:block}
.panel .kicker{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,245,231,.6);margin:0 0 6px}
.panel .statement{font-size:clamp(17px,1.5vw,21px);color:var(--sun);font-style:italic;margin:20px 0 0;padding-top:18px;
  border-top:1px solid rgba(252,245,231,.28);max-width:44ch}
.panel .pbody{color:rgba(252,245,231,.88);margin:26px 0 0;max-width:56ch}
.panel .pbody a{color:var(--sun)}
.panel .plist{margin:22px 0 0;padding:0;list-style:none;max-width:52ch}
.panel .plist li{border-top:1px solid rgba(252,245,231,.18);padding:13px 0;color:rgba(252,245,231,.86);font-size:16px}
.panel .plist li b{color:var(--cream);font-weight:800;display:block}
.panel .disclosure{margin:22px 0 0;max-width:56ch;font-size:13.5px;color:rgba(252,245,231,.6)}
.close{position:absolute;top:22px;right:24px;z-index:6;width:56px;height:56px;border-radius:50%;
  background:rgba(15,38,80,.72);border:2px solid rgba(252,245,231,.55);color:var(--cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.close:hover,.close:focus-visible{background:var(--coral);border-color:var(--coral);transform:rotate(90deg);outline:none}
.close:focus-visible{box-shadow:0 0 0 3px rgba(255,194,77,.6)}
.hint{position:absolute;bottom:22px;right:26px;z-index:6;font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(252,245,231,.55)}
@media(max-width:980px){
  .panel .pscrim{background:linear-gradient(180deg,rgba(15,38,80,.72) 0%,rgba(15,38,80,.94) 34%,rgba(15,38,80,.97) 100%)}
  .panel .content{max-width:100%;padding-top:180px}
  .panel .scroller{padding:24px 0 70px}
  .close{top:16px;right:16px;width:48px;height:48px}
  .hint{display:none}
}

/* ================= site footer ================= */
.sitefoot{background:var(--navy-deep);color:var(--cream);padding:72px 0 34px;position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr);gap:30px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fcol h4{font-family:var(--display);font-size:20px;margin:0 0 14px;color:var(--cream);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pill{font-family:var(--body);font-weight:800;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--coral);color:#fff;padding:4px 8px;border-radius:2px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:9px}
.fcol a{color:rgba(252,245,231,.8);text-decoration:none;font-size:15px;border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.fcol a:hover,.fcol a:focus-visible{color:var(--sun);border-bottom-color:var(--sun)}
.fnote{font-size:14px;color:rgba(252,245,231,.55);margin:0 0 12px;max-width:34ch}
.flogo{margin-top:54px;padding-top:40px;border-top:1px solid rgba(252,245,231,.16);text-align:center}
.fwm{font-family:var(--display);font-size:30px;color:var(--cream);margin-top:10px;line-height:1}
.fwm span{color:var(--sun)}
.ftag{font-weight:800;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(252,245,231,.55);margin-top:10px}
.fbottom{margin-top:34px;padding-top:22px;border-top:1px solid rgba(252,245,231,.16);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.06em;color:rgba(252,245,231,.5)}
.fsign{color:var(--sun);font-weight:700}

/* ================= motion ================= */
@keyframes radiate{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.075);opacity:1}}
@keyframes drift{from{transform:translateX(-300px)}to{transform:translateX(1900px)}}
@keyframes paddle{from{transform:translateX(-200px)}to{transform:translateX(1800px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-5px) rotate(1.4deg)}}
@keyframes swayA{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
@keyframes swayB{0%,100%{transform:translateX(10px)}50%{transform:translateX(-10px)}}
@keyframes shimmer{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes flick1{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.17) scaleX(.92)}}
@keyframes flick2{0%,100%{transform:scaleY(1.1) scaleX(.95)}50%{transform:scaleY(.9) scaleX(1.07)}}
@keyframes emberrise{0%{transform:translateY(0) scale(1);opacity:.9}100%{transform:translateY(-80px) scale(.35);opacity:0}}
/* embers that actually travel — up AND sideways, like real ones */
@keyframes emberA{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:.95}100%{transform:translate(34px,-230px) scale(.25);opacity:0}}
@keyframes emberB{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:.9}100%{transform:translate(-40px,-270px) scale(.2);opacity:0}}
@keyframes emberC{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:.85}100%{transform:translate(14px,-190px) scale(.3);opacity:0}}
@keyframes steam{0%{transform:translate(0,0) scale(.55);opacity:0}20%{opacity:.55}100%{transform:translate(-18px,-104px) scale(1.6);opacity:0}}
@keyframes mote{0%{transform:translate(0,0);opacity:0}25%{opacity:.75}100%{transform:translate(-34px,72px);opacity:0}}
@keyframes smokerise{0%{transform:translateY(0) scale(.7);opacity:.55}100%{transform:translateY(-110px) scale(1.8);opacity:0}}
@keyframes sweep{0%,100%{transform:rotate(-24deg);opacity:.32}50%{transform:rotate(24deg);opacity:.6}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes glowpulse{0%,100%{opacity:.5}50%{opacity:.85}}
.sunGlow{transform-origin:1080px 240px;animation:radiate 7s ease-in-out infinite}
.cloudA{animation:drift 104s linear infinite}
.cloudB{animation:drift 148s linear infinite;animation-delay:-58s}
.cloudC{animation:drift 124s linear infinite;animation-delay:-96s}
.canoe{animation:paddle 88s linear infinite}
.canoe > g{animation:bob 4.6s ease-in-out infinite;transform-origin:center}
.waveA{animation:swayA 8s ease-in-out infinite}
.waveB{animation:swayB 11.5s ease-in-out infinite}
.waveC{animation:swayA 6.4s ease-in-out infinite}
.sunpath{animation:shimmer 6s ease-in-out infinite}
.fO{animation:flick1 1.15s ease-in-out infinite}
.fM{animation:flick2 .82s ease-in-out infinite}
.fI{animation:flick1 .64s ease-in-out infinite}
.e1{animation:emberrise 2.6s linear infinite}
.e2{animation:emberrise 3.4s linear infinite;animation-delay:-1.4s}
.e3{animation:emberrise 3s linear infinite;animation-delay:-2.2s}
.s1{animation:smokerise 7s linear infinite}
.s2{animation:smokerise 7s linear infinite;animation-delay:-2.3s}
.s3{animation:smokerise 7s linear infinite;animation-delay:-4.6s}
.beam{animation:sweep 9s ease-in-out infinite}
.tw1{animation:twinkle 4s ease-in-out infinite}
.tw2{animation:twinkle 5.5s ease-in-out infinite;animation-delay:-2s}
.tw3{animation:twinkle 3.4s ease-in-out infinite;animation-delay:-1s}
.lamp{animation:glowpulse 8s ease-in-out infinite}
/* CRITICAL for animated SVG: without transform-box:fill-box a percentage/center
   transform-origin resolves against the WHOLE viewBox, not the shape — so anything
   that scales flies across the canvas instead of growing in place. This is why the
   chimney smoke was drifting off to the right of the cabin. */
.puff,.s1,.s2,.s3,.canoe > g{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .panel,.panel .content{transition:none!important}
}