@font-face{
  font-family:"Gabarito";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("fonts/gabarito-latin.woff2") format("woff2");
}

:root{
  --page:#eeede8;
  --glaze:#f8f7f3;
  --grout:#d3d0c6;
  --cobalt:#1f45a1;
  --ink:#13224a;
  --muted:#4b5677;
  --ochre:#dc9a2f;
  --display:"Gabarito", ui-rounded, system-ui, sans-serif;
  --text:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter:clamp(16px, 4vw, 48px);
  --gap:3px;
  --max:1280px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0b1430; --glaze:#14244c; --grout:#070d22; --cobalt:#86a6f2; --ink:#e9eefb; --muted:#a8b4d8; --ochre:#f0b459;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#0b1430; --glaze:#14244c; --grout:#070d22; --cobalt:#86a6f2; --ink:#e9eefb; --muted:#a8b4d8; --ochre:#f0b459;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:4px}

/* ---------- The wall ---------- */
.frame{width:min(var(--max), 100% - 2 * var(--gutter));margin:var(--gutter) auto 0;container-type:inline-size}
.wall{
  --cols:4;
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows:calc((100cqi - (var(--cols) + 1) * var(--gap)) / var(--cols));
  grid-auto-flow:dense;
  gap:var(--gap);
  padding:var(--gap);
  background:var(--grout);
  border-radius:6px;
  touch-action:manipulation;
}
@media (min-width:700px){.wall{--cols:6}}
@media (min-width:1100px){.wall{--cols:8}}

/* Without JavaScript the wall still has its plaque, its apps and a quiet tile pattern. */
html:not(.js) .wall{
  background-color:var(--glaze);
  background-image:radial-gradient(circle at 0 0, var(--cobalt) 70.5%, transparent 71%);
  background-size:calc((100cqi - var(--gap)) / var(--cols)) calc((100cqi - var(--gap)) / var(--cols));
  background-position:var(--gap) var(--gap);
}

.tile{position:relative;border-radius:2px;background:var(--glaze);color:var(--cobalt);overflow:hidden;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .05)}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg, rgb(255 255 255 / .16), transparent 38%)}
.tile svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;
  transform:rotate(calc(var(--k, 0) * 90deg));
  transition:transform .55s cubic-bezier(.3,1.45,.55,1)}
.tile.inverse{background:var(--cobalt);color:var(--glaze)}
.tile.warm{color:var(--ochre)}
.decor{cursor:pointer}
.decor.pre{background:var(--grout)}
.decor.pre svg{transform:rotate(calc(var(--k, 0) * 90deg - 90deg)) scale(.4);opacity:0}
.decor.in{transition:background-color .3s ease var(--d, 0ms)}
.decor.in svg{transition:transform .6s cubic-bezier(.3,1.45,.55,1) var(--d, 0ms), opacity .25s ease var(--d, 0ms)}

/* ---------- Name plaque ---------- */
.plaque{
  --frame:clamp(7px, 1.6cqi, 12px);
  container-type:inline-size;
  grid-column:1 / -1;grid-row:span 3;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px, 6.5cqi, 54px);
  background:var(--glaze);color:var(--ink);
  box-shadow:
    inset 0 0 0 var(--frame) var(--glaze),
    inset 0 0 0 calc(var(--frame) + 2px) var(--cobalt),
    inset 0 0 0 calc(var(--frame) + 6px) var(--glaze),
    inset 0 0 0 calc(var(--frame) + 7px) var(--cobalt);
}
@media (min-width:700px){.plaque{grid-column:span 4}}
.plaque::after{background:none}
.plaque .corner{position:absolute;width:clamp(16px, 4cqi, 30px);height:clamp(16px, 4cqi, 30px);color:var(--cobalt)}
.plaque .corner svg{position:static;width:100%;height:100%;transform:none}
.plaque .c1{top:var(--frame);left:var(--frame)}
.plaque .c2{top:var(--frame);right:var(--frame);transform:rotate(90deg)}
.plaque .c3{bottom:var(--frame);right:var(--frame);transform:rotate(180deg)}
.plaque .c4{bottom:var(--frame);left:var(--frame);transform:rotate(270deg)}
.wordmark{font-family:var(--display);font-weight:850;font-size:clamp(64px, 40cqi, 290px);line-height:.8;letter-spacing:-.055em;color:var(--cobalt);margin:0 0 .12em -.04em}
.entry{margin:0;font-size:clamp(14px, 2.9cqi, 19px);color:var(--muted)}
.entry .pron{font-family:var(--display);font-weight:500;color:var(--cobalt);margin-right:.5em}
.lede{margin:.35em 0 0;font-family:var(--display);font-weight:600;font-size:clamp(19px, 4.6cqi, 34px);line-height:1.12;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}

/* ---------- App tiles ---------- */
.app{
  container-type:inline-size;
  grid-column:span 3;grid-row:span 3;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px, 8cqi, 26px);
  background:var(--app-bg);color:var(--app-ink);text-decoration:none;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s;
  z-index:1;
}
@media (min-width:700px){.app{grid-column:span 2;grid-row:span 2}}
.app::after{background:linear-gradient(155deg, rgb(255 255 255 / .18), transparent 40%)}
.app:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 14px 22px -10px rgb(10 20 50 / .45)}
.app:active{transform:translateY(-1px);transition-duration:.08s}
.app:focus-visible{outline-offset:4px}
.app-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.app-mark{width:clamp(48px, 30cqi, 112px);height:auto;margin:-4% 0 0 -5%}
.app-kind{font-size:clamp(11px, 4.2cqi, 13px);font-weight:600;text-align:right;line-height:1.3;opacity:.82;max-width:12ch}
.app-name{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px, 13cqi, 42px);line-height:.95;letter-spacing:-.035em}
.app-line{display:block;margin-top:.45em;font-size:clamp(13px, 5.4cqi, 16px);line-height:1.35;max-width:24ch}
.app-status{display:inline-flex;align-items:center;gap:.5em;margin-top:.9em;font-size:clamp(11px, 4.4cqi, 13px);font-weight:650}
.app-status::before{content:"";width:.6em;height:.6em;border-radius:50%;background:currentColor;box-shadow:0 0 0 .22em rgb(255 255 255 / .35)}

/* ---------- Under the wall ---------- */
.underwall{width:min(var(--max), 100% - 2 * var(--gutter));margin:14px auto 0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.underwall p{margin:0;max-width:62ch;font-size:14px;color:var(--muted)}
.shuffle{
  appearance:none;border:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;gap:10px;
  font:600 15px/1 var(--display);letter-spacing:-.01em;
  color:var(--glaze);background:var(--cobalt);
  padding:13px 18px 13px 14px;border-radius:999px;
  box-shadow:0 3px 0 color-mix(in srgb, var(--cobalt) 60%, #000);
  transition:transform .15s, box-shadow .15s;
}
.shuffle:hover{transform:translateY(-1px);box-shadow:0 4px 0 color-mix(in srgb, var(--cobalt) 60%, #000)}
.shuffle:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb, var(--cobalt) 60%, #000)}
.shuffle svg{width:20px;height:20px;fill:currentColor;transition:transform .5s cubic-bezier(.3,1.45,.55,1)}
.shuffle:active svg{transform:rotate(90deg)}
html:not(.js) .shuffle, html:not(.js) .js-only{display:none}

/* ---------- About ---------- */
.about{width:min(var(--max), 100% - 2 * var(--gutter));margin:clamp(72px, 11vw, 140px) auto 0;display:grid;grid-template-columns:1fr;gap:36px;scroll-margin-top:24px}
.about h2{margin:0;font-family:var(--display);font-weight:750;font-size:clamp(36px, 6vw, 72px);line-height:.98;letter-spacing:-.045em;max-width:13ch;text-wrap:balance}
.about-body > p{margin:0 0 28px;max-width:52ch;color:var(--muted);font-size:18px}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--grout);border:2px solid var(--grout);border-radius:6px;overflow:hidden}
.rules li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:18px 20px 18px 18px;background:var(--glaze)}
.rules .mini{position:relative;width:52px;height:52px;border-radius:2px;background:var(--glaze);color:var(--cobalt);box-shadow:0 0 0 1px var(--grout)}
.rules .mini svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.rules strong{display:block;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.2}
.rules span{display:block;margin-top:3px;font-size:15px;color:var(--muted);max-width:46ch}
@media (min-width:900px){.about{grid-template-columns:5fr 6fr;gap:64px}}

/* ---------- Footer ---------- */
.footer{width:min(var(--max), 100% - 2 * var(--gutter));margin:clamp(72px, 10vw, 120px) auto 0;padding:24px 0 calc(28px + env(safe-area-inset-bottom));border-top:2px solid var(--grout);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;font-size:14px;color:var(--muted)}
.footer .mini-word{font-family:var(--display);font-weight:850;font-size:26px;letter-spacing:-.05em;color:var(--cobalt);text-decoration:none}
.footer nav{display:flex;gap:22px;flex-wrap:wrap}
.footer nav a{text-decoration:none;padding:6px 0}
.footer nav a:hover{text-decoration:underline;text-underline-offset:4px}
.footer .legal{flex-basis:100%;margin:6px 0 0;font-size:12px;line-height:1.5}

/* ---------- Policy pages ---------- */
.policy-top{width:min(var(--max), 100% - 2 * var(--gutter));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:2px solid var(--grout)}
.policy-top .mini-word{font-family:var(--display);font-weight:850;font-size:30px;line-height:1;letter-spacing:-.05em;color:var(--cobalt);text-decoration:none}
.policy-top nav{display:flex;gap:20px;font-size:15px}
.policy-top nav a{text-decoration:none;padding:8px 0}
.policy-top nav a:hover{text-decoration:underline;text-underline-offset:4px}
.policy{width:min(var(--max), 100% - 2 * var(--gutter));margin:0 auto}
.policy-hero{padding:clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);border-bottom:2px solid var(--grout)}
.policy-strip{display:flex;gap:var(--gap);margin-bottom:28px}
.policy-strip span{position:relative;width:clamp(30px, 4vw, 44px);aspect-ratio:1;background:var(--glaze);color:var(--cobalt);border-radius:2px;box-shadow:0 0 0 1px var(--grout)}
.policy-strip span.inverse{background:var(--cobalt);color:var(--glaze)}
.policy-strip svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.policy-hero h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(44px, 8vw, 104px);line-height:.92;letter-spacing:-.05em;color:var(--cobalt)}
.policy-meta{margin:18px 0 0;font-size:15px;color:var(--muted)}
.policy-intro{margin:14px 0 0;max-width:56ch;font-size:clamp(18px, 2vw, 21px);line-height:1.5}
.policy-grid{display:grid;gap:32px;padding-top:clamp(28px, 4vw, 48px)}
.toc-title{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:15px}
.toc ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.35}
.toc a{display:block;padding:6px 0;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:599px){.toc a{padding:4px 0}}
@media (min-width:600px) and (max-width:999px){.toc ul{columns:2;column-gap:28px}}
@media (min-width:1000px){
  .policy-grid{grid-template-columns:230px minmax(0, 1fr);gap:64px}
  .toc{position:sticky;top:24px;align-self:start;max-height:calc(100svh - 48px);overflow:auto}
}
.policy-body{max-width:70ch}
.policy-body section{padding-bottom:clamp(28px, 4vw, 44px);scroll-margin-top:24px}
.policy-body section + section{border-top:2px solid var(--grout);padding-top:clamp(28px, 4vw, 44px)}
.policy-body h2{margin:0 0 14px;font-family:var(--display);font-weight:750;font-size:clamp(28px, 3.4vw, 40px);line-height:1.05;letter-spacing:-.035em}
.policy-body h3{margin:30px 0 8px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;scroll-margin-top:24px}
.policy-body p, .policy-body li{font-size:17px;line-height:1.65}
.policy-body p{margin:0 0 14px}
.policy-body ul:not(.rules){margin:0 0 14px;padding-left:1.2em}
.policy-body ul:not(.rules) li{margin-bottom:8px}
.policy-body ul:not(.rules) li::marker{color:var(--cobalt)}
.policy-body a{color:var(--cobalt);text-underline-offset:3px}
.policy-body .rules{margin-top:6px}
.law{margin:8px 0 0;display:grid;gap:2px;background:var(--grout);border:2px solid var(--grout);border-radius:6px;overflow:hidden}
.law div{background:var(--glaze);padding:18px 20px}
.law dt{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;line-height:1.25}
.law dd{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.6}

/* ---------- Not found ---------- */
.lost{min-height:100svh;display:grid;place-items:center;padding:var(--gutter)}
.lost .plaque{width:min(640px, 100%);min-height:min(440px, 56svh);grid-column:auto;grid-row:auto}
.lost .wordmark{font-size:clamp(56px, 22cqi, 140px);margin-bottom:.18em}
.lost a.home{display:inline-flex;margin-top:1.2em;align-self:flex-start;font:600 15px/1 var(--display);color:var(--glaze);background:var(--cobalt);padding:13px 18px;border-radius:999px;text-decoration:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .shuffle,.underwall{display:none}
  .app:hover{transform:none;box-shadow:none}
}