/* Tin Whistle Games studio page (2026-10-10). Pressed-tin world: a stamped tin ceiling tile ground,
   ink stamped into it, and Sheep Tag's own gold-and-soil palette set in as an enamel plate.
   Tokens are documented in ../DESIGN.md. */

@font-face{
  font-family:"Big Shoulders Display";
  src:url("/fonts/big-shoulders-display-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

:root{
  --tin:#cdd2cd; --tin-hi:#f2f4f1; --tin-lo:#8d958f;
  --ink:#1f2622; --ink-2:#3a443f;
  --soil:#22170f; --cream:#f4efe6; --gold:#f6c343; --gold-hover:#ffd35c; --gold-deep:#e0a62a;
  --display:"Big Shoulders Display","Arial Narrow",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:14px;
  --z-tin:0; --z-page:1;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--tin-lo) var(--tin)}
body{
  margin:0; min-height:100dvh; background:var(--tin); color:var(--ink);
  font:1.0625rem/1.6 var(--body); caret-color:var(--ink);
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
::selection{background:var(--gold);color:var(--soil)}
a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

/* The pressed-tin ground: one 88px tile, each line drawn twice (light up-left, shadow down-right) so it reads embossed. */
.tin{
  position:fixed; inset:0; z-index:var(--z-tin); pointer-events:none; overflow:hidden;
  background-color:var(--tin);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cdefs%3E%3Cg id='t' fill='none' stroke-width='1.2'%3E%3Crect x='5' y='5' width='78' height='78' rx='3'/%3E%3Ccircle cx='44' cy='44' r='16'/%3E%3Ccircle cx='44' cy='44' r='5'/%3E%3Cpath d='M44 28 Q52 36 44 44 Q36 36 44 28Z M60 44 Q52 52 44 44 Q52 36 60 44Z M44 60 Q36 52 44 44 Q52 52 44 60Z M28 44 Q36 36 44 44 Q36 52 28 44Z'/%3E%3Cpath d='M5 19 A14 14 0 0 0 19 5 M69 5 A14 14 0 0 0 83 19 M83 69 A14 14 0 0 0 69 83 M19 83 A14 14 0 0 0 5 69'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' stroke='%23e3e7e2' transform='translate(-0.8 -0.8)'/%3E%3Cuse href='%23t' stroke='%23a6aea8' transform='translate(0.8 0.8)'/%3E%3C/svg%3E");
  background-size:104px 104px;
}
/* The one authored moment: light catches the tin once as the page opens. */
.tin::after{
  content:""; position:absolute; inset:-20% -60%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-70%); opacity:0;
  animation:glint 1.8s var(--ease-out) .25s 1 both;
}
@keyframes glint{
  0%{transform:translateX(-70%);opacity:0}
  15%{opacity:1}
  100%{transform:translateX(70%);opacity:0}
}

.page{
  position:relative; z-index:var(--z-page);
  max-width:68rem; margin:0 auto; min-height:100dvh;
  padding-block:clamp(48px,10vh,112px) 40px; padding-inline:clamp(16px,5vw,56px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas:"mast plate" "contact plate" "foot foot";
  grid-template-rows:auto 1fr auto;
  column-gap:clamp(32px,6vw,88px); row-gap:40px; align-items:start;
}

.mast{grid-area:mast}
/* The mark (brand/logo/final), stamped into the tin like the wordmark below it. */
.logo{
  --logo:clamp(64px,8vw,96px);
  /* The viewBox has 12.5% air on the left; pull it back so the head lines up with the wordmark. */
  display:block; width:var(--logo); height:auto; margin:0 0 20px calc(var(--logo) * -.125); color:var(--ink);
  filter:drop-shadow(0 1.5px 0 var(--tin-hi)) drop-shadow(0 -1px 0 rgba(31,38,34,.35));
}
.mark{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(3.4rem,10vw,7.25rem); line-height:.86; letter-spacing:-0.01em;
  margin:0; color:var(--ink); text-wrap:balance;
  /* Stamped into the tin: a light edge below, a shadow edge above. */
  text-shadow:0 1.5px 0 var(--tin-hi),0 -1px 0 rgba(31,38,34,.35);
}
.mark span{display:block;color:var(--ink-2)}
.lede{margin:28px 0 0;max-width:34ch;font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink);font-weight:500}

/* Sheep Tag set into the tin like an enamel badge, in the game's own colors. */
.plate{
  grid-area:plate; align-self:center;
  background:var(--soil); color:var(--cream); border-radius:var(--r);
  padding:clamp(28px,4vw,44px);
  box-shadow:0 2px 0 var(--tin-hi),0 18px 40px -18px rgba(31,38,34,.55),inset 0 1px 0 rgba(246,195,67,.18);
}
.plate h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.1rem,4.2vw,3rem); line-height:.95; letter-spacing:0; margin:0 0 16px; color:var(--gold);
  text-wrap:balance;
}
.plate p{margin:0 0 28px;max-width:42ch;color:var(--cream)}
.play{
  display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:10px;
  background:var(--gold); color:var(--soil); font-weight:700; text-decoration:none;
  box-shadow:0 3px 0 var(--gold-deep);
  transition:background-color .15s var(--ease-out),transform .15s var(--ease-out),box-shadow .15s var(--ease-out);
}
.play:hover{background:var(--gold-hover)}
.play:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-deep)}
.play:focus-visible{outline-color:var(--gold);outline-offset:4px}

.contact{grid-area:contact}
.contact h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.6rem;letter-spacing:.01em;margin:0 0 6px}
.contact p{margin:0;color:var(--ink)}
.contact a{font-weight:600;overflow-wrap:anywhere}

.foot{grid-area:foot;border-top:1.5px solid var(--tin-lo);padding-top:16px;box-shadow:0 -1px 0 var(--tin-hi) inset}
.foot p{margin:0;font-size:.95rem;color:var(--ink-2)}

@media (max-width:767px){
  .page{grid-template-columns:1fr;grid-template-areas:"mast" "plate" "contact" "foot";grid-template-rows:auto;row-gap:36px}
  .plate{align-self:start}
}
@media (prefers-reduced-motion:reduce){
  .tin::after{animation:none}
  .play{transition:none}
}