*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,a,input,textarea,select{outline-offset:5px}button{cursor:pointer}img,svg{max-width:100%}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--accent)}.utility{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);padding:9px 0;color:var(--muted)}.utility .wrap{display:flex;justify-content:space-between}header{padding:24px 0;border-bottom:1px solid var(--line)}header .wrap{display:flex;align-items:center;gap:26px}.brand{font-size:23px;font-weight:900;letter-spacing:-.06em;white-space:nowrap}.brand em{color:var(--accent);font-style:normal}nav{margin-left:auto;display:flex;align-items:center;gap:25px;font-size:13px;font-weight:700}.live{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:var(--accent);color:var(--onaccent);padding:13px 22px;border-radius:6px;font-size:13px;font-weight:800;letter-spacing:.04em}.live:before{content:'▶';font-size:11px}.secondary{display:inline-flex;padding:12px 18px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:700}.menu{display:none;background:transparent;color:var(--fg);border:1px solid var(--line);padding:8px 12px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:70px 0 60px}h1{font-size:clamp(40px,5vw,68px);line-height:1.05;letter-spacing:-.055em;margin:20px 0 25px;max-width:850px}h2{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.035em}h3{line-height:1.35;letter-spacing:-.02em}.lead{font-size:17px;max-width:640px;color:var(--muted)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 12px}.small{font-size:12px;color:var(--muted)}.art{position:relative;aspect-ratio:1.15;overflow:hidden;border-radius:14px;background:var(--panel);border:1px solid var(--line);padding:30px}.art svg{width:100%;height:100%}.art figcaption{position:absolute;bottom:16px;left:24px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}.art .live-label{position:absolute;top:20px;left:24px;background:var(--accent);color:var(--onaccent);font-size:10px;font-weight:800;padding:5px 10px}.section{padding:38px 0 48px;border-top:1px solid var(--line)}.section-head{display:flex;gap:30px;align-items:center;justify-content:space-between;margin-bottom:22px}.section-head h2{margin:8px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:9px}.card p{color:var(--muted);font-size:14px}.number{font-size:12px;color:var(--accent);font-weight:800}.feature{display:grid;grid-template-columns:1.3fr 1fr;gap:26px}.feature article{padding:36px;border-left:4px solid var(--accent);background:var(--panel)}.feature aside{padding:30px;border:1px solid var(--line);border-radius:10px}.feature h3{font-size:27px;margin:16px 0}.text-link{font-weight:700;font-size:13px;color:var(--accent)}.tool{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.tool form{display:flex;align-items:end;gap:15px;flex-wrap:wrap}.tool label{display:block;font-size:13px}.tool input:not([type=checkbox]),.tool select,.tool textarea{display:block;border:1px solid var(--line);padding:11px;background:var(--bg);color:var(--fg);border-radius:5px;max-width:100%;margin-top:7px}.tool input[type=checkbox]{width:18px;height:18px;margin-right:12px;accent-color:var(--accent)}.tool .check{padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center}.tool button{border:0;background:var(--accent);color:var(--onaccent);padding:12px 18px;border-radius:5px;font-weight:bold}.tool output{display:block;margin-top:18px;font-weight:bold}.tool textarea{width:100%;min-height:140px}.tool .muted-button{background:transparent;border:1px solid var(--line);color:var(--fg)}details{padding:18px 0;border-bottom:1px solid var(--line)}summary{font-weight:700;cursor:pointer}.banner{background:var(--accent);color:var(--onaccent);padding:35px;display:flex;justify-content:space-between;gap:25px;align-items:center;border-radius:12px}.banner h2{margin:0 0 10px}.banner .live{background:var(--onaccent);color:var(--accent)}footer{border-top:1px solid var(--line);padding:40px 0 25px;margin-top:45px;font-size:13px;color:var(--muted)}footer .wrap{display:flex;justify-content:space-between;gap:35px;flex-wrap:wrap}footer p{max-width:530px}.footnav{display:flex;gap:18px;flex-wrap:wrap}.article{max-width:780px;margin:55px auto;padding:0 24px}.article h1{font-size:clamp(34px,5vw,55px)}.article h2{font-size:27px;margin-top:38px}.article p{font-size:17px}.article .meta{color:var(--muted);font-size:12px}.toc{padding:22px;background:var(--panel);border-left:3px solid var(--accent)}.toc a{display:block;padding:5px}.empty{padding:24px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:var(--accent);color:var(--onaccent);padding:10px;z-index:10}.consent{position:fixed;bottom:16px;left:16px;right:16px;max-width:720px;margin:auto;background:var(--panel);border:1px solid var(--line);padding:18px;box-shadow:0 4px 30px #0004;z-index:20;border-radius:10px;font-size:13px}.consent button{padding:9px 15px;margin:6px 8px 0 0;border:1px solid var(--line);background:var(--accent);color:var(--onaccent);border-radius:4px}.consent button[data-consent=no]{background:transparent;color:var(--fg)}[hidden]{display:none!important}.pitch{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border:1px solid var(--accent);padding:25px;margin-top:20px;min-height:180px;align-items:center}.pitch span{background:var(--accent);color:var(--onaccent);padding:10px;border-radius:50%;text-align:center;font-size:12px}.search{width:100%;padding:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
/* Twenty compositions: individual mastheads, hero geometry, reading systems and content arrangements. */
.broadcast .hero{grid-template-columns:1fr 1.12fr}.broadcast .art{border-radius:4px}.broadcast .brand{text-transform:uppercase}.wellness .hero{grid-template-columns:1.25fr .75fr}.wellness h1{font-family:Georgia,serif;letter-spacing:-.04em}.wellness .art{border-radius:45% 45% 8px 8px}.wellness .grid{grid-template-columns:1fr 1fr 1fr}.tactics header{border-left:12px solid var(--accent)}.tactics .hero{grid-template-columns:1.2fr .8fr}.tactics .art{transform:rotate(-2deg);border-radius:0}.tactics .card{border-radius:0;border-top:3px solid var(--accent)}.club .hero{grid-template-columns:1fr 1fr;gap:25px}.club h1{font-weight:900}.club .art{border-radius:0 80px 0 0}.club .feature{grid-template-columns:1fr 1.25fr}.data .hero{grid-template-columns:1.5fr .75fr}.data .art{aspect-ratio:.9;border-radius:0}.data .grid{grid-template-columns:1fr}.data .card{display:grid;grid-template-columns:30px 1fr 1.4fr;gap:25px;align-items:center}.boots .hero{grid-template-columns:.85fr 1.15fr}.boots .art{border-radius:0;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}.boots .grid{gap:0}.boots .card{border-radius:0}.newspaper header .wrap{flex-wrap:wrap}.newspaper .brand{font-family:Georgia,serif;font-size:34px}.newspaper nav{border-top:1px solid var(--line);padding-top:15px;width:100%;justify-content:space-between}.newspaper .hero{grid-template-columns:1.4fr .7fr}.newspaper h1{font-family:Georgia,serif}.newspaper .card{background:transparent;border-radius:0;border-width:1px 0 0}.court .hero{grid-template-columns:1fr 1fr;align-items:end}.court h1{text-transform:uppercase;font-size:clamp(40px,5vw,72px)}.court .art{border-radius:50% 50% 0 0;aspect-ratio:.95}.court .grid{grid-template-columns:1fr 1fr}.court .card:last-child{grid-column:1/-1}.fashion .hero{grid-template-columns:.9fr 1.1fr}.fashion h1{font-family:Georgia,serif;font-weight:400}.fashion .art{border-radius:0 0 100px 0}.fashion .grid .card:nth-child(2){transform:translateY(20px)}.preview .hero{grid-template-columns:1fr;text-align:center;padding-bottom:35px}.preview .hero h1,.preview .lead{margin-left:auto;margin-right:auto}.preview .actions{justify-content:center}.preview .art{aspect-ratio:3.5;max-height:260px}.preview .feature{grid-template-columns:1fr 1fr}.world .hero{grid-template-columns:1.1fr .9fr}.world .art{border-radius:50%;aspect-ratio:1}.world .grid{grid-template-columns:1fr 1fr}.world .card:first-child{grid-column:1/-1}.tech .hero{grid-template-columns:.95fr 1.05fr}.tech .art{border-radius:25px;border:8px solid var(--line)}.tech h1{font-weight:500}.tech .feature{grid-template-columns:1fr .8fr}.rules .hero{grid-template-columns:1fr .7fr}.rules h1{font-family:Georgia,serif}.rules .art{border-radius:4px;box-shadow:15px 15px 0 var(--line)}.rules .grid{grid-template-columns:1fr 1fr}.rules .card:last-child{grid-column:1/-1}.visual .hero{grid-template-columns:.8fr 1.2fr;align-items:center}.visual .art{border-radius:0;aspect-ratio:1.25}.visual .feature{grid-template-columns:.85fr 1.15fr}.visual .card{border-width:0 0 1px;background:transparent;border-radius:0}.minimal .hero{grid-template-columns:1.35fr .65fr;gap:75px}.minimal .art{aspect-ratio:.75;border-radius:30px}.minimal .grid{grid-template-columns:1fr;gap:8px}.minimal .card{padding:20px;display:grid;grid-template-columns:30px 1fr 1fr;gap:15px;align-items:center}.studio .hero{grid-template-columns:.9fr 1.1fr}.studio .art{border:1px solid var(--accent);box-shadow:12px 12px 0 var(--panel);border-radius:0}.studio .card{border-radius:0;box-shadow:5px 5px 0 var(--line)}.diagnostic .hero{grid-template-columns:1.1fr .9fr}.diagnostic .art{border-radius:16px 16px 65px 16px}.diagnostic .grid{grid-template-columns:1fr 1fr}.diagnostic .card:first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:center}.journal .hero{grid-template-columns:1fr .8fr;gap:70px}.journal h1,.journal h2{font-family:Georgia,serif;font-weight:400}.journal .art{border-radius:150px 150px 0 0}.journal .feature{grid-template-columns:1.5fr .7fr}.weekend .hero{grid-template-columns:.8fr 1.2fr}.weekend .art{aspect-ratio:1.3;border-radius:20px 0 20px 0}.weekend .card{border-left:5px solid var(--accent)}.conversation .hero{grid-template-columns:1.1fr .9fr}.conversation .art{border-radius:80px 0 80px 0}.conversation h1{font-family:Georgia,serif}.conversation .grid{grid-template-columns:1.2fr .9fr .9fr}.conversation .feature{grid-template-columns:.9fr 1.1fr}
@media(max-width:800px){.wrap{width:calc(100% - 32px)}header{padding:17px 0}header .wrap{flex-wrap:wrap;gap:12px}.menu{display:block;margin-left:auto}nav{display:none;width:100%;margin:0;flex-wrap:wrap;gap:16px;padding:15px 0}nav.open{display:flex}.newspaper nav{display:none}.newspaper nav.open{display:flex}body .hero{grid-template-columns:1fr;gap:25px;padding:38px 0}body .hero h1{font-size:43px}body .hero .art{aspect-ratio:1.6;max-height:350px;border-radius:12px;transform:none;clip-path:none}body .grid,body .feature{grid-template-columns:1fr;gap:15px}body .card,body .data .card,body .minimal .card{display:block;grid-column:auto;grid-row:auto;transform:none}.feature article{padding:24px}.feature aside{padding:24px}.section{padding:25px 0 30px}.banner{display:block;padding:25px}.banner .live{margin-top:15px}.utility span:last-child{display:none}.section-head{align-items:flex-start}.art figcaption{font-size:9px}.article{margin-top:30px}.article h1{font-size:36px}footer{margin-top:25px}.pitch{gap:6px;padding:12px}.pitch span{padding:6px}.tool{padding:20px}.tool form{display:grid;grid-template-columns:1fr}.tool form input,.tool form select{width:100%}.newspaper .brand{font-size:29px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}.art{margin:0;min-width:0}.hero>*{min-width:0}@media(max-width:800px){body[class] .hero,body[class] .grid,body[class] .feature{grid-template-columns:1fr!important}body[class] .grid .card{display:block!important;grid-column:auto!important;grid-row:auto!important;transform:none!important}body[class] header nav{display:none}body[class] header nav.open{display:flex}}