/* Classroom hub home ("Goose Helper Notes"). Used by / and /404.html only;
   Lotería and print pages keep using style.css. */

@font-face{font-family:"Chewy";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/chewy-400-latin.woff2") format("woff2")}
@font-face{font-family:"Sniglet";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/sniglet-400-latin.woff2") format("woff2")}
@font-face{font-family:"Sniglet";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/sniglet-800-latin.woff2") format("woff2")}

:root{
  --feather:#FBF9F1;
  --beak:#FF8C2B;
  --teal:#1FA79A;
  --teal-text:#13756C;
  --red:#E63B2E;        /* toadstool caps and art */
  --red-text-bg:#CF3024; /* red behind text: 4.9:1 with feather white */
  --ink:#3B2B5C;
  --pond:#D5F3EE;
  --peach:#FFE2C7;
  --sunbeam:#FFD23F;
  --mint:#BDEBE4;
  --hello:#B53D0B;      /* tangerine, darkened for text on the pond tint */
  --f-display:"Chewy","Comic Sans MS",cursive;
  --f-body:"Sniglet",ui-rounded,"Segoe UI",sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --spring:cubic-bezier(.3,1.8,.5,1);
  color-scheme:light;
}

/* Scale everything up a little on the classroom board. */
html{font-size:clamp(16px, .55vw + 12px, 22px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100vh;overflow-x:hidden;
  background-color:var(--pond);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;line-height:1.5;
  /* soft pond ripples */
  background-image:
    radial-gradient(ellipse 22rem 4.5rem at 12% 22rem, rgba(31,167,154,.16) 0 58%, transparent 60%),
    radial-gradient(ellipse 14rem 3rem at 88% 9rem, transparent 0 52%, rgba(31,167,154,.22) 54% 58%, transparent 60%),
    radial-gradient(ellipse 9rem 2rem at 88% 9rem, transparent 0 50%, rgba(31,167,154,.18) 53% 58%, transparent 61%),
    radial-gradient(ellipse 18rem 3.6rem at 78% 46rem, rgba(31,167,154,.14) 0 58%, transparent 60%),
    radial-gradient(ellipse 16rem 3.4rem at 6% 60rem, transparent 0 52%, rgba(31,167,154,.2) 54% 58%, transparent 60%),
    radial-gradient(ellipse 26rem 5rem at 60% calc(100% - 3rem), rgba(31,167,154,.16) 0 58%, transparent 60%);
  background-repeat:no-repeat;
}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
a{color:inherit}
:focus-visible{outline:4px solid var(--ink);outline-offset:4px;border-radius:10px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:var(--gutter);top:-200px;z-index:20;background:var(--feather);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:.4rem .9rem;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:78rem;margin:0 auto;padding:clamp(1.25rem,3vw,2.5rem) var(--gutter) 2.5rem;padding-right:max(16px, env(safe-area-inset-right, 0px));display:flex;flex-direction:column;gap:clamp(1.25rem,2.4vw,2rem)}

/* ---------- header ---------- */
.hero{display:flex;flex-direction:column;gap:.35rem;max-width:40rem}
.hello{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:var(--hello)}
.name{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:1.02;color:var(--ink)}
.name .wordwob{display:flex;flex-wrap:wrap;gap:0 .28em}
.name .wordwob .join{margin-right:-.28em}
.tagline{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:34ch;margin-top:.25rem}

/* ---------- the yard ---------- */
.yard{position:relative;height:clamp(7rem,9vw,8rem);border-bottom:6px dotted var(--teal);--walker:clamp(6.5rem,8vw,8.5rem)}
.walker{position:absolute;bottom:-4px;left:2%;width:var(--walker);height:calc(var(--walker) * .92);animation:walk 16s linear infinite}
.walker .flip{width:100%;height:100%;animation:flip 16s steps(1) infinite}
.walker .goose{width:100%;height:100%}
.walker .honk{left:60%;top:-22%;background:var(--beak);color:var(--ink);border-color:var(--ink)}
@keyframes walk{0%{left:2%}48%{left:calc(98% - var(--walker))}52%{left:calc(98% - var(--walker))}100%{left:2%}}
@keyframes flip{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.stools{position:absolute;left:44%;bottom:-2px;display:flex;align-items:flex-end;gap:2px}
.stools svg{width:clamp(2rem,3vw,2.6rem);height:clamp(2rem,3vw,2.6rem)}
.stools svg + svg{width:clamp(1.5rem,2.2vw,1.9rem);height:clamp(1.5rem,2.2vw,1.9rem)}
.mini-sun{position:absolute;right:5%;top:2px;width:clamp(3.2rem,4.5vw,4.2rem);height:clamp(3.2rem,4.5vw,4.2rem)}
.mini-sun svg{width:100%;height:100%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bob{animation:bob 1.6s ease-in-out infinite}
.bob + .bob{animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}

/* ---------- shared goose art ---------- */
.goose{display:block;overflow:visible;
  --g-ink:#3B2B5C;--g-body:#FBF9F1;--g-wing:#E8E2D2;--g-beak:#FF8C2B;--g-hat:#E63B2E;--g-spot:#FFFDF5;--g-cheek:#FF6FA5}
.goose .waddle{transform-box:fill-box;transform-origin:50% 100%;animation:waddle .55s ease-in-out infinite alternate}
.goose .head{transform-box:fill-box;transform-origin:20% 90%;animation:honkbob 2.2s ease-in-out infinite}
@keyframes waddle{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes honkbob{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-14deg)}86%{transform:rotate(4deg)}}
.honk{position:absolute;font-family:var(--f-display);font-size:1.15rem;line-height:1.2;border:3px solid;border-radius:20px 20px 20px 4px;padding:1px 10px;transform-origin:0 100%;animation:honk 2.2s ease-in-out infinite;white-space:nowrap}
@keyframes honk{0%,70%,100%{transform:scale(1) rotate(-4deg)}80%{transform:scale(1.25) rotate(6deg)}}
.wordwob > span{display:inline-block;animation:wob 1.8s ease-in-out infinite}
.wordwob > span:nth-child(odd){animation-delay:-.9s}
.wordwob > span:nth-child(3n){animation-delay:-.45s}
@keyframes wob{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-3px)}}

/* ---------- today ---------- */
.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.today > *{min-width:0}
.card{background:var(--feather);border:3px solid var(--ink);border-radius:26px 18px 30px 16px;padding:.85rem 1.1rem 1rem;box-shadow:4px 4px 0 var(--ink)}
.card:nth-child(2){border-radius:18px 30px 16px 26px}
.card.red{background:var(--red-text-bg);color:var(--feather);border-radius:30px 16px 26px 20px;
  background-image:radial-gradient(circle at 90% 22%, rgba(251,249,241,.9) 0 7px, transparent 8px),radial-gradient(circle at 80% 12%, rgba(251,249,241,.9) 0 4px, transparent 5px)}
.k{font-family:var(--f-display);font-size:1.15rem;color:var(--teal-text);letter-spacing:.03em}
.card.red .k{color:var(--feather)}
.v{font-weight:800;font-size:1.25rem;line-height:1.2}
.d{font-size:1rem;line-height:1.4;margin-top:.2rem}

/* ---------- tiles ---------- */
.tiles{list-style:none;margin:0;padding:1.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));gap:2.5rem 1rem}
@media (min-width:700px){.tiles{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:2.75rem 1.25rem}}
.tiles > li{position:relative;min-width:0;display:flex}
.tiles > li:hover,.tiles > li:focus-within,.tiles > li.honking{z-index:2}
.tiles > li.wide{grid-column:span 2}
.tile{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;width:100%;padding:1rem 1rem 1.1rem;
  border:3px solid var(--ink);border-radius:30px 20px 28px 18px/20px 28px 18px 30px;box-shadow:4px 4px 0 var(--ink);
  background:var(--feather);color:var(--ink);transition:transform .25s var(--spring)}
.tiles > li:nth-child(even) .tile{border-radius:20px 30px 18px 28px/28px 20px 30px 18px}
.tile:hover,.tile:focus-within,li.honking .tile{transform:rotate(1.5deg) scale(1.03)}
.tiles > li:nth-child(even) .tile:hover,.tiles > li:nth-child(even) .tile:focus-within,.tiles > li:nth-child(even).honking .tile{transform:rotate(-1.5deg) scale(1.03)}
.tile.peach{background:var(--peach)}
.tile.mint{background:var(--mint)}
.tile.red{background:var(--red-text-bg);color:var(--feather);
  background-image:radial-gradient(circle at 88% 80%, #FBF9F1 0 9px, transparent 10px),radial-gradient(circle at 77% 93%, #FBF9F1 0 5px, transparent 6px),radial-gradient(circle at 95% 62%, #FBF9F1 0 4px, transparent 5px)}
.tile-ic{width:2.6rem;height:2.6rem;display:block;flex:none;color:var(--ink);--ic2:var(--beak)}
.tile.red .tile-ic{color:var(--feather);--ic2:var(--sunbeam)}
.tile .t{font-family:var(--f-display);font-size:1.4rem;line-height:1.1}
.tile .s{font-size:1rem;line-height:1.35}
.tile .row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:auto;padding-top:.35rem}
.tag{display:inline-block;font-family:var(--f-display);font-size:1rem;letter-spacing:.04em;line-height:1.3;border-radius:999px;padding:.12rem .75rem;background:var(--ink);color:var(--feather)}
.tag.soon{background:var(--feather);color:var(--ink);border:2px solid var(--ink)}
.tile.peach .tag.soon,.tile.mint .tag.soon{background:var(--feather)}
/* Live tiles: the title link stretches over the whole tile; extra links sit on top. */
.tile-main{text-decoration:none;color:inherit;border-radius:4px}
.tile-main::after{content:"";position:absolute;inset:-3px;z-index:1;border-radius:30px 20px 28px 18px/20px 28px 18px 30px}
.tile-main:focus-visible{outline:none}
.tile-main:focus-visible::after{outline:4px solid var(--ink);outline-offset:5px}
.tile-main:hover .t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.also{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:2.4rem;padding:.25rem .9rem;border:3px solid var(--ink);border-radius:999px;background:var(--feather);color:var(--ink);font-family:var(--f-display);font-size:1.05rem;letter-spacing:.02em;text-decoration:none;box-shadow:2px 2px 0 var(--ink)}
.also:hover{background:var(--sunbeam)}
.also:focus-visible{outline-offset:3px}

/* goose-head helper peeking from behind each tile */
.peek{position:absolute;right:1rem;top:-2.35rem;width:3.6rem;height:3.35rem;z-index:0;transform:translateY(2px);transition:transform .3s var(--spring);pointer-events:none}
.peek svg{width:100%;height:100%}
.peek .honk{right:2.8rem;top:-.4rem;font-size:1rem;background:var(--sunbeam);color:var(--ink);border-color:var(--ink);opacity:0;animation:none;transform:scale(.6);transition:opacity .2s ease,transform .25s var(--spring)}
.tiles > li:hover .peek,.tiles > li:focus-within .peek,.tiles > li.honking .peek{transform:translateY(-1rem) rotate(-6deg)}
.tiles > li:hover .peek .honk,.tiles > li:focus-within .peek .honk,.tiles > li.honking .peek .honk{opacity:1;transform:scale(1) rotate(-4deg)}

.note{font-size:.95rem;max-width:60ch}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center;justify-content:space-between;padding-top:1.25rem;border-top:3px dotted var(--teal);font-size:.95rem}
.foot a{font-family:var(--f-display);font-size:1.1rem;letter-spacing:.02em}

/* ---------- 404 ---------- */
.lost{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:40rem}
.lost .home-btn{display:inline-flex;align-items:center;min-height:3rem;padding:.4rem 1.3rem;border:3px solid var(--ink);border-radius:999px;background:var(--red-text-bg);color:var(--feather);font-family:var(--f-display);font-size:1.3rem;letter-spacing:.02em;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.lost .home-btn:hover{transform:rotate(-1.5deg) scale(1.03)}

@media (max-width:560px){
  .yard{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .tiles > li.wide{grid-column:1 / -1}
  .peek{right:.75rem}
  .peek .honk{right:auto;left:-2.9rem;top:.6rem}
}

/* Reduced motion: everything rests. Helpers keep their peeking pose; bubbles just appear on hover or focus. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .walker{left:14%}
  .tile:hover,.tile:focus-within,li.honking .tile,
  .tiles > li:nth-child(even) .tile:hover,.tiles > li:nth-child(even) .tile:focus-within,.tiles > li:nth-child(even).honking .tile{transform:none}
  .tiles > li:hover .peek,.tiles > li:focus-within .peek,.tiles > li.honking .peek{transform:translateY(2px)}
  .tiles > li:hover .peek .honk,.tiles > li:focus-within .peek .honk,.tiles > li.honking .peek .honk{transform:rotate(-4deg)}
  .lost .home-btn:hover{transform:none}
}
#tools:focus{outline:none}