/* Practical Thinking — magazine layout mockups (Wallpaper* / Architectural Record spreads). Own code. */
.mag{--serif:"Source Serif 4","Iowan Old Style","Georgia",serif;--hair:1px solid #111111;--mg:clamp(1.25rem,2.4vw,2.5rem);
  padding:calc(var(--m) + 5.25rem) var(--m) clamp(3rem,6vw,6rem);color:#111111;font-family:var(--font)}
.mag *{box-sizing:border-box}
.mag figure{margin:0}
.mag img{display:block;width:100%;height:auto}
.mag .ed-ar{font-family:var(--font-ar);font-size:.95em}

/* top line: credits, section tag with page number, hairline */
.m-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;border-bottom:var(--hair);padding-bottom:.55rem;margin-bottom:var(--mg)}
.credits{margin:0;font-size:.625rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.tag{margin:0;display:flex;align-items:center;gap:.55rem;font-size:clamp(.8125rem,.95vw,.9375rem);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.tag b{font-weight:800}
.tag .bar{width:1px;height:1em;background:#111111}
.tag .no{font-weight:600;font-variant-numeric:tabular-nums}

/* headline + italic standfirst */
.hl{margin:0;font-family:var(--font);font-weight:800;letter-spacing:-.045em;line-height:.9;text-wrap:balance}
.stand{margin:.55em 0 0;font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.3;text-wrap:balance}

/* small bold-caps captions in the side margin */
.cap{margin:0 0 .9rem;font-size:.6875rem;line-height:1.5;font-weight:400;text-wrap:pretty}
.cap b{display:block;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.15rem}
.cap a{border-bottom:1px solid currentColor}
.key{list-style:none;margin:0;padding:0;font-size:.6875rem;line-height:1.35}
.key li{padding:.38rem 0;border-bottom:1px solid rgba(17,17,17,.28);display:flex;gap:.45rem}
.key li:first-child{border-top:1px solid rgba(17,17,17,.28)}
.key b{font-weight:800;min-width:1.2em}

/* numbered key over a sketch (HTML pins, nothing baked into the image) */
.keyed{position:relative}
.pin{position:absolute;transform:translate(-50%,-50%);width:1.45rem;height:1.45rem;border-radius:50%;background:#fcfcfa;border:1px solid #111111;
  display:grid;place-items:center;font-size:.625rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}

/* justified serif body in narrow columns */
.m-cols{font-family:var(--serif);font-size:clamp(.9688rem,.98vw,1.0313rem);line-height:1.5;font-weight:400;column-gap:clamp(1.1rem,1.8vw,1.75rem);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;font-optical-sizing:auto;orphans:3;widows:3}
.m-cols.c2{columns:2}.m-cols.c3{columns:3}
.m-cols p{margin:0;text-wrap:pretty}
.m-cols p+p{text-indent:1.15em}
.m-cols .ed-ar{font-size:.9em}
.m-cols a{border-bottom:1px solid currentColor}
/* large drop cap */
.m-cols p.dc::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:5.35em;line-height:.8;margin:.07em .09em -.05em 0;color:#111111}
/* continuation mark */
.m-cols .cont{text-indent:0;text-align:right;font-family:var(--font);font-weight:800;font-size:1.05rem;line-height:1;margin-top:.25rem;break-before:avoid}
.signoff{text-indent:0!important;margin-top:1.2em!important;text-align:left;font-style:italic}
.signoff span:first-of-type{font-style:normal;font-family:var(--font);font-weight:800;font-size:.75em;letter-spacing:.08em;text-transform:uppercase}
.end{display:inline-block;width:.5em;height:.5em;background:#111111;margin-left:.3em;vertical-align:.05em}
.m-cols .cap{font-family:var(--font);text-align:left;margin-top:1.4rem}

/* pull quotes */
.pq{margin:0;font-family:var(--font);font-weight:700;letter-spacing:-.03em;line-height:1.06;border-top:2px solid #111111;padding-top:.55em;text-wrap:balance}
.pq p{margin:0}
.pq p::before{content:"\201C";display:block;font-family:var(--serif);font-weight:700;font-size:1.9em;line-height:.62;margin-bottom:.05em}
.pq-side{font-size:clamp(1.15rem,1.5vw,1.45rem)}

/* shared 12-col spreads */
.m-open,.m-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.m-spread{margin-top:clamp(3rem,6.5vw,6.5rem)}
.m-side{grid-column:1/3}

/* ---- Mock A: Games master opener ---- */
.mag-a .m-open .m-side{align-self:start;padding-top:.1rem}
.m-hero{grid-column:3/13;position:relative}
.mag-a .m-hl{position:absolute;top:5.5%;right:3.2%;width:min(58%,46rem);text-align:right}
.mag-a .hl{font-size:clamp(2.4rem,5.6vw,5.9rem)}
.mag-a .stand{font-size:clamp(1rem,1.45vw,1.4rem)}
.mag-a .m-s1{align-items:start}
.mag-a .m-s1 .m-key{grid-column:3/7}
.mag-a .m-s1 .m-cols{grid-column:8/13}
.mag-a .m-s2{grid-template-rows:auto 1fr}
.m-break{grid-column:1/9;grid-row:1/3;margin-left:calc(-1*var(--m))}
.mag-a .m-s2 .pq{grid-column:9/13;grid-row:1;font-size:clamp(1.6rem,2.7vw,2.75rem);align-self:start;margin-top:8%}
.m-side-r{grid-column:9/12;grid-row:2;align-self:end}
.mag-a .m-s3 .m-cols{grid-column:3/13}
.mag-a .m-s4{align-items:end}
.mag-a .m-s4 .m-small{grid-column:7/10}
.mag-a .m-s4 .m-side{grid-column:10/12}

/* ---- Mock B: Bar fly opener (image page + text page) ---- */
.mag-b{padding-top:calc(var(--m) + 4.6rem)}
.m-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:stretch}
.m-left{grid-column:1/7;position:relative;margin-left:calc(-1*var(--m));overflow:hidden;background:#111111}
.m-left picture,.m-left img{height:100%}
.m-left img{object-fit:cover}
.m-left::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,rgba(17,17,17,0),rgba(17,17,17,.72))}
.mag-b .m-hl{position:absolute;z-index:1;left:clamp(1.25rem,3vw,3rem);right:clamp(1.25rem,3vw,3rem);bottom:clamp(1.25rem,3vw,3rem);color:#fcfcfa}
.mag-b .hl{font-size:clamp(2.3rem,4.3vw,4.4rem)}
.mag-b .stand{font-size:clamp(1rem,1.3vw,1.3rem);max-width:30em}
.mag-b .m-hl .credits{margin-top:1rem;color:rgba(252,252,250,.78)}
.m-right{grid-column:7/13;display:flex;flex-direction:column;padding-left:clamp(.5rem,1.4vw,1.5rem)}
.m-right .m-top{align-items:flex-start;margin-bottom:clamp(1.25rem,2vw,2rem)}
.photo-cap{max-width:15rem}.photo-cap .cap{margin:0}
.m-r-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:var(--gap);align-items:start}
.m-r-top .m-side{grid-column:auto}
.m-right .m-cols{margin-top:auto;padding-top:clamp(1.5rem,2.5vw,2.5rem)}
.b-s2{align-items:start}
.b-s2 .m-cols{grid-column:3/13}
.b-s3{grid-template-rows:auto 1fr}
.b-s3 .m-break{grid-column:5/13;grid-row:1/3;margin:0 calc(-1*var(--m)) 0 0}
.b-s3 .pq-xl{grid-column:1/5;grid-row:1;font-size:clamp(1.9rem,3.5vw,3.6rem);margin-top:6%}
.b-s3 .m-side-r{grid-column:1/4;grid-row:2;align-self:end}
.b-s4 .m-cols{grid-column:1/11}
.b-s5{align-items:start}
.b-s5 .m-mid{grid-column:3/8}
.b-s5 .m-cols{grid-column:8/13}

/* tablet */
@media (max-width:1100px){
  .m-cols.c3{columns:2}
  .mag-a .m-s1 .m-key{grid-column:3/13}.mag-a .m-s1 .m-cols{grid-column:3/13;margin-top:var(--mg)}
  .m-r-top{grid-template-columns:1fr}.m-r-top .m-key{order:-1}
  .b-s5 .m-mid{grid-column:3/13}.b-s5 .m-cols{grid-column:3/13;margin-top:var(--mg)}
}
/* phone: one clean column */
@media (max-width:760px){
  .mag{padding-top:calc(var(--m) + 7.25rem)}
  .m-open,.m-spread,.m-split,.m-r-top{display:block}
  .m-spread{margin-top:2.75rem}
  .m-top{flex-wrap:wrap}
  .m-cols.c2,.m-cols.c3{columns:1}
  .m-cols{font-size:1.0625rem;line-height:1.55;text-align:left;hyphens:manual}
  .m-side,.m-side-r{margin-top:1rem}
  .m-open .m-side{margin:0 0 .9rem}
  .m-hero{margin:0 calc(-1*var(--m))}
  .mag-a .m-hl{position:static;width:auto;text-align:left;padding:1.25rem var(--m) 0}
  .mag-a .hl{font-size:clamp(2.5rem,12vw,3.4rem)}
  .m-break,.b-s3 .m-break{margin:0 calc(-.5*var(--m))}
  .mag-a .m-s2 .pq,.b-s3 .pq-xl{margin-top:1.75rem;font-size:1.85rem}
  .m-s1 .m-key,.b-s5 .m-mid{margin:1.25rem 0}
  .m-key .pin{width:1.2rem;height:1.2rem;font-size:.5625rem}
  .mag-a .m-s4 .m-small{width:70%}
  .mag-b{padding-top:calc(var(--m) + 7.25rem)}
  .m-left{margin:0 calc(-1*var(--m));aspect-ratio:1103/1600;max-height:none}
  .mag-b .hl{font-size:clamp(2.1rem,10.4vw,2.9rem)}
  .m-right{padding:0;margin-top:1.5rem}
  .m-right .m-top{margin-bottom:1.25rem}
  .m-r-top .m-side{margin-top:1rem}
  .pq-side{margin:0 0 1.5rem}
  .b-s2 .m-side{margin:0}
}

/* refinements */
.mag-a .m-hl{top:7%}
.mag-a .hl{font-size:clamp(2.4rem,6vw,6.3rem)}
.m-stand{grid-column:3/10;margin:1.1rem 0 0;font-size:clamp(1.2rem,1.9vw,1.85rem);max-width:none;text-wrap:balance}
.mag-a .m-s4 .m-small{grid-column:4/9}
.mag-a .m-s4 .m-side{grid-column:9/11;padding-bottom:1rem}
.b-s5{align-items:center}
.b-s5 .m-side{align-self:start}
.b-s5 .m-mid{grid-column:3/8}
@media (max-width:760px){
  .mag-a .m-s1,.m-r-top{display:flex;flex-direction:column}
  .mag-a .m-s1 .m-key{order:-1;margin-top:0}
  .m-r-top .m-key{order:-1}
  .m-stand{padding:0 var(--m);margin:.75rem calc(-1*var(--m)) 0;font-size:1.25rem}
  .mag-a .m-s4 .m-small{width:100%}
  .m-left{aspect-ratio:auto;overflow:visible;background:none}
  .m-left picture,.m-left img{height:auto}
  .m-left::after{display:none}
  .mag-b .m-hl{position:static;color:#111111;padding:1.25rem var(--m) 0}
  .mag-b .m-hl .credits{color:#111111}
}
.b-s5{align-items:start;grid-template-rows:auto 1fr}
.b-s5 .m-mid{grid-column:1/7;grid-row:1;margin-left:calc(-1*var(--m))}
.b-s5 .m-side{grid-column:2/5;grid-row:2;margin-top:1rem}
.b-s5 .m-cols{grid-column:7/13;grid-row:1/3}
.mag-a .m-s4{margin-top:clamp(1.5rem,3vw,3rem)}
@media (max-width:1100px){.b-s5 .m-mid{grid-column:1/13;margin-left:0}.b-s5 .m-side{grid-column:1/6}.b-s5 .m-cols{grid-column:1/13;grid-row:3}}
@media (max-width:760px){.b-s5{display:flex;flex-direction:column}.b-s5 .m-mid{margin:0}.b-s5 .m-side{margin:.25rem 0 1.25rem}}
@media (max-width:1100px) and (min-width:761px){
  .m-left{align-self:start}
  .m-left picture,.m-left img{height:auto}
  .m-right .m-cols.c2{columns:1}
}

/* ---- Majlis Talks: landscape visual on a dark left page (image at full resolution, headline below) ---- */
.m-left-dark{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(1.5rem,3vw,3rem);background:#111111;padding-bottom:clamp(1.25rem,3vw,3rem)}
.m-left-dark::after{display:none}
.m-left-dark picture,.m-left-dark img{height:auto}
.m-left-dark .m-hl{position:static;padding:0 clamp(1.25rem,3vw,3rem)}
.credits .dt{white-space:nowrap}

/* ---- prev / next side tabs (magazine-viewer style) ---- */
.mt-tabs{position:fixed;inset:50% 0 auto 0;z-index:45;pointer-events:none;height:0}
.mt-tab{position:absolute;top:0;transform:translateY(-50%);pointer-events:auto;display:flex;align-items:center;gap:.6rem;height:2.25rem;padding:0 .7rem;
  background:#111111;color:#fcfcfa;font-family:var(--font);font-size:.6875rem;font-weight:600;letter-spacing:.08em;white-space:nowrap;
  transition:background-color .25s ease,padding .35s var(--ease-2)}
.mt-prev{left:0;border-radius:0 2px 2px 0}
.mt-next{right:0;border-radius:2px 0 0 2px}
.mt-n{font-variant-numeric:tabular-nums}
.mt-t{max-width:0;overflow:hidden;opacity:0;font-weight:500;letter-spacing:.04em;text-transform:none;transition:max-width .45s var(--ease-2),opacity .25s ease}
@media (hover:hover){
  .mt-tab:hover,.mt-tab:focus-visible{background:#2a2a28;padding:0 1rem}
  .mt-tab:hover .mt-t,.mt-tab:focus-visible .mt-t{max-width:24rem;opacity:1}
}
.mt-tab:focus-visible{outline:2px solid #fcfcfa;outline-offset:-4px}
@media (max-width:760px){
  .mt-tabs{inset:auto 0 0 0;height:auto;display:flex;justify-content:space-between;padding:0 .75rem max(.6rem,env(safe-area-inset-bottom));pointer-events:none}
  .mt-tab{position:static;transform:none;height:2.1rem;border-radius:2px}
  .mt-tab .mt-t{display:none}
  .mt-next{margin-left:auto}
  body.has-mt-tabs .footer{padding-bottom:calc(1.2rem + 3.2rem)}
}
@media (prefers-reduced-motion:reduce){.mt-tab,.mt-t{transition:none}}
.b-s4.has-side{align-items:start}
.b-s4.has-side .m-cols{grid-column:3/13}
@media (max-width:760px){.b-s4.has-side .m-side{margin:0 0 1.5rem}}
.b-s4 .m-cols.narrow{grid-column:3/10}
.b-s4.has-side .m-cols.narrow{grid-column:3/10}
@media (max-width:1100px){.b-s4 .m-cols.narrow,.b-s4.has-side .m-cols.narrow{grid-column:1/13}}
@media (max-width:760px){.b-s5 .m-mid{order:-1}.b-s5 .m-side{order:0}.b-s5 .m-cols{order:1}}
@media (max-width:760px){
  .mag-b .m-left-dark{padding-bottom:1.5rem;gap:1.25rem}
  .mag-b .m-left-dark .m-hl{color:#fcfcfa;padding:0 var(--m)}
  .mag-b .m-left-dark .m-hl .credits{color:rgba(252,252,250,.78)}
}
/* word count + reading time under the date */
.credits.wc{margin-top:.4rem}
.mag-b .m-hl .credits.wc{margin-top:.4rem}