/* =========================================================
   CATONIT
   Vintage alpine field guide: cream paper, loden green,
   hard offset shadows. No glows, no gradient blobs.
   ========================================================= */

:root{
  /* pulled from the artwork itself */
  --paper:    #ece3d0;   /* aged cream */
  --paper-2:  #f5efe1;   /* card face */
  --ink:      #171612;   /* warm near-black */
  --ink-soft: #5b564a;

  --loden:    #1f4a33;   /* the hat */
  --loden-dk: #14301f;
  --cord:     #8a6a3d;   /* the braided cord */
  --red:      #b2382a;   /* alpine signage red */

  --rule:     #171612;
  --hair:     rgba(23,22,18,.16);

  --shadow:   4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --max: 1120px;
  --ease: cubic-bezier(.2,.9,.25,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--paper);
  /* paper tooth — flat colour alone reads as a swatch */
  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='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;
}

img{ max-width:100%; display:block; }
::selection{ background:var(--loden); color:var(--paper-2); }

/* shared label style — small caps mono, used throughout */
.eyebrow,
.target-num, .target-sub,
.ca-label, .ca-hint,
.gen-prefix, .footer-fine{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.eyebrow{
  color:var(--ink-soft);
  margin:0 0 14px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px; background:var(--hair);
}

/* ---------------------------------------------------------
   TOP BAR — an enamel sign
   --------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:11px clamp(16px,4vw,36px);
  background:var(--loden);
  color:var(--paper-2);
  border-bottom:2px solid var(--ink);
}
.wordmark{
  display:flex; align-items:center; gap:11px;
  font-family:var(--serif);
  font-weight:900;
  font-size:19px;
  letter-spacing:.02em;
  color:var(--paper-2);
  text-decoration:none;
  flex:none;
}
.wordmark-cat{
  width:30px; height:30px; object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
.topbar-rule{ flex:1 1 auto; height:1px; background:rgba(236,227,208,.28); }
.ticker-chip{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.12em;
  border:1px solid rgba(236,227,208,.5);
  padding:4px 12px;
  white-space:nowrap; flex:none;
}

/* ---------------------------------------------------------
   HERO — asymmetric, not centred
   --------------------------------------------------------- */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(32px,6vw,70px) clamp(16px,4vw,36px) clamp(44px,7vw,84px);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(20px,4vw,52px);
  align-items:center;
  margin-bottom:clamp(32px,5vw,56px);
}

.hero-copy{ container-type:inline-size; }

.title{
  font-family:var(--serif);
  font-weight:900;
  font-variation-settings:"SOFT" 0, "WONK" 1;
  /* Sized to its own column, not the viewport — CATONIT is wide enough that
     a vw-based size overflows and clips at middling widths. */
  font-size:clamp(58px, 12vw, 138px);      /* fallback */
  font-size:clamp(58px, 22.4cqw, 146px);
  line-height:.80;
  letter-spacing:-.035em;
  margin:0;
  color:var(--ink);
}
.title-on{ color:var(--loden); }

.tagline{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:clamp(18px,2.4vw,24px);
  line-height:1.35;
  color:var(--ink-soft);
  margin:20px 0 0;
  max-width:22ch;
}

.instruction{
  margin:24px 0 0;
  padding-top:16px;
  border-top:1px solid var(--hair);
  font-size:15.5px;
  color:var(--ink-soft);
  max-width:34ch;
}
.instruction strong{ color:var(--ink); font-weight:600; }

/* --- the cat --- */
.stage{ position:relative; }
.perch{
  position:relative;
  z-index:30;
  width:min(100%, 420px);
  margin-inline:auto;
}

.cat{
  position:relative;
  width:100%;
  cursor:grab;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  touch-action:none;                /* we own the gesture */
  filter:drop-shadow(0 10px 14px rgba(23,22,18,.18));
  transition:transform .5s var(--spring);
  will-change:transform;
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -9px; }
}
.cat.dragging{
  cursor:grabbing;
  transition:none; animation:none;
  z-index:60;
  filter:drop-shadow(0 22px 20px rgba(23,22,18,.28));
}
.cat.returning{ transition:transform .55s var(--spring); }

/* ---------------------------------------------------------
   TARGETS — flat cards with a hard print shadow
   --------------------------------------------------------- */
.targets{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,18px);
}

.target{
  position:relative;
  display:flex; flex-direction:column;
  gap:4px;
  min-height:clamp(128px,15vw,152px);
  padding:16px 18px 18px;
  background:var(--paper-2);
  border:1.5px solid var(--ink);
  border-radius:3px;
  box-shadow:var(--shadow);
  color:var(--ink);
  text-decoration:none;
  overflow:hidden;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             background .16s var(--ease), color .16s var(--ease);
}

.target-num{ color:var(--ink-soft); }
.target-glyph{
  width:26px; height:26px;
  margin:auto 0 10px;
  color:var(--loden);
  transition:color .16s var(--ease), transform .3s var(--spring);
}
.target-glyph svg{ width:100%; height:100%; }

.target-label{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(20px,2.3vw,26px);
  line-height:1;
  letter-spacing:-.015em;
}
.target-sub{
  color:var(--ink-soft);
  font-size:11px;
  letter-spacing:.13em;
}

/* armed = the cat is hovering over this one */
.target.armed{
  background:var(--loden);
  color:var(--paper-2);
  transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 var(--ink);
}
.target.armed .target-num,
.target.armed .target-sub{ color:rgba(236,227,208,.72); }
.target.armed .target-glyph{ color:var(--paper-2); transform:scale(1.12) rotate(-5deg); }

/* fired = successfully dropped on */
.target.fired{ animation:stamp .5s var(--spring); }
@keyframes stamp{
  0%  { transform:translate(-3px,-3px); }
  40% { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
  100%{ transform:translate(0,0); box-shadow:var(--shadow); }
}

/* the flash on fire — a rubber stamp, not a neon flash */
.target-state{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:var(--red);
  color:var(--paper-2);
  font-family:var(--mono);
  font-size:14px; letter-spacing:.28em;
  opacity:0; pointer-events:none;
  transition:opacity .14s var(--ease);
}
.target.fired .target-state{ opacity:1; }
.target-state::before{ content:"OPEN"; }
.ca-bar .target-state::before{ content:"COPIED"; }

.target:focus-visible,
.chip:focus-visible,
.mini-btn:focus-visible,
.gen-btn:focus-visible{
  outline:2.5px solid var(--red);
  outline-offset:3px;
}
.gen-input:focus-visible{ outline:none; }

.target.nudge{ animation:nudge .4s ease; }
@keyframes nudge{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-5px,0); }
  75%{ transform:translate(5px,0); }
}

/* ---------------------------------------------------------
   CONTRACT — a specimen label
   --------------------------------------------------------- */
.ca-bar{
  flex-direction:row; align-items:center;
  gap:16px;
  min-height:0;
  margin-top:clamp(12px,1.8vw,18px);
  padding:15px 18px;
  cursor:pointer;
  background:var(--paper-2);
}
.ca-label{ color:var(--loden); flex:none; }
.ca-value{
  font-family:var(--mono);
  font-size:clamp(12px,1.5vw,15px);
  letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1 1 auto; min-width:0;
}
.ca-hint{ color:var(--ink-soft); white-space:nowrap; flex:none; }
.ca-bar.is-empty{ cursor:default; }
.ca-bar.is-empty .ca-value{ color:var(--ink-soft); font-style:italic; }

/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */
.gen, .howto{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(44px,7vw,84px) clamp(16px,4vw,36px);
  border-top:2px solid var(--ink);
}
.section-head{ margin-bottom:clamp(24px,4vw,38px); }
.section-title{
  font-family:var(--serif);
  font-weight:900;
  font-variation-settings:"SOFT" 0, "WONK" 1;
  font-size:clamp(34px,6vw,64px);
  line-height:.95;
  letter-spacing:-.03em;
  margin:0;
}
.section-sub{
  font-family:var(--serif);
  font-style:italic; font-weight:500;
  font-size:clamp(17px,2vw,21px);
  color:var(--ink-soft);
  margin:12px 0 0;
  max-width:36ch;
}

/* ---------------------------------------------------------
   GENERATOR
   --------------------------------------------------------- */
.gen-input-row{
  display:flex; align-items:stretch; gap:0;
  border:1.5px solid var(--ink);
  border-radius:3px;
  background:var(--paper-2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.gen-prefix{
  display:flex; align-items:center;
  padding:0 16px;
  background:var(--loden);
  color:var(--paper-2);
  flex:none;
}
.gen-input{
  flex:1 1 auto; min-width:0;
  background:none; border:0; outline:none;
  color:var(--ink);
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(17px,2.2vw,22px);
  padding:15px 16px;
}
.gen-input::placeholder{ color:var(--ink-soft); opacity:.6; font-style:italic; }

.gen-btn{
  flex:none;
  border:0; border-left:1.5px solid var(--ink);
  background:var(--ink);
  color:var(--paper-2);
  font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:0 clamp(16px,2.4vw,26px);
  cursor:pointer;
  transition:background .16s var(--ease);
}
.gen-btn:hover:not(:disabled){ background:var(--loden); }
.gen-btn:disabled{ opacity:.45; cursor:not-allowed; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{
  border:1px solid var(--hair);
  background:transparent;
  color:var(--ink-soft);
  border-radius:2px;
  padding:6px 12px;
  font-family:var(--sans);
  font-size:13.5px;
  cursor:pointer;
  transition:all .14s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); background:var(--paper-2); }

/* --- output --- */
.gen-stage{
  margin-top:clamp(22px,3.5vw,32px);
  min-height:clamp(300px,40vw,440px);
  display:grid; place-items:center;
  padding:clamp(20px,3vw,32px);
  border:1.5px solid var(--ink);
  border-radius:3px;
  background:
    repeating-linear-gradient(
      45deg, transparent 0 9px, rgba(23,22,18,.028) 9px 10px);
}

.gen-idle{ text-align:center; color:var(--ink-soft); }
.gen-idle-cat{
  width:clamp(120px,20vw,168px);
  margin:0 auto 16px;
  opacity:.4;
  filter:grayscale(.5);
}
.gen-idle p{ margin:0; font-family:var(--serif); font-style:italic; font-size:17px; }

.gen-loading{ text-align:center; }
.loader{
  width:clamp(120px,20vw,160px);
  margin:0 auto 18px;
  animation:tumble 1.6s ease-in-out infinite;
}
@keyframes tumble{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%    { transform:translateY(-14px) rotate(6deg); }
}
.loader-msg{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--loden); margin:0;
}

.gen-result{ margin:0; width:100%; text-align:center; }
.gen-result img{
  width:100%; max-width:560px;
  margin:0 auto;
  border:1.5px solid var(--ink);
  border-radius:2px;
  box-shadow:var(--shadow);
  animation:pop .45s var(--spring);
}
@keyframes pop{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
.gen-result figcaption{
  margin-top:18px;
  font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--ink-soft);
}
.gen-actions{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:18px;
}
.mini-btn{
  border:1.5px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:var(--paper-2);
  padding:10px 20px;
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .14s;
}
.mini-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.mini-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.mini-btn.ghost{ background:transparent; color:var(--ink); }

.gen-error{ text-align:center; max-width:44ch; }
.gen-error-msg{
  color:var(--red); font-size:16px; margin:0 0 18px; line-height:1.5;
}

/* ---------------------------------------------------------
   HOW TO
   --------------------------------------------------------- */
.howto img{
  width:100%;
  border:1.5px solid var(--ink);
  border-radius:3px;
  box-shadow:var(--shadow);
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.footer{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(16px,4vw,36px) clamp(52px,8vw,88px);
  text-align:center;
  border-top:2px solid var(--ink);
}
.footer-cat{ width:56px; margin:0 auto 18px; opacity:.35; }
.footer-line{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,2vw,21px);
  color:var(--ink-soft);
  margin:0 auto; max-width:40ch;
}
.footer-fine{ color:var(--ink-soft); opacity:.65; margin-top:16px; }

/* ---------------------------------------------------------
   TOAST
   --------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:80;
  translate:-50% 14px;
  padding:12px 22px;
  background:var(--ink);
  color:var(--paper-2);
  border-radius:2px;
  box-shadow:var(--shadow);
  font-family:var(--mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), translate .3s var(--spring);
  max-width:calc(100vw - 32px);
  text-align:center;
}
.toast.show{ opacity:1; translate:-50% 0; }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:20px; }
  .hero-copy{ order:1; }
  .stage{ order:2; }
  .perch{ width:min(78%, 320px); }
  .tagline, .instruction{ max-width:none; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  /* three cards in two columns leaves an orphan, so Buy takes the
     full bottom row — it is the call to action anyway */
  .targets{ grid-template-columns:repeat(2,1fr); }
  .target-buy{ grid-column:1 / -1; }
  .target{ min-height:118px; padding:14px 15px 16px; }

  .ca-bar{ flex-wrap:wrap; gap:8px 14px; }
  .ca-value{ flex-basis:100%; white-space:normal; word-break:break-all; }

  .gen-input-row{ flex-wrap:wrap; }
  .gen-prefix{ width:100%; padding:9px 16px; border-bottom:1.5px solid var(--ink); }
  .gen-input{ flex:1 1 60%; }
  .gen-btn{ padding:14px 20px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}