:root{
  --bg:#2f3236;
  --ink:#eceded;
  --ink-dim:#a7abb1;
  --ink-body:#d8dadd;
  --edge:rgba(255,255,255,.14);
  --pad:clamp(1.5rem,5vw,5rem);
  --max:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- still colour wash behind the glass ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
.field::before,.field::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.42}
.field::before{width:55vw;height:55vw;left:-12vw;top:-16vw;background:#7a6242}
.field::after{width:50vw;height:50vw;right:-10vw;bottom:-18vw;background:#3f5d66}

/* ---------- glass ---------- */
.glass{
  position:relative;
  background:linear-gradient(148deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--edge);
  border-radius:14px;
  overflow:hidden;
}
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,0) 34%);
  mix-blend-mode:overlay;
}
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glass > *{position:relative;z-index:1}

/* ---------- layout ---------- */
.wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* .wrap sets the side gutters; these set the vertical rhythm.
   Written as main.wrap so it isn't overridden by .wrap's own padding. */
main.wrap{padding-top:2.2rem;padding-bottom:4rem}
main.home{padding-top:0;padding-bottom:0}

/* ---------- top nav ---------- */
.nav{
  position:sticky;top:0;z-index:5;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(47,50,54,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{color:var(--ink);text-decoration:none;font-weight:500;letter-spacing:-.01em}
.menu{display:flex;gap:.2rem}
.menu a{
  color:var(--ink-dim);text-decoration:none;font-size:.9rem;
  padding:.4rem .8rem;border-radius:999px;transition:color .2s,background .2s;
}
.menu a:hover,.menu a:focus-visible{color:var(--ink);background:rgba(255,255,255,.1)}
.menu a[aria-current="page"]{color:var(--ink)}

/* ---------- type ---------- */
h1{font-size:clamp(2.6rem,8vw,5.6rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
h1 span{display:block}
.lede{margin-top:1.6rem;max-width:36ch;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-dim);line-height:1.45}
.meta{margin-top:1rem;font-size:.9rem;color:var(--ink-dim)}
h2{font-size:1rem;font-weight:500;color:var(--ink-dim);margin:0 0 1.4rem}
.title{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-bottom:.8rem}
.sub{color:var(--ink-dim);max-width:52ch;margin-bottom:2.2rem}

/* ---------- hero (home) ---------- */
.hero{
  min-height:calc(100svh - 4.4rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,6vw,5rem);align-items:center;
  padding:4rem 0;
}
.portrait{
  width:clamp(190px,24vw,310px);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--edge);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

/* ---------- panels ---------- */
.panel{padding:clamp(1.6rem,4vw,2.6rem)}
.panel p{max-width:64ch;color:var(--ink-body)}
.panel p+p{margin-top:1.1rem}
.panel h2{margin-top:2.4rem}
.panel h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;font-weight:500;margin:2rem 0 .6rem}
.prose ul{margin:.6rem 0 0 1.2rem;color:var(--ink-body)}
.prose li+li{margin-top:.35rem}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- role list (about) ---------- */
.roles{margin-top:2rem;border-top:1px solid var(--edge)}
.role{padding:1.1rem 0;border-bottom:1px solid var(--edge);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline}
.role h3{font-size:1rem;font-weight:500}
.role em{display:block;font-style:normal;color:var(--ink-dim);font-size:.88rem;margin-top:.2rem}
.role time{color:var(--ink-dim);font-size:.82rem;white-space:nowrap}

/* ---------- cards (projects, stories) ---------- */
.grid{display:grid;gap:.85rem}
.card{
  padding:1.7rem 1.5rem;display:block;text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s,opacity .3s;
}
/* hover: the whole panel lights up (inset shadow = a white wash over the
   glass, which animates smoothly), a brighter edge, and a soft drop shadow */
.card:hover,.card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.09),0 14px 34px rgba(0,0,0,.3);
}
.card:hover p,.card:focus-visible p,.card:hover .tag,.card:focus-visible .tag{color:var(--ink-body)}
.card:hover .tag,.card:focus-visible .tag{border-color:rgba(255,255,255,.3)}
.card.soon:hover,.card.soon:focus-visible{opacity:1}
.card h3{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.card p{margin-top:.6rem;color:var(--ink-dim);max-width:58ch;font-size:.95rem}
.card .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.tag{display:inline-block;font-size:.74rem;color:var(--ink-dim);border:1px solid var(--edge);padding:.22rem .6rem;border-radius:999px}
.date{font-size:.8rem;color:var(--ink-dim)}
.soon{opacity:.72}

/* ---------- links / buttons ---------- */
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.links a{
  color:var(--ink);text-decoration:none;font-size:.95rem;
  padding:.65rem 1.15rem;border-radius:999px;border:1px solid var(--edge);
  transition:background .25s;
}
.links a:hover,.links a:focus-visible{background:rgba(255,255,255,.13)}
/* filled button (WhatsApp on Contact and the English page) */
.links a.solid{background:#f0e2c2;color:#2f3236;border-color:transparent;font-weight:500}
.links a.solid:hover,.links a.solid:focus-visible{background:#f6ecd6}
/* padding (not just text) so it's a comfortable tap target on touch;
   negative margins keep it sitting where it looks right */
.back{display:inline-block;margin:-.7rem -.4rem 1rem;padding:.7rem .4rem;
      color:var(--ink-dim);text-decoration:none;font-size:.9rem}
.back:hover{color:var(--ink)}

/* Every page is a column: nav, then main stretches to fill any spare
   height, then the footer. So the footer always sits at the bottom of
   the screen on short pages, and right after the content on long ones,
   with the same gap below it everywhere. */
body{display:flex;flex-direction:column}
.nav,footer{flex:0 0 auto}
main.wrap{flex:1 0 auto;width:100%}
footer{padding:1.5rem 0 2rem;color:var(--ink-dim);font-size:.8rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--ink)}

:focus-visible{outline:2px solid #f0e2c2;outline-offset:3px}

/* ---------- gentle load-in ---------- */
.rise{opacity:0;transform:translateY(12px)}
.loaded .rise{animation:settle .7s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes settle{to{opacity:1;transform:none}}

/* below this the two-column hero gets cramped; above it (incl. iPad
   portrait at 768) the photo sits beside the text */
@media (max-width:700px){
  .hero{grid-template-columns:1fr;justify-items:start;align-content:center;gap:2.2rem;padding:3rem 0}
  .portrait{width:clamp(150px,38vw,210px);order:-1}
}
@media (max-width:620px){
  .role{grid-template-columns:1fr}
  /* tuned so all six items fit on a 375px phone without clipping */
  .menu a{padding:.4rem .34rem;font-size:.78rem;white-space:nowrap}
  .menu{gap:.1rem}
  .brand{display:none}
  /* if they still don't fit, scroll the menu rather than the page */
  .nav .wrap{justify-content:center;padding-left:.7rem;padding-right:.7rem}
  .menu{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
}
/* only the very narrowest phones scroll; fade the edge so it reads as
   "there's more" instead of a clipped word */
@media (max-width:360px){
  .menu{-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
        mask-image:linear-gradient(to right,#000 86%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;animation:none}
  html{scroll-behavior:auto}
  .card{transition:none}
}

/* ---------- hobby: stats, chart, factions ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-bottom:.85rem}
.stat{padding:1.3rem 1.2rem}
.stat .n{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.stat .k{margin-top:.45rem;font-size:.78rem;color:var(--ink-dim)}

.chart-wrap{padding:clamp(1.3rem,3vw,2.1rem);margin-bottom:.85rem}
.chart-wrap h2{margin-bottom:1.1rem}
.chart{width:100%;height:190px;display:block;overflow:visible}
.chart-legend{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.76rem;color:var(--ink-dim)}
.muted{color:var(--ink-dim);font-size:.85rem}
.muted a,a.u{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.factions{display:grid;gap:.6rem}
.frow{display:grid;grid-template-columns:6.5rem 1fr auto;gap:.9rem;align-items:center;font-size:.9rem}
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;background:rgba(240,226,194,.55);border-radius:999px}

@media (max-width:620px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:5.2rem 1fr;row-gap:.2rem}
  .frow .muted{grid-column:2}
}

/* Touch devices only: enlarge tap targets to ~44px without changing
   the proportions of the desktop nav. */
@media (pointer:coarse){
  /* min-height rather than padding: guarantees a 44px target whatever
     the font size does at different widths */
  .menu a{min-height:44px;display:flex;align-items:center}
  .card{padding-top:1.9rem;padding-bottom:1.9rem}
  /* taller links would otherwise make the bar itself bulky on a phone */
  .nav{padding:.55rem 0}
}

/* ---------- home page: fit nav + hero + footer in one screen ----------
   The hero used to be sized at "full screen minus nav", so the footer
   always fell below the fold. Now the page is a column and the hero
   takes whatever height is left over. If the content is genuinely
   taller than the screen (small phones in landscape), it still scrolls
   rather than being clipped. */
body.home main.home{flex:1 1 auto;min-height:0;display:flex;align-items:center}
body.home .hero{min-height:0;width:100%;padding:1.5rem 0}

/* ---------- hobby chooser ---------- */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.choose .card{padding:2.2rem 1.8rem}
.choose .card h3{font-size:1.6rem}
@media (max-width:620px){.choose{grid-template-columns:1fr}}

/* ---------- football page ---------- */
h2.sec{font-size:1.15rem;color:var(--ink);font-weight:500;letter-spacing:-.01em;margin:2.4rem 0 .9rem}
h2.sec span{color:var(--ink-dim);font-weight:400}
h2.sec:first-of-type{margin-top:.4rem}
.chart-box{position:relative}
.chart-box .chart{height:auto}
.chart-box .ax{fill:var(--ink-dim);font-size:11px}
.chart-box .gl{fill:var(--ink);font-size:11px;font-weight:700}
.tip{position:absolute;z-index:3;pointer-events:none;display:grid;gap:.1rem;
     padding:.55rem .75rem;border-radius:10px;font-size:.78rem;white-space:nowrap;
     background:rgba(35,37,40,.94);border:1px solid var(--edge);color:var(--ink-dim)}
.tip[hidden]{display:none}
.tip b{color:var(--ink);font-weight:500}
.chart-key{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.8rem;font-size:.76rem;color:var(--ink-dim)}
.chart-key span{display:flex;align-items:center;gap:.4rem}
.dot{width:9px;height:9px;border-radius:50%;border:2px solid #f0e2c2;display:inline-block}
.dot.on{background:#f0e2c2}

.games{display:grid}
.game{display:grid;grid-template-columns:4.2rem minmax(0,1fr) 5.4rem 4.6rem 2.4rem;gap:.8rem;align-items:center;
      padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem}
.game:last-child{border-bottom:0}
.game .date,.game .gls{color:var(--ink-dim);font-size:.82rem}
.game .opp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game .opp em{font-style:normal;color:var(--ink-dim);font-size:.78rem;margin-left:.3rem}
.game .score{display:flex;gap:.45rem;align-items:center}
.game .rt{text-align:right;font-weight:500}
.res{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:6px;font-size:.72rem;font-weight:700;
     border:1px solid var(--edge);color:var(--ink-dim)}
.res.rW{background:rgba(240,226,194,.85);color:#2f3236;border-color:transparent}
.res.rD{background:rgba(255,255,255,.12);color:var(--ink)}

.ltable{width:100%;border-collapse:collapse;font-size:.9rem}
.ltable th{text-align:left;font-weight:400;font-size:.76rem;color:var(--ink-dim);padding:0 .5rem .5rem}
.ltable td{padding:.55rem .5rem;border-top:1px solid rgba(255,255,255,.07)}
.ltable th:nth-child(n+3),.ltable td:nth-child(n+3){text-align:right;width:3rem}
.ltable th:first-child,.ltable td:first-child{width:2rem;color:var(--ink-dim)}
.ltable td b{font-weight:500}
.ltable tr.us td{background:rgba(240,226,194,.12);color:var(--ink);font-weight:500}
.ltable tr.us td:first-child{border-radius:8px 0 0 8px;color:var(--ink)}
.ltable tr.us td:last-child{border-radius:0 8px 8px 0}

/* phones: opponent on its own line, result + goals underneath */
@media (max-width:620px){
  .game{grid-template-columns:3.3rem auto minmax(0,1fr) 2.2rem;column-gap:.7rem;row-gap:.3rem;
        grid-template-areas:"date opp opp rt" "date score gls rt"}
  .game .date{grid-area:date}.game .opp{grid-area:opp}.game .score{grid-area:score}
  .game .gls{grid-area:gls}.game .rt{grid-area:rt}
}

/* ---------- custom cursor (mouse/trackpad only) ---------- */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4L6 24.5L11.2 19.6L19 19.2Z' fill='%231b1c1e' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,default}
  a,a *,button,button *,[role="button"],summary,label[for]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4L6 24.5L11.2 19.6L19 19.2Z' fill='%231b1c1e' stroke='%23ffffff' stroke-width='3.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,pointer}
}