/* ---------------------------------------------------------------- tokens
   Palette is the actual in-game rank ladder from LuckPerms prefixes, so the
   site, the chat and the store all agree. It is a WOOD palette, so the page
   is built out of wood rather than grey with a warm accent.               */
:root{
  --bark:#150e07; --walnut:#241708; --timber:#38210f; --timber-lit:#4a2c14;
  --seam:#0d0805; --cream:#f6ecda; --cream-dim:#bda684;
  --amber:#e8a94f; --ember:#c9762a; --ok:#7fd46a;
  --oak:#B8945F; --birch:#D7C185; --acacia:#BA6337;
  /* not a rank colour: the sawn face of a nav key, mixed between oak and
     birch. Oak alone is too dark once grain lines cross the label. */
  --plank:#c6a272; --plank-lit:#d3b183;
  --cherry:#E0A7A0; --crimson:#8A3A5C; --warped:#3A8E87;
  --max:1080px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--cream);font-family:var(--sans);font-size:16.5px;line-height:1.55;background:var(--bark);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.05;font-weight:800;letter-spacing:-.015em}
p{margin:0}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* wood: procedural grain (inline SVG turbulence, no image request) plus board
   seams at deliberately UNEVEN intervals, because evenly spaced boards are
   exactly what makes fake wood look fake. */
.wood{position:relative;background:var(--timber);isolation:isolate}
.wood::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.7' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='200' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:600px 200px;mix-blend-mode:overlay;opacity:.5;
}
.wood::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0 131px, rgba(255,225,180,.05) 131px 132px, var(--seam) 132px 134px,
    transparent 134px 318px, rgba(255,225,180,.05) 318px 319px, var(--seam) 319px 321px,
    transparent 321px 517px);
}
.burn{text-shadow:0 1px 0 rgba(255,214,158,.13),0 -1px 0 rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.45)}

/* ---------------------------------------------------------------- nav
   The links are cut lumber, not text. Three columns (brand / links / empty)
   so the group sits dead centre while the brand stays pinned left, and every
   link is a sawn offcut of --oak: light face, grain lines running the length
   of it, and a hard unblurred --timber-lit edge underneath, which is the cut
   end you would see if a board this thick sat on the bar. Discord stays
   amber: five identical keys would bury the one action worth taking.

   Light face means the label has to go dark. Cream on the plank is 2.0:1 and
   unreadable. --walnut is 7.3:1 on bare face, 5.8:1 where a grain line runs
   under the glyph, and 4.8:1 on the darkest pixel the turbulence can produce
   under that same line, so it clears AA at every point on the board rather
   than on average. Plain --oak measures 3.9:1 at that worst pixel, which is
   why the face is mixed lighter instead. */
nav{position:sticky;top:0;z-index:50;border-bottom:3px solid var(--seam)}
nav::before{opacity:.35}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;height:58px}
/* the wordmark is an SVG of stroked paths, not text, so it renders identically
   with no font loaded. 592x100 intrinsic, shown at 36px tall to sit level with
   the 44px keys. Every reference server ships a graphical mark here. */
.brand{grid-column:1;justify-self:start;display:flex;align-items:center}
.brand img{display:block;height:36px;width:auto}
@media(max-width:420px){.brand img{height:27px}}
.nav-links{grid-column:2;justify-self:center;display:flex;align-items:center;gap:8px}
.nav-links a{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 15px;border-radius:2px;
  color:var(--walnut);font-size:13.5px;font-weight:700;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,248,228,.28);
  background:var(--plank);
  box-shadow:inset 0 2px 0 rgba(255,248,228,.38),inset 0 -3px 0 rgba(74,44,20,.5),
             inset 0 0 0 1px rgba(74,44,20,.28),0 4px 0 var(--timber-lit);
  transition:transform .07s,box-shadow .07s;
}
/* two layers, same as .wood itself: turbulence for the mottle, then the
   grain lines on top of it. The line stops are deliberately uneven, because
   evenly spaced lines are a barcode, and the 47px cycle is longer than the
   44px key so no key ever shows the loop. Turbulence is held at .22: any
   heavier and its dark lobes drag the label under 4.5:1. */
.nav-links a::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:overlay;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='140'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.75' numOctaves='3' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='140' filter='url(%23g3)' opacity='0.55'/%3E%3C/svg%3E");
}
.nav-links a::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,
    rgba(74,44,20,0) 0 6px, rgba(74,44,20,.14) 6px 7px,
    rgba(74,44,20,0) 7px 16px, rgba(255,248,228,.12) 16px 17px,
    rgba(74,44,20,0) 17px 24px, rgba(74,44,20,.09) 24px 25px,
    rgba(74,44,20,0) 25px 32px, rgba(74,44,20,.16) 32px 34px,
    rgba(74,44,20,0) 34px 47px);
}
/* every key is cut from a different part of the board */
.nav-links a:nth-child(2)::after{background-position-y:-9px}
.nav-links a:nth-child(3)::after{background-position-y:-21px}
.nav-links a:nth-child(4)::after{background-position-y:-14px}
.nav-links a:nth-child(5)::after{background-position-y:-31px}
.nav-links a:hover{
  color:var(--walnut);text-decoration:none;transform:translateY(-2px);background:var(--plank-lit);
  box-shadow:inset 0 2px 0 rgba(255,248,228,.45),inset 0 -3px 0 rgba(74,44,20,.5),
             inset 0 0 0 1px rgba(74,44,20,.28),0 6px 0 var(--timber-lit);
}
.nav-links a:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,248,228,.3),inset 0 -3px 0 rgba(74,44,20,.5),
             inset 0 0 0 1px rgba(74,44,20,.28),0 1px 0 var(--timber-lit);
}
/* painted, not sawn: the amber key keeps the shape and the travel but drops
   the grain lines, so the one call to action still reads as different stock */
.nav-links a.discord{
  background:var(--amber);color:#2a1806;font-weight:800;
  box-shadow:inset 0 2px 0 rgba(255,241,206,.55),inset 0 -3px 0 rgba(120,76,18,.34),
             inset 0 0 0 1px rgba(120,76,18,.3),0 4px 0 #8a5c1c;
}
.nav-links a.discord::before{opacity:.14}
.nav-links a.discord::after{display:none}
.nav-links a.discord:hover{
  background:#f4bd67;
  box-shadow:inset 0 2px 0 rgba(255,241,206,.6),inset 0 -3px 0 rgba(120,76,18,.34),
             inset 0 0 0 1px rgba(120,76,18,.3),0 6px 0 #8a5c1c;
}
.nav-links a.discord:active{
  box-shadow:inset 0 2px 0 rgba(255,241,206,.45),inset 0 -3px 0 rgba(120,76,18,.34),
             inset 0 0 0 1px rgba(120,76,18,.3),0 1px 0 #8a5c1c;
}
/* between 640 and 900 the row is real estate limited, so the keys get
   narrower rather than colliding with the brand */
@media(max-width:900px){
  .nav-links{gap:6px}
  .nav-links a{padding:0 11px;font-size:13px}
}

/* ---------------------------------------------------------------- hero
   One screen, centred, ONE dominant action. Everything that used to be a
   full-width slab below this is now a tile in the grid, so the page reads as
   a place with things in it rather than a ribbon you scroll until it stops. */
.hero{padding:74px 0 66px;text-align:center}
h1{font-size:clamp(2.2rem,6.6vw,3.7rem);text-transform:uppercase;letter-spacing:-.02em;margin:0 auto;max-width:16ch}
h1 em{font-style:normal;color:var(--amber);display:block}
.sub{color:var(--cream-dim);font-size:clamp(.98rem,2.3vw,1.12rem);margin:18px auto 0;max-width:46ch}

.primary{
  display:block;width:100%;max-width:520px;margin:34px auto 0;
  appearance:none;border:0;cursor:pointer;font:inherit;color:var(--cream);text-align:center;
  position:relative;isolation:isolate;overflow:hidden;border-radius:4px;
  background:var(--timber-lit);padding:20px 22px 17px;
  box-shadow:inset 0 2px 0 rgba(255,224,176,.18),inset 0 -3px 0 rgba(0,0,0,.42),
             0 6px 0 #170d05,0 8px 18px rgba(0,0,0,.5);
  transition:transform .07s,box-shadow .07s;
}
.primary::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='140'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.75' numOctaves='3' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='140' filter='url(%23g2)' opacity='0.55'/%3E%3C/svg%3E");
}
.primary:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,224,176,.22),inset 0 -3px 0 rgba(0,0,0,.42),0 8px 0 #170d05,0 11px 22px rgba(0,0,0,.55)}
.primary:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,224,176,.14),inset 0 -3px 0 rgba(0,0,0,.42),0 2px 0 #170d05,0 3px 9px rgba(0,0,0,.45)}
.primary.done{box-shadow:inset 0 2px 0 rgba(255,224,176,.18),inset 0 -3px 0 rgba(0,0,0,.42),0 6px 0 #1d3d16,0 8px 18px rgba(0,0,0,.5)}
.p-addr{font-family:var(--mono);font-size:clamp(1.15rem,4vw,1.6rem);color:#fff8ec;font-weight:600;word-break:break-all}
.p-hint{margin-top:9px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.primary.done .p-hint{color:var(--ok)}

/* Bedrock stays a REAL button, just visually secondary. Demoting it to plain
   text is how crossplay servers lose their mobile players. */
.secondary{
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:14px auto 0;appearance:none;border:0;cursor:pointer;font:inherit;
  background:rgba(0,0,0,.26);color:var(--cream-dim);border-radius:3px;padding:10px 16px;
  box-shadow:inset 0 0 0 2px rgba(255,220,170,.14);transition:box-shadow .12s;
}
.secondary:hover{box-shadow:inset 0 0 0 2px var(--birch)}
.secondary.done{box-shadow:inset 0 0 0 2px var(--ok)}
.s-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--birch)}
.s-addr{font-family:var(--mono);font-size:.95rem;color:#fff8ec;user-select:text}
.s-hint{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.secondary.done .s-hint{color:var(--ok)}

/* fails closed: hidden unless a real count above zero arrives. OPBlocks,
   JartexNetwork and ManaCube all ship a hero reading "0 Players Online". */
#count{margin-top:20px;font-size:14px;color:var(--cream-dim);min-height:21px}
#count[hidden]{display:none}
#count b{color:var(--cream);font-weight:800}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:9px;vertical-align:middle;box-shadow:0 0 8px rgba(127,212,106,.7)}

/* ---------------------------------------------------------------- tiles */
.board-area{background:var(--bark);padding:38px 0 54px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tiles{grid-template-columns:1fr}}
.tile{
  background:var(--timber);border-radius:4px;padding:20px;position:relative;overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(255,224,176,.1),inset 0 -3px 0 rgba(0,0,0,.38),0 4px 0 #100a04;
}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--edge,var(--oak))}
.tile.wide{grid-column:span 2}
@media(max-width:620px){.tile.wide{grid-column:span 1}}
.t-kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--ember);margin-bottom:7px}
.tile h3{font-size:1.06rem;margin-bottom:9px}
.tile p{color:var(--cream-dim);font-size:14.5px}
.tile ol{margin:0;padding-left:19px;color:var(--cream-dim);font-size:14px}
.tile ol li{margin:5px 0}
.tile ul.plain{margin:0;padding:0;list-style:none}
.tile ul.plain li{color:var(--cream-dim);font-size:14px;padding:6px 0 6px 17px;position:relative}
.tile ul.plain li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--ember);transform:rotate(45deg)}
.tile b{color:var(--cream);font-weight:800}
code{font-family:var(--mono);background:rgba(0,0,0,.35);border-radius:2px;padding:2px 6px;color:#fff8ec;font-size:.88em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.split{grid-template-columns:1fr}}
.deeplink{display:block;margin:0 0 12px;padding:10px 12px;border-radius:3px;text-align:center;font-size:13px;font-weight:800;color:#2a1806;background:var(--birch);box-shadow:0 3px 0 #9c8a55}
.deeplink:hover{text-decoration:none;background:#e6d29a}
.note{margin-top:12px;font-size:12.5px;color:#8f7a5c}
/* ------------------------------------------------------------ rank ladder
   Five across on desktop so it reads as a LADDER rather than a 3+2 orphan
   row. Hypixel represents a rank with its nameplate, not with artwork, so
   the hero of each card is the actual in-game tag in its actual colour.   */
/* The ranks row breaks out of the 1080 wrap: five tiers at 190px each was a
   cramped column, and a pricing table needs room for a big number and a real
   button. auto-fit rather than hand-tuned breakpoints, because a fixed
   repeat(n,1fr) overflows when content min-content exceeds the column. */
.ranks{max-width:1260px;display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px}

/* flex column with the button pushed down by margin-top:auto, so buttons line
   up across cards even though the perk lists are different lengths */
/* 24px reserved at the top of EVERY card. It carries the tier label, so it is
   never an empty band, and reserving it on all five keeps the price rows on
   one line, which is the one thing a comparison table cannot afford. */
.rank{display:flex;flex-direction:column;min-width:0;padding-top:24px;
  position:relative;background:var(--timber);border-radius:4px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,220,170,.09),0 5px 0 var(--seam),0 8px 18px rgba(0,0,0,.45);
  transition:transform .09s,box-shadow .09s}
.rank:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,220,170,.16),0 8px 0 var(--seam),0 12px 24px rgba(0,0,0,.5)}

/* the "image" is a sawn plank in the rank's own wood colour.
   ALL ruled lines are deliberately gone. The vertical seams cut a 58px header
   into near-squares, and the horizontal grain repeated on a 47px cycle whose
   heaviest 2px band landed at 31-33px, i.e. straight through the middle of
   every plank. Texture now comes only from the turbulence mottle below, which
   has no repeat and therefore cannot draw a line. Do not add a
   repeating-linear-gradient back to this element. */
.plank{height:58px;background:var(--edge);position:relative;overflow:hidden;border-bottom:3px solid rgba(0,0,0,.5)}
.plank::before{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='140'%3E%3Cfilter id='g4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='140' filter='url(%23g4)' opacity='0.6'/%3E%3C/svg%3E")}

/* the rank name burned into the plank itself, so the board is a label rather
   than decoration sitting above one */
.plank .name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.32rem;font-weight:900;letter-spacing:-.01em;color:#231505;
  text-shadow:0 1px 0 rgba(255,255,255,.28),0 -1px 0 rgba(0,0,0,.25)}

.rank-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}

/* the nameplate, byte for byte the LuckPerms prefix: &8[ colour name &8] */
/* the nameplate on a chat-panel chip: this is the actual thing being bought,
   so it gets shown in context rather than described. --ink is a LIGHTENED
   rank colour used for every text use; the raw --edge is for fills only,
   because Crimson on the card measured 2.04:1 and Acacia 3.54:1 against a
   4.5:1 requirement. --ink clears 6:1 on all five. */
.tag{font-family:var(--mono);font-size:.95rem;font-weight:700;margin:0 0 14px;text-align:center;
  background:rgba(0,0,0,.45);border-radius:3px;padding:9px 6px;
  box-shadow:inset 0 0 0 1px rgba(255,220,170,.07);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag .br{color:#8a765a}
.tag .nm{color:var(--ink,var(--edge))}
.tag .you{color:#cfc3ae}

.perk{color:var(--cream-dim);font-size:14px;margin:0 0 4px}

.price{font-family:var(--sans);font-size:2.15rem;color:var(--cream);font-weight:900;letter-spacing:-.03em;
  margin:0 0 16px;line-height:1;text-align:center;
  /* slot is RESERVED and merely invisible, so the row does not jump ~69px
     when the Tebex fetch lands on a slow in-app webview. Still fails closed:
     nothing becomes visible unless a real price arrived. */
  visibility:hidden;min-height:54px}
.price .per{display:block;font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cream-dim);margin-top:7px}

.perks{list-style:none;margin:0 0 18px;padding:16px 0 0;border-top:1px solid rgba(255,220,170,.11)}
.perks li{color:var(--cream);font-size:13.5px;line-height:1.4;padding:6px 0 6px 24px;position:relative}
/* tick drawn from two borders: no glyph, no font dependency, no image */
.perks li::before{content:"";position:absolute;left:4px;top:9px;width:9px;height:5px;
  border-left:2.5px solid var(--ink,var(--edge));border-bottom:2.5px solid var(--ink,var(--edge));
  transform:rotate(-45deg)}

/* every CTA is amber. It was beige, the same fill as a nav key, and at 13px it
   was the smallest text in the card. The featured tier differentiates with a
   ring and a banner, not by being the only coloured button. */
.buy{display:block;margin-top:auto;text-align:center;padding:15px 10px;border-radius:3px;font-size:15px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#2a1806;background:var(--amber);
  box-shadow:inset 0 2px 0 rgba(255,241,206,.55),0 4px 0 #8a5c1c;transition:background .12s,transform .07s,box-shadow .07s}
.buy:hover{text-decoration:none;background:#f4bd67;transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,241,206,.6),0 6px 0 #8a5c1c}
.buy:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,241,206,.45),0 1px 0 #8a5c1c}

/* outline, NOT an inset box-shadow: an inset shadow on the card is painted
   over by the plank child, which cut the amber ring clean through for the
   plank's height. outline paints above descendants. */
.rank.featured{outline:2px solid var(--amber);outline-offset:-2px}

/* tier strip: labelled on every card so the reserved band is never a bare
   rectangle, amber only on the featured one */
.tier,.top-rank{position:absolute;top:0;left:0;right:0;height:24px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tier{background:rgba(0,0,0,.32);color:#9b8b74}
.top-rank{background:var(--amber);color:#2a1806}

.hero-tight{padding:40px 0 30px}
.join-note{margin-top:16px;text-align:center;font-size:13px;color:var(--cream-dim)}
.join-note code{font-family:var(--mono);color:var(--cream)}
details{border-top:1px solid rgba(0,0,0,.35)}
details:first-of-type{border-top:0}
details summary{cursor:pointer;padding:10px 0;font-weight:700;font-size:14px;list-style:none;display:flex;gap:10px;align-items:center;color:var(--cream)}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--amber);font-weight:900;width:11px}
details[open] summary::before{content:"\2212"}
details p{padding:0 0 12px 21px;color:var(--cream-dim);font-size:13.5px}

footer{padding:26px 0 42px;color:var(--cream-dim);font-size:13px;border-top:3px solid var(--seam)}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.foot-in .sp{margin-left:auto;font-weight:800;color:var(--cream)}
.legal{margin-top:13px;font-size:12px;color:#6f5c42}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================================================================ */
/* Everything above is the single-page stylesheet, unchanged. Below is only
   what splitting it into separate pages needs.                            */
/* ================================================================ */

/* which page you are on. The old `.hide-sm` rule is gone: on a multi-page
   site hiding nav links is the bug, not the fix. */
/* the current page is the key already held down: no travel left in it, a
   shadow cast across the top from the bar above, and the key seated in a dark
   socket with one ember line lit along its rim. The face stays plank rather
   than going dark, because darkening it drops the label under 4.5:1, and a
   legible marker beats a dramatic one. The socket is --timber (6.3:1 against
   the face) and not --ember, which measures 1.4:1 on light wood and would be
   a marker you cannot see. It sits AFTER the hover and active rules on
   purpose, so the page you are on does not pop up under the cursor and
   pretend it is somewhere to go. */
.nav-links a[aria-current="page"]{
  color:var(--walnut);transform:translateY(2px);
  box-shadow:inset 0 5px 7px rgba(50,28,10,.5),inset 0 -4px 0 var(--timber),
             inset 0 -5px 0 var(--ember),inset 0 0 0 1px rgba(74,44,20,.4),
             0 1px 0 var(--timber-lit);
}
.nav-links a.discord[aria-current="page"]{
  color:#2a1806;background:var(--amber);
  box-shadow:inset 0 2px 0 rgba(255,241,206,.55),inset 0 -3px 0 rgba(120,76,18,.34),
             inset 0 0 0 1px rgba(120,76,18,.3),0 1px 0 #8a5c1c;
}

/* phone nav. Five keys plus a brand do not fit at 390px, so they collapse
   behind a Menu toggle. Checkbox, no JS. All five pages ship the toggle pair.
   The :has() guard is still deliberate: if a page ever loses the pair, that
   rule never matches and the keys simply wrap onto extra rows instead of
   vanishing, so a page missing the toggle is ugly rather than unnavigable. */
.nav-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
/* the burger is a key too, or it reads as the one dead control in a bar full
   of live ones. 44px so it clears the tap target floor on its own. */
.nav-burger{
  display:none;margin-left:auto;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:44px;padding:0 15px;border-radius:2px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);
  text-shadow:0 1px 0 rgba(255,248,228,.28);
  background:var(--plank);
  box-shadow:inset 0 2px 0 rgba(255,248,228,.38),inset 0 -3px 0 rgba(74,44,20,.5),
             inset 0 0 0 1px rgba(74,44,20,.28),0 4px 0 var(--timber-lit);
  transition:transform .07s,box-shadow .07s;
}
.nav-burger::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:overlay;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='140'%3E%3Cfilter id='g4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.75' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='140' filter='url(%23g4)' opacity='0.55'/%3E%3C/svg%3E");
}
.nav-burger::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-position-y:-27px;
  background-image:repeating-linear-gradient(180deg,
    rgba(74,44,20,0) 0 6px, rgba(74,44,20,.14) 6px 7px,
    rgba(74,44,20,0) 7px 16px, rgba(255,248,228,.12) 16px 17px,
    rgba(74,44,20,0) 17px 24px, rgba(74,44,20,.09) 24px 25px,
    rgba(74,44,20,0) 25px 32px, rgba(74,44,20,.16) 32px 34px,
    rgba(74,44,20,0) 34px 47px);
}
.nav-burger:active{transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,248,228,.3),inset 0 -3px 0 rgba(74,44,20,.5),
             inset 0 0 0 1px rgba(74,44,20,.28),0 1px 0 var(--timber-lit)}
/* open menu = held down key */
.nav-toggle:checked+.nav-burger{
  transform:translateY(2px);
  box-shadow:inset 0 5px 7px rgba(50,28,10,.5),inset 0 -4px 0 var(--timber),
             inset 0 -5px 0 var(--ember),inset 0 0 0 1px rgba(74,44,20,.4),
             0 1px 0 var(--timber-lit);
}
.nav-burger>span{position:relative;display:block;width:18px;height:2px;background:var(--walnut)}
.nav-burger>span::before,.nav-burger>span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--walnut)}
.nav-burger>span::before{top:-6px}
.nav-burger>span::after{top:6px}
.nav-toggle:focus-visible+.nav-burger{outline:3px solid var(--amber);outline-offset:3px}

@media(max-width:640px){
  /* back to flex: the three-column grid is a desktop idea, and on a phone the
     row is brand + burger with the keys stacking underneath it */
  .nav-in{display:flex;flex-wrap:wrap;height:auto;min-height:58px;padding-top:9px;padding-bottom:9px;gap:9px}
  .nav-burger{display:flex}
  .nav-links{width:100%;justify-self:auto;flex-wrap:wrap;justify-content:center;gap:6px}
  .nav-links a{font-size:14px;padding:0 14px}
  .nav-in:has(.nav-toggle) .nav-links{display:none}
  .nav-toggle:checked~.nav-links{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding-top:3px;padding-bottom:2px}
}

/* inner pages: a compact header instead of the full hero */
.page-head{padding:46px 0 40px;text-align:center}
.page-head h1{font-size:clamp(1.75rem,5vw,2.5rem);max-width:22ch}
.page-head .sub{margin-top:14px;max-width:54ch}

/* a whole tile can be the link on the home page */
.tile h2{font-size:1.06rem;margin-bottom:9px}
a.tile{display:block;color:inherit;transition:transform .08s,box-shadow .08s}
a.tile:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:inset 0 2px 0 rgba(255,224,176,.14),inset 0 -3px 0 rgba(0,0,0,.38),0 6px 0 #100a04}
.go{display:inline-block;margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.after-tiles{margin-top:22px;text-align:center;font-size:14px;color:var(--cream-dim)}