/* Personal website. A different look from the academic street: flat poster colours, round menus, one typeface (Jost). */
:root {
  color-scheme: only light;
  --paper: #ffffff;
  --ink: #15233f;
  --soft: #5b6478;
  --hair: #e3e6ec;
  --sport: #e1412f;
  --nature: #3b8b4b;
  --politics: #2449a6;
  --culture: #f1b52e;
  --font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--ink); color: #fff; padding: .4rem .8rem; border-radius: 99px; z-index: 10; }
.skip:focus { left: .5rem; }

/* header: the name, and the switch between the two websites */
.p-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 2.5rem); }
.p-name { font-weight: 500; font-size: 1.15rem; letter-spacing: .01em; text-decoration: none; }
.p-switch { display: flex; gap: 1.3rem; font-weight: 500; }
.p-switch a { text-decoration: none; padding-bottom: .1rem; border-bottom: 2px solid transparent; }
.p-switch a:hover { border-bottom-color: var(--hair); }
.p-switch a[aria-current] { border-bottom-color: var(--ink); }

.p-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 1rem 3rem; }

/* a page of sectors: the white centre names the page, the sectors fill the rest of the screen */
.p-sectors { padding: 0; align-items: stretch; }
.p-up { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; margin: -.4rem clamp(1rem, 4vw, 2.5rem) .55rem; font-weight: 500; font-size: .98rem; text-decoration: none; }
.p-up span { transition: transform .15s; }
.p-up:hover span { transform: translateX(-3px); }
.wheel.is-wheel { position: relative; flex: 1 1 auto; width: 100%; min-height: 26rem; }
.wheel-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.seg { outline: none; cursor: pointer; animation: seg-in .5s ease-out backwards; animation-delay: calc(var(--i) * 80ms); }
.seg-off, .seg-motto { cursor: default; }
@keyframes seg-in { from { opacity: 0; } }
.shape { stroke: var(--paper); stroke-width: 6; stroke-linejoin: round; transition: filter .2s; }
a.seg:hover .shape, .seg-beat:hover .shape { filter: brightness(1.06); }
.art { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.2, .8, .2, 1); animation: art-in .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 80ms + 150ms + var(--j) * 70ms); }
@keyframes art-in { from { opacity: 0; transform: scale(.6); } }
a.seg:hover .art, a.seg:focus-visible .art, .seg-beat:hover .art, .seg-beat:focus-visible .art { transform: scale(1.06) rotate(-2deg); }
.pill rect { fill: #fff; stroke: #111; stroke-width: 2; transition: stroke-width .15s; }
.pill text { font-family: var(--font); font-weight: 500; fill: #111; pointer-events: none; }
a.seg:hover .pill rect, .seg-beat:hover .pill rect { stroke-width: 3; }
a.seg:focus-visible .pill rect, .seg-beat:focus-visible .pill rect { stroke-width: 5; }
.seg-off .arts { filter: grayscale(1); opacity: .32; }
.seg-off .pill rect { stroke: #b9bec7; }
.seg-off .pill text { fill: #868c97; }
.hub-disc { fill: #fff; stroke: #111; stroke-width: 3; }
.hub text { font-family: var(--font); font-weight: 700; fill: #111; pointer-events: none; }
.hub { transform-box: fill-box; transform-origin: center; animation: hub-in .45s ease-out backwards; }
@keyframes hub-in { from { opacity: 0; transform: scale(.7); } }
.again .seg, .again .art, .again .hub { animation: none; }
.rec { display: none; }
.playing .rec { display: inline; }
.hub-label { transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.playing .hub-label { transform: scale(.5); }
.playing .hub-disc { stroke: #141418; }
.wheel-svg.playing .hub { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* without JavaScript: the same choices as a plain list */
.wheel:not(.is-wheel) { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 2rem 1rem; }
.wheel:not(.is-wheel) > * { font: inherit; border: 2px solid var(--ink); border-radius: 99px; padding: .45rem 1rem; background: none; color: inherit; text-decoration: none; }
.wheel:not(.is-wheel) > .off { opacity: .45; }

/* text under a wheel */
.p-text { max-width: 34rem; margin: 2.2rem 0 0; font-size: 1.15rem; line-height: 1.6; }
.p-sectors .p-text { align-self: center; margin: 1.2rem 1rem 1.6rem; }
.p-text p { margin: 0 0 .8rem; }
.p-text a { text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--politics); }

/* a content page reached from a wheel */
.p-page { align-items: stretch; max-width: 72rem; width: 100%; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.p-back { align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 500; margin: .5rem 0 1.2rem; }
.p-back .dot { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--sport); color: #fff; font-size: 1rem; transition: transform .15s; }
.p-back:hover .dot { transform: translateX(-3px); }
.p-h1 { font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.05; margin: 0 0 1.4rem; letter-spacing: -.01em; }

/* Loving Brothers: fantasy football card */
.fanta { display: grid; gap: 1.4rem; }
.fanta-head h3 { font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; margin: 0; }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.board { display: grid; gap: .4rem; justify-items: center; text-align: center; background: var(--ink); color: #f4f5f8; border-radius: 1.4rem; padding: .9rem 1rem 1rem; }
.board-label { font-weight: 500; font-size: 1rem; color: var(--culture); }
.board-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3rem .7rem; }
.board-team { font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
.board-team.mine { color: var(--culture); }
.board-goals { font-weight: 700; font-size: 1.8rem; line-height: 1; background: rgba(255, 255, 255, .1); border-radius: .4rem; padding: .05rem .45rem; font-variant-numeric: tabular-nums; }
.board-vs { color: #a9b1c4; }
.board-meta { font-size: .9rem; color: #a9b1c4; }
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.sheet-col h4 { font-weight: 600; font-size: 1.15rem; line-height: 1; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.sheet-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.sheet-col li { display: flex; justify-content: space-between; gap: .5rem; font-size: 1rem; padding: .12rem .45rem; border-radius: .4rem; }
.sheet-col li b { font-weight: 500; }
.sheet-col li .club { color: var(--soft); font-size: .9rem; white-space: nowrap; }
.sheet-col li.bro { background: rgba(241, 181, 46, .28); }
.sheet-col li.bro b::after { content: " ♥"; color: var(--sport); }
.fanta .pos { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 700; font-size: .85rem; color: #fff; }
.fanta .pos-P { background: #e08a1e; } .fanta .pos-D { background: var(--nature); } .fanta .pos-C { background: var(--politics); } .fanta .pos-A { background: var(--sport); }
.table-wrap { overflow-x: auto; }
.fanta-cap { font-weight: 600; font-size: 1.15rem; margin: 0 0 -.7rem; }
.standings { border-collapse: collapse; width: 100%; min-width: 30rem; font-variant-numeric: tabular-nums; }
.standings th, .standings td { padding: .35rem .5rem; text-align: right; border-bottom: 1px solid var(--hair); }
.standings thead th { font-weight: 500; font-size: .95rem; color: var(--soft); border-bottom: 2px solid var(--ink); }
.standings tbody th { text-align: left; font-weight: 400; white-space: nowrap; }
.standings th:nth-child(2) { text-align: left; }
.standings tr.mine { background: rgba(241, 181, 46, .28); }
.standings tr.mine th { font-weight: 600; }
.fanta-foot { margin: 0; color: var(--soft); font-size: .92rem; }
.soon { color: var(--soft); }
@media (max-width: 960px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .standings { min-width: 0; }
  .standings th, .standings td { padding: .3rem .25rem; }
  .standings .gx { display: none; }
  .p-switch { gap: .9rem; }
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  .seg, .art, .hub, .wheel-svg.playing .hub { animation: none; }
  .art, .shape, .p-back .dot, .p-up span { transition: none; }
  a.seg:hover .art, a.seg:focus-visible .art, .seg-beat:hover .art { transform: none; }
  @view-transition { navigation: none; }
}