/* Appelquist Architects — site styles, v4 (11 Nov 2026), the studio sheet on screen.
   v4: the wordmark centred at the top of every page with the navigation beneath (as on every A-A sheet);
   a 13-column grid with 16/420 margins; the page head (eyebrow, light capital title, subtitle, half-point rule);
   the sequence tones for fields; the contents strip; six columns in tone; the charcoal ground for the one quote.
   Earlier note (v3):
   The Studio Companion's graphic standard, on screen: the system in the background, the work in the foreground.
   Type: Helvetica Neue LT Std where installed (licensed desktop font, not served); Helvetica Neue on Apple devices;
   Inter (SIL OFL, self-hosted) as the served fallback. Weights carry the roles:
   200 large numerals · 300 text and titles · 400 eyebrows and the foot line · 500 names. */
@font-face{font-family:"AA Grotesk Fallback";src:url(/assets/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AA Grotesk Fallback";src:url(/assets/inter-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
 /* tone: rank and sequence from the Companion, sheet 2 */
 --ink:#231F20;--r2:#56504B;--r3:#A49D95;--r4:#CBC6BF;--r5:#E2DFDA;--r6:#F2F0ED;--stone:#BCB7B1;
 --s1:#F6F6F5;--s2:#F0EEED;--s3:#E8E6E4;--s4:#DFDDDA;--s5:#D6D3CF;--s6:#CCC8C3;--s7:#C1BCB7;--charcoal:#322E2B;
 --bg:#fff;--mute:var(--r2);--line:var(--r5);--rule:var(--r3);
 --sidebar-w:0px;--m:max(18px,3.81vw);--pad:var(--m);--gut:max(10px,.476vw);
 --font:"Helvetica Neue LT Std","Helvetica Neue",Helvetica,"AA Grotesk Fallback",Arial,sans-serif;
 --track-eyebrow:.22em;--track-title:.12em;--track-foot:.14em}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:300;font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%}
strong,b{font-weight:500}
.skip{position:absolute;left:-999px;top:8px;background:var(--bg);padding:6px 10px;z-index:400}
.skip:focus{left:8px}
/* the eyebrow: small capitals, tracked — the label of every section, as on the studio sheet */
.eb,.sec,.nav,.foot,.facts dt,.pg .head h3,.contact dt,.filters,.arch .no,.cap .k{font-weight:400;font-size:11px;letter-spacing:var(--track-eyebrow);text-transform:uppercase}
/* the mast: wordmark centred, navigation beneath in tracked capitals, a half-point rule — the top of every A-A sheet */
.mast{position:relative;padding:30px var(--m) 0;text-align:center;background:var(--bg)}
.mast .logo{display:inline-block;width:164px;margin:0}
.mast .logo img{width:100%;height:auto}
.mast button{display:none}
.navwrap{margin-top:22px;border-bottom:.5px solid var(--rule)}
.nav ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 34px;padding:0 0 14px}
.nav a{display:inline-block;padding-bottom:2px;border-bottom:.5px solid transparent;transition:border-color .15s}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a.active{border-bottom-color:var(--ink)}
.main{margin:0;padding:0 var(--m);min-height:60vh}
.main>.sitefoot{margin-left:calc(-1*var(--m));margin-right:calc(-1*var(--m))}
/* the 13-column grid of the A3 sheet: 28 mm columns, 2 mm gutter */
.g13{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));column-gap:var(--gut)}
/* the page head: eyebrow, title in light capitals, a half-point rule */
.phd{margin:0 0 40px;padding-bottom:16px;border-bottom:.5px solid var(--ink)}
.phd .eb{color:var(--ink);margin-bottom:10px}
.phd h1,.page h1{font-weight:300;font-size:30px;line-height:1.15;letter-spacing:var(--track-title);text-transform:uppercase;margin:0}
.phd .sub{margin-top:8px;font-size:15px;color:var(--ink);max-width:40em}
.page>.phd h1{margin:0;padding:0;border:0}
/* the site foot: the screen standard — stone ground, the wordmark in white, the two cities */
.sitefoot{margin-top:120px;padding:64px var(--m) 36px;background:var(--stone);color:#fff;display:grid;justify-items:center;text-align:center;gap:22px}
.sitefoot img{width:180px;height:auto}
.sitefoot .line,.sitefoot .small{font-weight:400;font-size:10px;letter-spacing:var(--track-foot);text-transform:uppercase;line-height:2;color:var(--ink)}
.sitefoot .small{color:var(--ink);opacity:.75}
.sitefoot .cities{display:flex;gap:56px;font-size:13px;line-height:1.5;color:var(--ink)}
.sitefoot .cities span{text-align:center}
.sitefoot a{border-bottom:.5px solid rgba(35,31,32,.45)}
/* home: one photograph, whole, filling the first screen */
.lead{height:calc(100vh - 120px);height:calc(100dvh - 120px);position:relative;padding:24px 0 64px}
.lead .im{display:block;height:100%;width:100%}
.lead img{width:100%;height:100%;object-fit:contain;object-position:center top}
.lead .tag{position:absolute;left:0;bottom:18px;font-weight:400;font-size:11px;letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.lead .cap{position:absolute;right:0;bottom:16px;text-align:right;font-size:13px;line-height:1.55}
.lead .cap a{font-weight:500}
.lead .cap span{display:block;color:var(--mute)}
.home2{padding-top:80px}
.home2 .intro{font-size:20px;line-height:1.5;max-width:30em;margin:0 0 96px}
.home2 .intro a{color:var(--mute);white-space:nowrap}
.home2 .intro a:hover{color:var(--ink)}
.sec{color:var(--ink);margin:0 0 22px;padding-bottom:10px;border-bottom:.5px solid var(--rule)}
.home2 .idx{margin-bottom:84px}
.home2 .now{list-style:none;margin:-48px 0 104px}
.home2 .now li{display:grid;grid-template-columns:300px 1fr;gap:24px;padding:11px 0;border-bottom:.5px solid var(--line);font-size:14px}
.home2 .now li a,.home2 .now li>:first-child{font-weight:500}
.home2 .now li span{color:var(--mute)}
.home2 .more{font-size:14px;line-height:2.1;margin:-24px 0 40px}
.home2 .more a{border-bottom:.5px solid var(--rule)}
.home2 .more a:hover{border-bottom-color:var(--ink)}
/* the project card: photograph and signature drawing side by side, one height, neither cropped */
.idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:68px 48px;align-items:start}
.idx a{display:block;min-width:0}
.idx .pr{display:flex;gap:18px;align-items:flex-end;height:var(--h,clamp(170px,13vw,270px))}
.idx .ph,.idx .dr{height:100%;min-width:0}
.idx .ph{flex:0 0 auto;aspect-ratio:var(--r);max-width:100%}
.idx .dr{flex:0 1 auto;aspect-ratio:1/1;width:auto}
.idx .dr:empty{display:none}
.idx img{width:100%;height:100%;object-fit:contain;object-position:left bottom;transition:opacity .3s}
.idx a:hover .ph img{opacity:.88}
.idx .t{margin-top:12px;font-size:13px;line-height:1.55}
.idx .t>div{font-weight:500}
.idx .t span{display:block;color:var(--mute);font-weight:300}
.idx .t span.by{color:var(--ink)}
.idx .t span.st{color:var(--ink);font-weight:400;font-size:10px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;margin-top:4px}
.idx.big{grid-template-columns:1fr}
.idx.big .pr{--h:clamp(240px,26vw,480px)}
/* pages */
.page{padding:44px 0 0;max-width:none;min-height:60vh}
.page.wide{max-width:none}
.page>h1{margin-bottom:40px;padding-bottom:18px;border-bottom:.5px solid var(--rule)}
.page h2{font-weight:400;font-size:11px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;margin:56px 0 16px}
.page p{font-size:15px;line-height:1.65;max-width:36em;margin-bottom:14px}
.page .lede a,.page p a[href^=mailto]{white-space:nowrap;border-bottom:.5px solid var(--rule)}
.page .lede{font-size:19px;line-height:1.5;max-width:32em;margin-bottom:28px}
.page .note{font-size:13px;color:var(--mute);margin:-4px 0 16px}
.portrait{float:right;width:240px;margin:6px 0 28px 48px}
.portrait img{width:100%;height:auto}
.portrait .cap{font-size:12px;color:var(--mute);margin-top:8px}
.proc{clear:both;max-width:820px;margin:28px 0 20px}
.proc figure{margin:0 0 26px}
.proc img{width:100%;height:auto}
.proc figcaption,.pg figcaption{font-size:12px;line-height:1.45;color:var(--mute);margin-top:8px}
.proc .row{display:flex;gap:18px;align-items:flex-start}
.proc .row figure{flex:var(--r,1) 1 0;min-width:0}
.list{list-style:none;font-size:15px;line-height:2;max-width:760px}
.list li{display:grid;grid-template-columns:220px 1fr;gap:16px;border-bottom:.5px solid var(--line)}
.m{color:var(--mute)}
.grid-list{list-style:none;font-size:14px;max-width:820px}
.grid-list li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:9px 0;border-bottom:.5px solid var(--line)}
.contact{display:grid;grid-template-columns:170px 1fr;gap:18px 32px;font-size:15px;line-height:1.6;max-width:680px;margin-top:8px}
.contact dt{color:var(--ink);padding-top:3px}
.contact a{border-bottom:.5px solid var(--rule)}
.contact a:hover{border-bottom-color:var(--ink)}
.filters{margin:-16px 0 44px;display:flex;flex-wrap:wrap;gap:6px 24px}
.filters a{color:var(--mute);border-bottom:.5px solid transparent}
.filters a.active{color:var(--ink);border-bottom-color:var(--ink)}
.filters a:hover{color:var(--ink)}
/* the approach: numbered sections, one large numeral each */
.ap{max-width:880px}
.ap .sx{display:grid;grid-template-columns:96px 1fr;gap:0 24px;padding:28px 0;border-top:.5px solid var(--line)}
.ap .no{font-weight:200;font-size:40px;line-height:1;color:var(--ink)}
.ap h2{margin:0 0 10px}
.ap blockquote{margin:48px 0 0;padding:28px 0;border-top:.5px solid var(--rule);border-bottom:.5px solid var(--rule);font-size:22px;line-height:1.45;max-width:30em}
.ap blockquote cite{display:block;margin-top:12px;font-style:normal;font-weight:400;font-size:11px;letter-spacing:var(--track-eyebrow);text-transform:uppercase}
/* project page */
.pg{padding:30px 0 0;max-width:none}
.pg .hero{margin:0 0 48px}
.pg .hero img{width:100%;height:auto;max-height:86vh;object-fit:contain;object-position:left top}
.pg .head{display:grid;grid-template-columns:minmax(180px,250px) minmax(220px,300px) minmax(0,1fr);gap:24px 48px;margin-bottom:76px;font-size:13px;line-height:1.55;align-items:start;padding-top:18px;border-top:.5px solid var(--rule)}
.pg .head h1{font-weight:300;font-size:22px;line-height:1.2;letter-spacing:var(--track-title);text-transform:uppercase;margin-top:16px}
.pg .head .mt span{display:block;color:var(--mute);margin-top:4px}
.pg .head .mark{width:120px;height:72px;object-fit:contain;object-position:left bottom}
.pg .facts{display:grid;grid-template-columns:88px 1fr;gap:6px 12px;font-size:13px;margin:0}
.pg .facts dt{font-size:10px;padding-top:2px}
.pg .tx{max-width:60ch}
.pg .tx p{font-size:15px;line-height:1.65;margin-bottom:12px}
.pg .head h3{margin:22px 0 6px}
.pg .head ul{list-style:none;font-size:13px;line-height:1.75}
.walk figure{margin:0;min-width:0}
.walk img{width:100%;height:auto}
.walk .row{display:flex;gap:28px;align-items:flex-start;margin-bottom:56px}
.walk .row figure{flex:var(--r) 1 0}
.walk .w{margin-bottom:56px}
.walk .w img{max-height:88vh;width:auto;max-width:100%}
.walk .dw img{background:#fff}
.pg .credit{font-size:13px;color:var(--mute);margin-top:56px;max-width:60ch}
.pg .credit a{color:var(--ink);border-bottom:.5px solid var(--rule)}
.pg .cycle{margin-top:64px;padding-top:16px;border-top:.5px solid var(--rule);display:flex;justify-content:space-between;gap:16px;font-size:13px}
.pg .cycle a:hover{color:var(--mute)}
/* archive: numbered rows */
.arch{list-style:none;border-top:.5px solid var(--ink);max-width:1180px;margin-bottom:64px;counter-reset:n}
.arch li{display:grid;grid-template-columns:48px minmax(0,1fr) 220px 250px 150px;gap:16px;padding:10px 0;border-bottom:.5px solid var(--line);font-size:13px;counter-increment:n}
.arch li::before{content:counter(n,decimal-leading-zero);font-weight:200;color:var(--mute)}
.arch li a{border-bottom:.5px solid var(--rule);font-weight:500}
.arch li a:hover{border-bottom-color:var(--ink)}
.arch .r{text-align:right;white-space:nowrap}
/* journal */
.ig{margin:-8px 0 36px;font-size:15px}
.ig a{border-bottom:.5px solid var(--ink)}
.post{max-width:36em;padding:28px 0;border-top:.5px solid var(--line)}
.post .d{font-size:11px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.post h2{margin:0 0 14px;font-size:20px;font-weight:300;letter-spacing:0;text-transform:none}
.fade{animation:vf .4s ease both}
@keyframes vf{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}}

@media (max-width:1100px){.pg .head{grid-template-columns:minmax(160px,220px) 1fr}.pg .head .tx{grid-column:1 / -1}}
@media (max-width:900px){
 :root{--sidebar-w:0px;--pad:18px}
 .nav{font-size:15px;line-height:1.3}
 .nav li{margin-bottom:16px}
 .page{padding:28px 0 0}
 .pg{padding:0}
 .pg .hero{margin:0 0 24px}
 .pg .head{grid-template-columns:1fr;gap:20px;margin-bottom:40px;border-top:0}
 .walk .row{display:block;margin-bottom:0}
 .walk .row figure,.walk .w{margin-bottom:28px}
 .walk .w img{max-height:none;width:100%}
 .lead{height:auto;padding:0}
 .lead .im{height:auto}
 .lead img{height:auto}
 .lead .tag,.lead .cap{position:static;text-align:left;padding:12px 0 0}
 .lead .cap{padding-top:4px}
 .home2{padding-top:40px}
 .home2 .intro{font-size:18px;margin-bottom:56px}
 .phd h1,.page h1{font-size:23px}
 .portrait{float:none;width:180px;margin:0 0 24px}
 .proc .row{flex-wrap:wrap}
 .list li{grid-template-columns:1fr;gap:0;padding:8px 0}
 .idx{grid-template-columns:1fr;gap:44px}
 .idx .pr{height:auto;display:block}
 .idx .ph{height:auto;width:100%}
 .idx .ph img{height:auto}
 .idx .dr{display:none}
 .home2 .now li{grid-template-columns:1fr;gap:2px}
 .arch li{grid-template-columns:36px 1fr auto;gap:8px}
 .arch li span:nth-child(2),.arch li span:nth-child(3){display:none}
 .contact{grid-template-columns:1fr;gap:2px}
 .contact dd{margin-bottom:16px}
 .grid-list li{grid-template-columns:76px 1fr}
 .ap .sx{grid-template-columns:56px 1fr}
 .ap .no{font-size:28px}
}

/* the contents strip: one tile per part of the site, in the sequence tones (the cover of every A-A presentation) */
.strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gut);margin:0 0 72px}
.strip a{display:flex;flex-direction:column;justify-content:space-between;min-height:118px;padding:12px 12px 14px;transition:background .2s}
.strip .no{font-weight:200;font-size:30px;line-height:1}
.strip .tg{font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.strip a:hover{background:var(--r4)!important}
.s1{background:var(--s1)}.s2{background:var(--s2)}.s3{background:var(--s3)}.s4{background:var(--s4)}.s5{background:var(--s5)}.s6{background:var(--s6)}.s7{background:var(--s7)}
/* now in the studio: numbered rows */
.home2 .now{counter-reset:n}
.home2 .now li{grid-template-columns:48px 300px 1fr;counter-increment:n}
.home2 .now li::before{content:counter(n,decimal-leading-zero);font-weight:200;color:var(--mute)}
/* the approach: six columns in tone, then the one quote on the charcoal ground (special application) */
.ap{max-width:none}
.ap .lede,.ap>p{max-width:36em}
.tones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gut);margin:40px 0 0}
.tc{padding:16px 16px 24px;min-height:340px}
.tc .no{font-weight:200;font-size:40px;line-height:1;margin-bottom:22px}
.tc h2{margin:0 0 10px!important;padding-top:10px;border-top:.5px solid var(--ink);font-weight:500!important;font-size:12px!important;letter-spacing:.04em!important;text-transform:none!important}
.tc p{font-size:13px!important;line-height:1.55!important;margin:0!important}
.ap blockquote.dark{background:var(--charcoal);color:#fff;border:0;max-width:none;margin:var(--gut) 0 0;padding:44px 16px 40px;font-size:24px}
.ap blockquote.dark cite{color:#fff}
@media (max-width:1100px){.tones{grid-template-columns:repeat(3,minmax(0,1fr))}.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
 .mast{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;position:sticky;top:0;z-index:300;border-bottom:.5px solid var(--line);text-align:left}
 .mast .logo{width:120px}
 .mast button{display:block;background:none;border:0;font:inherit;font-weight:400;font-size:11px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink);padding:10px 0 10px 14px;cursor:pointer}
 .navwrap{position:fixed;inset:58px 0 0 0;margin:0;background:var(--bg);border:0;padding:28px 18px;transform:translateY(-110%);transition:transform .3s ease;visibility:hidden;z-index:250}
 .navwrap.open{transform:none;visibility:visible}
 .nav ul{display:block}
 .nav li{margin-bottom:16px}
 .nav{font-size:15px}
 .main{padding:0 18px}
 .lead{height:auto;padding:12px 0 0}
 .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
 .strip a{min-height:84px}
 .tones{grid-template-columns:1fr}
 .tc{min-height:0}
 .home2 .now li{grid-template-columns:36px 1fr}
 .home2 .now li span{grid-column:2}
 .sitefoot .cities{flex-direction:column;gap:12px}
}

/* wayfinding: every project carries its number in its series, as every sheet does */
.idx .t{display:grid;grid-template-columns:34px 1fr;gap:0 8px}
.idx .t .cn{font-weight:200;font-size:20px;line-height:1;color:var(--ink);padding-top:1px}
.idx .t:not(:has(.cn)){display:block}
.pg .head .eb{margin:14px 0 -8px}
.pg .cycle{display:grid;grid-template-columns:1fr auto 1fr}
.pg .cycle .up{font-weight:400;font-size:10px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;align-self:center}
.pg .cycle a[rel=next]{text-align:right}
/* numbered sections: 01, 02 … before each section label */
.num{counter-reset:sec}
.num>h2{counter-increment:sec;display:grid;grid-template-columns:44px 1fr;align-items:baseline;border-bottom:.5px solid var(--rule);padding-bottom:8px}
.num>h2::before{content:counter(sec,decimal-leading-zero);font-weight:200;font-size:20px;letter-spacing:0}
/* the foot's second navigation */
.sitefoot .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;font-weight:400;font-size:10px;letter-spacing:var(--track-foot);text-transform:uppercase;color:var(--ink)}
.sitefoot .fnav a{border-bottom:0}
.sitefoot .fnav a:hover{border-bottom:.5px solid var(--ink)}
@media (max-width:900px){.pg .cycle{grid-template-columns:1fr 1fr}.pg .cycle .up{display:none}}

/* ---- D0 / M8 review, 12 Nov 2026: present the work at its best ---------------------------------------- */
/* reading: text at a size people read without effort; ink, not grey, for anything longer than a caption */
body{font-size:16px;line-height:1.6}
.page p,.pg .tx p{font-size:16px;line-height:1.7}
.page .lede{font-size:21px;line-height:1.45}
.idx .t{font-size:14px}
.home2 .now li{font-size:15px}
.tc p{font-size:14px!important;line-height:1.6!important}
figcaption,.pg .hero figcaption{font-size:12.5px;line-height:1.5;color:var(--mute)}
/* the first photograph: the full width of the grid, a calm landscape frame, the label row beneath */
.lead{height:auto;padding:24px 0 0;display:grid;grid-template-columns:1fr auto;align-items:start;gap:10px 24px}
.lead .im{grid-column:1/-1;display:block}
.lead .im img{width:100%;height:min(76vh,58vw);object-fit:cover;object-position:center 58%}
.lead .tag,.lead .cap{position:static;padding:0}
.lead .cap{text-align:right}
/* the work: every card the same frame — photograph 3:2 beside its drawing — so the eye compares the work, not the crops */
.idx{gap:72px var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
/* the photograph alone sets the height; the drawing fits inside that height, whatever its proportion */
.idx .pr{display:grid;grid-template-columns:7fr 3fr;gap:14px;height:auto;align-items:stretch}
.idx .pr:has(.dr:empty){grid-template-columns:7fr 3fr}   /* no drawing: the photograph keeps the same size */
.idx .ph{aspect-ratio:3/2;height:auto;width:100%;max-width:none;align-self:start}
.idx .ph img{object-fit:cover;object-position:center}
.idx .dr{position:relative;height:auto;aspect-ratio:auto;width:100%;display:block;min-height:0}
.idx .dr img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center bottom}
.idx.big .pr{grid-template-columns:7fr 3fr}
/* project pages: the hero across the grid */
.pg .hero img{width:100%;height:auto;max-height:86vh;object-fit:cover;object-position:center}
/* the contents strip: quieter, so the photograph leads */
.strip a{min-height:92px}
.strip .no{font-size:26px}
@media (max-width:900px){
 .lead{grid-template-columns:1fr}
 .lead .im img{height:auto;aspect-ratio:4/3}
 .lead .cap{text-align:left}
 .strip{grid-template-columns:1fr;gap:0}
 .strip a{min-height:0;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:16px;padding:12px 12px}
 .strip .no{font-size:20px;width:30px}
 .idx{grid-template-columns:1fr;gap:48px}
 .idx .pr,.idx .pr:has(.dr:empty){grid-template-columns:1fr}
 .idx .dr{display:none}
 .idx .ph img{height:100%}
 body,.page p,.pg .tx p{font-size:16px}
}