/* ============================================================
   HORNY TOAD STUDIOS — foundation
   Santa Fe volcanic rock, bone, chrome and burnt orange.
   Everything below hangs off one token set so the whole site
   can change personality (see: flavors) without a reload.
   ============================================================ */

@font-face{font-family:'ht-fallback';src:local('Helvetica Neue'),local('Arial');size-adjust:100%;ascent-override:92%}

/* ---------- 1. Palette: fixed, brand-level ---------- */
:root{
  --void:#0a0908;
  --obsidian:#111010;
  --basalt:#1a1816;
  --stone:#26231f;
  --grit:#3a352f;

  --bone:#f2eee2;
  --bone-2:#e6e0d0;
  --sand:#d3c6ac;
  --clay:#a1927c;
  --chrome:#b6b9bd;

  --ember:#d94f1e;
  --amber:#e5a028;
  --cactus:#82915c;
  --turquoise:#2b757c;
  --blood:#ad2524;

  --f-grotesk:'Archivo','ht-fallback',sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-fraunces:'Fraunces',Georgia,serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  --gut:clamp(20px,4.4vw,72px);
  --maxw:1720px;
  --rule:1px;
}

/* ---------- 2. Flavors: the live personality layer ---------- */
/* Default / house style — "Desert Industrial" */
:root,[data-flavor="house"]{
  --bg:#111010;
  --bg-2:#1a1816;
  --bg-inv:#f2eee2;
  --fg:#f2eee2;
  --fg-dim:#9a9287;
  --fg-inv:#131211;
  --accent:#d94f1e;
  --accent-2:#e5a028;
  --hair:#332f2a;

  --f-disp:var(--f-grotesk);
  --f-body:var(--f-grotesk);
  --disp-wght:800;
  --disp-wdth:78;
  --disp-track:-0.035em;
  --disp-lh:0.84;
  --disp-case:uppercase;
  --disp-style:normal;
  --body-wght:400;
  --body-track:0;

  --radius:2px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --dur:.55s;
  --dur-slow:1s;
  --pad-y:clamp(70px,9vw,150px);
  --grain:.055;
}

[data-flavor="luxury"]{
  --bg:#0d0c0b;
  --bg-2:#15130f;
  --bg-inv:#efe8d9;
  --fg:#ece4d3;
  --fg-dim:#9c9384;
  --fg-inv:#15130f;
  --accent:#c9a227;
  --accent-2:#d8c9a4;
  --hair:#2b2721;

  --f-disp:var(--f-fraunces);
  --f-body:var(--f-grotesk);
  --disp-wght:300;
  --disp-wdth:100;
  --disp-track:-0.02em;
  --disp-lh:0.94;
  --disp-case:none;
  --body-wght:300;
  --body-track:.01em;

  --radius:0px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:1.05s;
  --dur-slow:1.8s;
  --pad-y:clamp(90px,12vw,210px);
  --grain:.03;
}

[data-flavor="bold"]{
  --bg:#0f0f0e;
  --bg-2:#171716;
  --bg-inv:#dff24a;
  --fg:#f6f5ef;
  --fg-dim:#8f8f88;
  --fg-inv:#0f0f0e;
  --accent:#dff24a;
  --accent-2:#ff3d00;
  --hair:#2e2e2b;

  --f-disp:var(--f-grotesk);
  --f-body:var(--f-grotesk);
  --disp-wght:900;
  --disp-wdth:62;
  --disp-track:-0.05em;
  --disp-lh:0.76;
  --disp-case:uppercase;
  --body-wght:500;
  --body-track:-0.005em;

  --radius:0px;
  --ease:cubic-bezier(.86,0,.07,1);
  --dur:.3s;
  --dur-slow:.5s;
  --pad-y:clamp(60px,7vw,120px);
  --grain:.02;
}

[data-flavor="minimal"]{
  --bg:#f4f3ef;
  --bg-2:#eceae4;
  --bg-inv:#171613;
  --fg:#171613;
  --fg-dim:#78766e;
  --fg-inv:#f4f3ef;
  --accent:#171613;
  --accent-2:#6b6a63;
  --hair:#d3d1c9;

  --f-disp:var(--f-grotesk);
  --f-body:var(--f-grotesk);
  --disp-wght:450;
  --disp-wdth:100;
  --disp-track:-0.03em;
  --disp-lh:1;
  --disp-case:none;
  --body-wght:400;
  --body-track:0;

  --radius:0px;
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.42s;
  --dur-slow:.7s;
  --pad-y:clamp(100px,13vw,220px);
  --grain:0;
}

[data-flavor="organic"]{
  --bg:#191410;
  --bg-2:#231c16;
  --bg-inv:#e9dcc4;
  --fg:#eee3ce;
  --fg-dim:#a3937a;
  --fg-inv:#221a13;
  --accent:#8f9c5f;
  --accent-2:#c07a3c;
  --hair:#382d22;

  --f-disp:var(--f-fraunces);
  --f-body:var(--f-grotesk);
  --disp-wght:600;
  --disp-wdth:100;
  --disp-track:-0.015em;
  --disp-lh:0.92;
  --disp-case:none;
  --body-wght:400;
  --body-track:.005em;

  --radius:14px;
  --ease:cubic-bezier(.33,.9,.25,1);
  --dur:.85s;
  --dur-slow:1.4s;
  --pad-y:clamp(80px,10vw,180px);
  --grain:.09;
}

[data-flavor="playful"]{
  --bg:#f0e7d6;
  --bg-2:#e5d9c2;
  --bg-inv:#1d1a15;
  --fg:#1d1a15;
  --fg-dim:#6f6656;
  --fg-inv:#f7f2e7;
  --accent:#e8481f;
  --accent-2:#2b757c;
  --hair:#cfc2a8;

  --f-disp:var(--f-grotesk);
  --f-body:var(--f-grotesk);
  --disp-wght:850;
  --disp-wdth:112;
  --disp-track:-0.045em;
  --disp-lh:0.85;
  --disp-case:none;
  --body-wght:500;
  --body-track:0;

  --radius:999px;
  --ease:cubic-bezier(.34,1.56,.64,1);
  --dur:.5s;
  --dur-slow:.8s;
  --pad-y:clamp(70px,9vw,150px);
  --grain:.03;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-optical-sizing:auto;
  font-weight:var(--body-wght);letter-spacing:var(--body-track);
  font-size:clamp(15px,1.02vw,17.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
h1,h2,h3,h4{margin:0;font-weight:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;color:inherit}
::selection{background:var(--accent);color:var(--fg-inv)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:1px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:-200px;left:16px;z-index:900;background:var(--accent);color:var(--fg-inv);padding:12px 18px;font:600 13px/1 var(--f-mono)}
.skip:focus{top:14px}

/* ---------- 4. Type scale ---------- */
.disp{
  font-family:var(--f-disp);
  font-weight:var(--disp-wght);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght),'SOFT' 0,'WONK' 0;
  letter-spacing:var(--disp-track);
  line-height:var(--disp-lh);
  text-transform:var(--disp-case);
  font-style:var(--disp-style,normal);
  transition:font-variation-settings var(--dur) var(--ease),letter-spacing var(--dur) var(--ease);
}
[data-flavor="organic"] .disp{font-variation-settings:'wdth' 100,'wght' var(--disp-wght),'SOFT' 60,'WONK' 1}
[data-flavor="luxury"] .disp{font-variation-settings:'opsz' 144,'wght' var(--disp-wght),'SOFT' 0,'WONK' 0}

.t-mega{font-size:clamp(3.6rem,13.4vw,13rem)}
.t-xl{font-size:clamp(2.6rem,7.4vw,7.4rem)}
.t-lg{font-size:clamp(2rem,4.6vw,4.4rem)}
.t-md{font-size:clamp(1.45rem,2.5vw,2.5rem)}
.t-sm{font-size:clamp(1.1rem,1.5vw,1.5rem)}
.lede{font-size:clamp(1.05rem,1.42vw,1.32rem);line-height:1.55;max-width:44ch;color:var(--fg)}
.dim{color:var(--fg-dim)}
.mono{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.italic-serif{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:-.01em;font-weight:400}
.accent{color:var(--accent)}

/* ---------- 5. Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--pad-y);position:relative}
.rule{border-top:var(--rule) solid var(--hair)}
.eyebrow{display:flex;align-items:baseline;gap:16px;color:var(--fg-dim)}
.eyebrow b{color:var(--accent);font-weight:500}

/* ---------- 6. Grain / atmosphere ---------- */
.grain{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  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)'/%3E%3C/svg%3E");
  transition:opacity var(--dur-slow) var(--ease)}

/* ---------- 7. Cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:600;pointer-events:none;mix-blend-mode:difference;
  translate:-50% -50%;display:none}
.cursor-dot{width:9px;height:9px;border-radius:50%;background:#f2eee2;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor-label{position:absolute;top:50%;left:50%;translate:-50% -50%;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:#f2eee2;white-space:nowrap;opacity:0;transition:opacity .2s}
.cursor.on{display:block}
.cursor.wide .cursor-dot{width:82px;height:82px;background:#f2eee2}
.cursor.wide .cursor-label{opacity:1;color:#0a0908;mix-blend-mode:normal}
.cursor.tiny .cursor-dot{width:4px;height:4px}
@media (pointer:fine){body.has-cursor,body.has-cursor *{cursor:none}
  body.has-cursor input,body.has-cursor textarea,body.has-cursor select{cursor:text}}

/* ---------- 8. Header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:300;
  transition:transform .5s var(--ease),background var(--dur) var(--ease),border-color var(--dur)}
.hdr.hide{transform:translateY(-101%)}
.hdr.solid{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom:var(--rule) solid var(--hair)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.mark{display:grid;line-height:.86;font-family:var(--f-grotesk);font-weight:800;
  font-variation-settings:'wdth' 88,'wght' 800;font-size:17px;letter-spacing:-.045em;text-transform:uppercase}
.mark i{font-style:normal;font-size:8.5px;letter-spacing:.42em;font-weight:500;
  font-variation-settings:'wdth' 100,'wght' 500;margin-top:6px;color:var(--fg-dim)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px)}
.nav a{position:relative;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;padding-block:6px}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;scale:0 1;transform-origin:left;transition:scale .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1 1}
.nav a[aria-current]{color:var(--accent)}
.nav .cta{border:var(--rule) solid var(--hair);border-radius:var(--radius);padding:10px 16px;color:var(--accent)}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--accent);color:var(--fg-inv);border-color:var(--accent)}
.burger{display:none;width:40px;height:40px;place-items:center}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger span+span{margin-top:5px}
.hdr.open .burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.hdr.open .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media (max-width:1080px){
  .burger{display:grid}
  .nav{position:fixed;inset:0;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:6px;background:var(--bg);padding:var(--gut);
    clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease)}
  .hdr.open .nav{clip-path:inset(0)}
  .nav a{font-family:var(--f-disp);font-size:clamp(2rem,9vw,3.4rem);font-weight:var(--disp-wght);
    font-variation-settings:'wdth' 90,'wght' 750;letter-spacing:-.04em;text-transform:var(--disp-case)}
  .nav a::after{display:none}
  .nav .cta{margin-top:20px;font-family:var(--f-mono);font-size:12px;letter-spacing:.13em}
}

/* ---------- 9. Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:15px 24px;border-radius:var(--radius);
  background:var(--accent);color:var(--fg-inv);font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;min-height:48px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .3s var(--ease);
  will-change:transform}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.ghost{background:none;color:var(--fg);border:var(--rule) solid var(--hair)}
.btn.ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.arrow-link{display:inline-flex;align-items:center;gap:18px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase}
.arrow-link i{width:52px;height:52px;flex:none;display:grid;place-items:center;border:var(--rule) solid var(--hair);
  border-radius:50%;font-style:normal;font-size:17px;transition:background .35s var(--ease),color .35s,rotate .45s var(--ease),border-color .35s}
.arrow-link:hover i{background:var(--accent);color:var(--fg-inv);border-color:var(--accent);rotate:45deg}

/* ---------- Shared section head ---------- */
.sec-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,90px);align-items:end;
  margin-bottom:clamp(38px,5vw,80px)}
.sec-head .lede{justify-self:end}
@media (max-width:900px){.sec-head{grid-template-columns:1fr;align-items:start;gap:22px}.sec-head .lede{justify-self:start}}
.lnk{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:var(--rule) solid var(--hair);transition:border-color .35s var(--ease),color .35s}
.lnk:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- 10. Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* Line-by-line mask reveal */
.mask-line{display:block;overflow:hidden}
.mask-line>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.in .mask-line>span,.mask-line.in>span{transform:none}
.mask-line:nth-child(2)>span{transition-delay:.09s}
.mask-line:nth-child(3)>span{transition-delay:.18s}
.mask-line:nth-child(4)>span{transition-delay:.27s}

/* ---------- 11. Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-block:var(--rule) solid var(--hair);padding-block:15px}
.marquee-track{display:flex;gap:52px;width:max-content;animation:slide 38s linear infinite}
.marquee-track>span{display:flex;gap:52px}
.marquee i{font-style:normal;color:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 12. Footer ---------- */
.ft{border-top:var(--rule) solid var(--hair);padding-block:clamp(48px,6vw,90px) 26px;background:var(--bg)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.ft-top h2{font-size:clamp(2.4rem,6.6vw,6rem)}
.ft-top h2 a:hover{color:var(--accent)}
.ft-col{display:grid;gap:11px}
.ft-col a,.ft-col span{font-size:14px;color:var(--fg-dim)}
.ft-col a:hover{color:var(--fg)}
.ft-col .mono{margin-bottom:6px;color:var(--accent)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:var(--rule) solid var(--hair)}
@media (max-width:860px){.ft-top{grid-template-columns:1fr;gap:34px}}

/* ---------- 13. Flavor bar (site-wide personality switch) ---------- */
.flavorbar{position:fixed;bottom:0;left:0;right:0;z-index:290;display:flex;align-items:center;
  gap:0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);
  border-top:var(--rule) solid var(--hair);transition:transform .5s var(--ease)}
.flavorbar.tuck{transform:translateY(101%)}
.flavorbar-lbl{padding:0 16px;flex:none}
.flavorbar-opts{display:flex;flex:1;min-width:0}
.fv{flex:1;padding:12px 6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-dim);border-left:var(--rule) solid var(--hair);
  transition:background .3s var(--ease),color .3s}
.fv:hover{color:var(--fg);background:var(--bg-2)}
.fv[aria-pressed="true"]{background:var(--accent);color:var(--fg-inv)}
@media (max-width:720px){.flavorbar-lbl{display:none}.fv{font-size:9px;letter-spacing:.06em;padding:11px 2px}}

/* ---------- 14. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .mask-line>span{transform:none}
  .cursor{display:none!important}
  body.has-cursor,body.has-cursor *{cursor:auto!important}
}