/* Word Woo — legal/support site.
   Aesthetic: "warm letterpress word-game" — cream paper + grain, a characterful
   Fraunces display serif over a clean Hanken Grotesk body, and the Wordle tile
   (green / amber / slate) as the signature motif with an animated flip-in.
   Tasteful warm dark mode follows the system. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* Wordle tile palette */
  --green:#6AAA64;      --green-deep:#4E8C49;
  --amber:#CCA23A;      --amber-deep:#B0862A;
  --slate:#7C7C73;

  --accent:var(--green-deep);

  /* warm paper */
  --paper-top:#FBF4E3;  --paper-bottom:#F2E7CC;
  --surface:#FFFDF6;    --surface-2:#FBF3DF;
  --line:#E7DCC1;       --line-strong:#D8C9A4;
  --ink:#231E15;        --ink-soft:#4C4436;  --ink-dim:#867B64;

  --shadow:0 22px 54px -16px rgba(74,55,18,.26);
  --shadow-sm:0 10px 26px -10px rgba(74,55,18,.20);
  --shadow-tile:0 4px 0 rgba(0,0,0,.10), 0 10px 20px -6px rgba(40,30,8,.30);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --radius:22px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper-top:#1B1812;  --paper-bottom:#141109;
    --surface:#221E16;    --surface-2:#2A251B;
    --line:rgba(255,247,224,.12); --line-strong:rgba(255,247,224,.22);
    --ink:#F3EAD6;        --ink-soft:rgba(243,234,214,.82); --ink-dim:rgba(243,234,214,.55);
    --green-deep:#8CC585; --amber-deep:#E0B752; --accent:#8CC585;
    --shadow:0 26px 60px -18px rgba(0,0,0,.6);
    --shadow-sm:0 12px 28px -10px rgba(0,0,0,.5);
    --shadow-tile:0 4px 0 rgba(0,0,0,.4), 0 12px 22px -6px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  padding-bottom:96px;                 /* room for the keycap tab bar */
  background:
    radial-gradient(90% 55% at 78% -8%, rgba(204,162,58,.16), transparent 60%),
    radial-gradient(85% 50% at 12% 0%, rgba(106,170,100,.16), transparent 58%),
    linear-gradient(178deg, var(--paper-top), var(--paper-bottom));
  background-attachment:fixed;
}
/* paper grain overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

a{color:var(--accent);text-decoration:none;font-weight:600;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 38%,transparent)}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}

/* ---------- Hero ---------- */
.appbar{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(44px,9vw,80px) 20px clamp(26px,5vw,40px);
}
.appbar::after{   /* hairline keyboard ruler under the hero */
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(560px,82%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.tilesrow{
  display:flex;justify-content:center;gap:clamp(7px,1.8vw,11px);
  margin:0 0 clamp(20px,4vw,30px);perspective:700px;
}
.tilesrow .t{
  width:clamp(48px,12vw,68px);aspect-ratio:1;border-radius:13px;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:clamp(24px,6vw,34px);
  color:#fff;line-height:1;
  box-shadow:var(--shadow-tile);
  transform-origin:center;
  animation:tileflip .62s cubic-bezier(.2,.85,.25,1) both;
}
.tilesrow .t::after{   /* glossy top highlight */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 46%);
}
.tilesrow .t{position:relative}
.tilesrow .t.g{background:linear-gradient(168deg,#79B873,var(--green) 55%,var(--green-deep))}
.tilesrow .t.y{background:linear-gradient(168deg,#D8B255,var(--amber) 55%,var(--amber-deep))}
.tilesrow .t.k{background:linear-gradient(168deg,#8E8E84,var(--slate) 60%,#6A6A61)}
.tilesrow .t:nth-child(1){animation-delay:.06s}
.tilesrow .t:nth-child(2){animation-delay:.16s}
.tilesrow .t:nth-child(3){animation-delay:.26s}
.tilesrow .t:nth-child(4){animation-delay:.36s}
.tilesrow .t:nth-child(5){animation-delay:.46s}
@keyframes tileflip{
  0%{transform:rotateX(-92deg) translateY(-8px);opacity:0}
  55%{transform:rotateX(14deg);opacity:1}
  100%{transform:rotateX(0);opacity:1}
}

.appbar h1{
  font-family:var(--display);font-optical-sizing:auto;
  font-weight:900;letter-spacing:-.01em;
  font-size:clamp(34px,9vw,62px);line-height:1.02;
  margin:0 auto;max-width:14ch;color:var(--ink);
  animation:rise .7s .35s both;
}
.appbar h1 .woo{
  color:var(--green-deep);
  font-style:italic;font-weight:700;
}
.appbar .tagline{
  margin:clamp(12px,2.4vw,18px) auto 0;color:var(--ink-dim);
  font-size:clamp(14px,2.4vw,17px);font-weight:500;letter-spacing:.2px;
  animation:rise .7s .46s both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Layout ---------- */
main{max-width:740px;margin:0 auto;padding:clamp(6px,2vw,14px) 20px 48px;
  animation:rise .7s .54s both}
.updated{
  color:var(--green-deep);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;text-align:center;margin:6px 0 22px;
}
.lead{font-family:var(--display);font-weight:500;font-size:clamp(17px,2.6vw,20px);
  line-height:1.5;color:var(--ink-soft)}

h2{
  font-family:var(--display);font-weight:700;font-optical-sizing:auto;
  font-size:clamp(20px,3.4vw,25px);color:var(--ink);
  margin:34px 0 12px;padding-left:34px;position:relative;line-height:1.2;
}
h2::before{  /* a little green tile bullet */
  content:"";position:absolute;left:0;top:.12em;width:22px;height:22px;border-radius:7px;
  background:linear-gradient(168deg,#79B873,var(--green) 55%,var(--green-deep));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), 0 3px 7px -2px rgba(78,140,73,.5);
}
h3{font-size:16px;color:var(--ink);margin:22px 0 6px;font-weight:700;letter-spacing:.1px}
p,li{font-size:15.5px;color:var(--ink-soft)}
li{margin:5px 0}
strong{color:var(--ink);font-weight:700}
ul{padding-left:1.15em}
ul li::marker{color:var(--amber-deep)}

/* ---------- Cards ---------- */
.card{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 100%,transparent),var(--surface));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,3.2vw,28px) clamp(20px,3.4vw,30px);
  margin:18px 0;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.card::before{  /* warm top hairline accent */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--amber) 70%,transparent);
  opacity:.85;
}
.card.tight{padding:16px 18px}
.card h2:first-child,.card h3:first-child{margin-top:0}

/* Tap-cards grid (home) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.tile{
  display:flex;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:20px;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s;
}
.tile:hover{text-decoration:none;transform:translateY(-4px) rotate(-.4deg);
  border-color:var(--green);box-shadow:var(--shadow)}
.tile .ic{flex:0 0 50px;height:50px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(165deg,rgba(106,170,100,.26),rgba(106,170,100,.08));
  color:var(--green-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.tile .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.tile b{display:block;color:var(--ink);font-size:17px;font-family:var(--display);font-weight:700}
.tile span{display:block;color:var(--ink-dim);font-size:13.5px;margin-top:3px;line-height:1.45}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}

/* ---------- Tables ---------- */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14.5px;margin:14px 0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{background:linear-gradient(180deg,rgba(106,170,100,.18),rgba(106,170,100,.10));
  color:var(--ink);font-weight:700;font-family:var(--display)}
tbody tr:nth-child(even) td,tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
code{background:var(--surface-2);border:1px solid var(--line);padding:1px 7px;border-radius:7px;
  font-size:13px;color:var(--green-deep);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Buttons (keycap style) ---------- */
.btn-gold,.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:15px;font-weight:700;border-radius:14px;
  padding:13px 22px;margin:10px 10px 0 0;cursor:pointer;
  transition:transform .12s,filter .18s,box-shadow .18s}
.btn-gold{
  background:linear-gradient(168deg,#7CBB75,var(--green) 52%,var(--green-deep));
  color:#fff;box-shadow:0 4px 0 var(--green-deep),0 14px 26px -8px rgba(78,140,73,.5)}
.btn-gold:hover{text-decoration:none;transform:translateY(-2px);filter:brightness(1.04)}
.btn-gold:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-deep)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);
  box-shadow:0 4px 0 var(--line-strong)}
.btn-ghost:hover{text-decoration:none;transform:translateY(-2px);background:var(--surface-2)}
.btn-ghost:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line-strong)}

/* ---------- Location / contact block ---------- */
.location{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.location .addr .name{font-family:var(--display);color:var(--ink);font-size:17px;font-weight:700}
.location .addr .lines{color:var(--ink-dim);font-size:14px;margin-top:3px}

/* ---------- Footer ---------- */
footer{max-width:740px;margin:0 auto;padding:26px 20px 10px;color:var(--ink-dim);
  font-size:13px;text-align:center}
footer a{color:var(--ink-soft)}

/* ---------- Tab bar (keycaps) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:center;gap:8px;
  padding:9px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  border-top:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);
}
.tabbar a{
  flex:1;max-width:118px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px 7px;border-radius:13px;
  color:var(--ink-dim);font-size:11px;font-weight:700;letter-spacing:.3px;
  border:1px solid transparent;transition:transform .14s,background .14s,color .14s;
}
.tabbar a:hover{text-decoration:none;color:var(--ink);transform:translateY(-2px)}
.tabbar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8}
.tabbar a.active{color:var(--green-deep);background:rgba(106,170,100,.12);
  border-color:color-mix(in srgb,var(--green) 30%,transparent)}

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