/* Eldritch archive: wood, torn oxblood, bone paper, old brass.
   Chaos stays in the headline layer. Reading areas stay straight and calm. */
@font-face { font-family:"Pirata One"; src:url(../fonts/pirata-one-latin-400-normal.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Open Sans Condensed"; font-weight:700; src:url(../fonts/open-sans-condensed-latin-700-normal.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Old Standard TT"; src:url(../fonts/old-standard-tt-latin-400-normal.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Old Standard TT"; font-style:italic; src:url(../fonts/old-standard-tt-latin-400-italic.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Old Standard TT"; font-weight:700; src:url(../fonts/old-standard-tt-latin-700-normal.woff2) format("woff2"); font-display:swap; }

:root { --brass:#c8a45c; --ox:#3f0c0c; --bone:#ecdfc6; --dim:#cdb99b; --panel:#080605; --ink:#141210; --rule:#55504a; --dark-ox:#7a1410;
  --condensed:"Open Sans Condensed","Arial Narrow",sans-serif; --display:"Pirata One",Georgia,serif; }
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-padding-top:1rem; }
html, body { overflow-x:clip; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#0b0806 url(../img/wood.jpg) center top/1400px auto;
  color:var(--bone); font:18px/1.6 "Old Standard TT",Georgia,serif; }
main { flex:1; width:100%; }
a { color:var(--brass); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:#c8a45c88; text-underline-offset:.24em;
  transition:color .15s, text-decoration-color .15s, background-color .15s; }
a:hover { color:var(--bone); text-decoration-color:currentColor; }
::selection { background:var(--brass); color:#100803; }
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; z-index:9; background:#000; color:var(--bone); padding:.5rem .75rem; }

/* Top bar and footer */
.top { background:#000; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.6rem 2rem; border-bottom:1px solid #c8a45c55; }
.mark { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
.mark img { height:42px; width:auto; }
.links { display:flex; gap:1.75rem; }
.links a { position:relative; min-height:44px; display:inline-flex; align-items:center; color:var(--bone); text-decoration:none;
  font:700 1.02rem var(--condensed); text-transform:uppercase; letter-spacing:.09em; }
.links a::after { content:""; position:absolute; left:0; right:0; bottom:.45rem; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .18s; }
.links a:hover { color:var(--brass); }
.links a:hover::after, .links a[aria-current]::after { transform:scaleX(1); }
.menu { display:none; min-height:44px; padding:.4rem 1rem; background:transparent; color:var(--bone); border:1px solid var(--bone); cursor:pointer;
  font:700 1rem var(--condensed); text-transform:uppercase; letter-spacing:.09em; }
.menu:hover { background:var(--bone); color:#100803; }
.foot { background:#000; border-top:1px solid #c8a45c55; padding:1.5rem 2rem; margin-top:3rem; font-size:.9rem; color:var(--dim); }
.foot div { max-width:66rem; margin:auto; }
.foot p { margin:0 0 .4rem; }

/* Torn oxblood headline band */
.bill { position:relative; isolation:isolate; max-width:66rem; margin:2.25rem auto 0; padding:1.75rem 2.25rem 1.9rem; }
.bill::before { content:""; position:absolute; inset:0; z-index:-1; transform:rotate(-1.1deg); clip-path:polygon(0.00% 0.36%,2.17% 0.96%,4.35% 0.84%,6.52% 1.22%,8.70% 0.07%,10.87% 0.92%,13.04% 0.10%,15.22% 0.46%,17.39% 0.81%,19.57% 1.22%,21.74% 0.92%,23.91% 0.72%,26.09% 0.78%,28.26% 1.04%,30.43% 1.38%,32.61% 0.57%,34.78% 0.48%,36.96% 0.56%,39.13% 0.87%,41.30% 0.29%,43.48% 0.43%,45.65% 1.19%,47.83% 0.12%,50.00% 0.80%,52.17% 0.72%,54.35% 0.05%,56.52% 0.57%,58.70% 1.02%,60.87% 1.04%,63.04% 0.90%,65.22% 1.04%,67.39% 0.96%,69.57% 0.34%,71.74% 1.20%,73.91% 0.87%,76.09% 0.47%,78.26% 0.05%,80.43% 0.69%,82.61% 0.86%,84.78% 0.23%,86.96% 0.23%,89.13% 0.97%,91.30% 1.25%,93.48% 0.06%,95.65% 0.75%,97.83% 0.24%,100.00% 1.02%,99.72% 6.67%,99.66% 13.33%,99.35% 20.00%,99.36% 26.67%,99.58% 33.33%,99.93% 40.00%,99.60% 46.67%,99.85% 53.33%,99.82% 60.00%,99.80% 66.67%,99.48% 73.33%,99.82% 80.00%,99.95% 86.67%,99.47% 93.33%,100.00% 99.87%,97.83% 99.78%,95.65% 99.88%,93.48% 98.85%,91.30% 98.64%,89.13% 99.71%,86.96% 98.92%,84.78% 99.52%,82.61% 98.78%,80.43% 99.28%,78.26% 98.60%,76.09% 98.91%,73.91% 98.56%,71.74% 99.21%,69.57% 99.72%,67.39% 98.78%,65.22% 98.93%,63.04% 98.61%,60.87% 99.65%,58.70% 98.62%,56.52% 98.78%,54.35% 98.63%,52.17% 98.59%,50.00% 99.11%,47.83% 99.42%,45.65% 99.66%,43.48% 99.18%,41.30% 99.10%,39.13% 99.55%,36.96% 99.05%,34.78% 99.89%,32.61% 99.02%,30.43% 98.77%,28.26% 99.98%,26.09% 98.71%,23.91% 99.92%,21.74% 99.24%,19.57% 98.53%,17.39% 99.37%,15.22% 98.54%,13.04% 98.75%,10.87% 99.65%,8.70% 99.92%,6.52% 99.61%,4.35% 98.61%,2.17% 99.61%,0.00% 98.57%,0.64% 93.33%,0.30% 86.67%,0.09% 80.00%,0.50% 73.33%,0.40% 66.67%,0.29% 60.00%,0.19% 53.33%,0.37% 46.67%,0.50% 40.00%,0.60% 33.33%,0.54% 26.67%,0.23% 20.00%,0.31% 13.33%,0.69% 6.67%);
  background:var(--ox) url(../img/grunge.jpg) center/cover; background-blend-mode:multiply; }
.bill::after { content:""; position:absolute; z-index:-1; left:-1rem; top:-1.5rem; width:24rem; height:13rem; opacity:.55;
  background:url(../img/splat-bone.svg) center/contain no-repeat; }
.bill h1 { font:400 clamp(4.25rem,12.5vw,10rem)/.86 var(--display); margin:0 0 0 -.05em; color:var(--bone); transform:rotate(-2deg); transform-origin:left bottom; }
.bill h1.long { font-size:clamp(3rem,7.5vw,6rem); line-height:.95; }
.facts { position:relative; display:flex; flex-wrap:wrap; gap:.1rem 2rem; width:fit-content; max-width:100%; margin:1.4rem 0 0; padding:.45rem .9rem;
  background:var(--brass); color:#100803; font:700 1.2rem/1.25 var(--condensed); text-transform:uppercase; letter-spacing:.03em;
  transform:rotate(-1deg); clip-path:polygon(0.00% 1.43%,4.17% 5.48%,8.33% 3.67%,12.50% 5.56%,16.67% 0.30%,20.83% 5.13%,25.00% 2.17%,29.17% 0.32%,33.33% 0.41%,37.50% 5.90%,41.67% 5.84%,45.83% 3.19%,50.00% 2.71%,54.17% 3.29%,58.33% 3.63%,62.50% 4.66%,66.67% 4.68%,70.83% 2.51%,75.00% 2.84%,79.17% 5.11%,83.33% 2.17%,87.50% 2.89%,91.67% 0.55%,95.83% 4.49%,100.00% 5.01%,99.75% 8.33%,99.87% 16.67%,99.31% 25.00%,99.91% 33.33%,99.68% 41.67%,99.68% 50.00%,99.92% 58.33%,99.92% 66.67%,99.56% 75.00%,99.46% 83.33%,99.94% 91.67%,100.00% 96.37%,95.83% 94.44%,91.67% 98.41%,87.50% 96.46%,83.33% 97.88%,79.17% 98.12%,75.00% 96.93%,70.83% 95.73%,66.67% 98.14%,62.50% 99.05%,58.33% 94.76%,54.17% 96.25%,50.00% 97.72%,45.83% 94.02%,41.67% 97.09%,37.50% 98.93%,33.33% 98.48%,29.17% 94.48%,25.00% 96.47%,20.83% 97.04%,16.67% 98.95%,12.50% 97.40%,8.33% 98.93%,4.17% 99.99%,0.00% 95.85%,0.53% 91.67%,0.10% 83.33%,0.38% 75.00%,0.52% 66.67%,0.62% 58.33%,0.26% 50.00%,0.28% 41.67%,0.45% 33.33%,0.58% 25.00%,0.35% 16.67%,0.34% 8.33%); }
.intro { position:relative; max-width:36rem; margin:1rem 0 0; font-size:1.1rem; }
.guide-link { position:relative; margin:1rem 0 0; }
.guide-link a { display:inline-flex; align-items:center; min-height:44px; padding:.35rem 1rem; background:var(--bone); color:#100803; text-decoration:none;
  font:700 1.05rem/1.2 var(--condensed); text-transform:uppercase; letter-spacing:.05em; }
.guide-link a::after { content:"\2192"; margin-left:.55rem; }
.guide-link a:hover { background:var(--brass); color:#100803; }
.guide-link a:focus-visible { outline-color:var(--bone); outline-offset:3px; }
.bill.has-side { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 2rem; align-items:start; }
.bill-side { margin:0; }
.front { margin-bottom:0; }
.front > div:first-child { align-self:center; }
.front .bill-side { width:24rem; margin:-3.5rem -1.5rem -6rem 0; transform:rotate(2.2deg); }
.front .bill-side img { border:.45rem solid var(--bone); }
.print { width:15rem; margin:-3rem -1rem -2.5rem 0; transform:rotate(2.4deg); }
.print img { border:.35rem solid var(--bone); }
.print.tall { width:12rem; }
.crest { width:9.5rem; padding:.7rem .7rem 1rem; background:var(--bone); transform:rotate(2deg); clip-path:polygon(0.00% 0.00%,5.56% 0.00%,11.11% 0.00%,16.67% 0.00%,22.22% 0.00%,27.78% 0.00%,33.33% 0.00%,38.89% 0.00%,44.44% 0.00%,50.00% 0.00%,55.56% 0.00%,61.11% 0.00%,66.67% 0.00%,72.22% 0.00%,77.78% 0.00%,83.33% 0.00%,88.89% 0.00%,94.44% 0.00%,100.00% 0.00%,100.00% 8.33%,100.00% 16.67%,100.00% 25.00%,100.00% 33.33%,100.00% 41.67%,100.00% 50.00%,100.00% 58.33%,100.00% 66.67%,100.00% 75.00%,100.00% 83.33%,100.00% 91.67%,100.00% 99.47%,94.44% 98.99%,88.89% 98.41%,83.33% 99.67%,77.78% 99.89%,72.22% 99.25%,66.67% 97.92%,61.11% 98.79%,55.56% 99.73%,50.00% 99.28%,44.44% 98.47%,38.89% 98.59%,33.33% 99.31%,27.78% 99.43%,22.22% 97.86%,16.67% 98.74%,11.11% 98.46%,5.56% 98.88%,0.00% 99.42%,0.00% 91.67%,0.00% 83.33%,0.00% 75.00%,0.00% 66.67%,0.00% 58.33%,0.00% 50.00%,0.00% 41.67%,0.00% 33.33%,0.00% 25.00%,0.00% 16.67%,0.00% 8.33%); }

/* Reading layer: straight and calm */
.wrap { max-width:66rem; margin:auto; padding:1.5rem 0 0; }
.wrap.after-front { padding-top:2rem; }
.panel { background:var(--panel); padding:.75rem 2rem 1.75rem; margin:0 0 1.5rem; }
.panel > :last-child { margin-bottom:0; }
.panel > p, .panel > h3 { max-width:44rem; }
.map-link { display:block; }
p { margin:0 0 1rem; }
.grp { display:inline-block; font:400 2.4rem/1 var(--display); background:var(--bone); color:#100803; margin:1rem 0 .85rem -.6rem;
  padding:.2rem .9rem .3rem; transform:rotate(-1.2deg); clip-path:polygon(0.00% 1.20%,5.56% 0.47%,11.11% 4.91%,16.67% 0.01%,22.22% 1.91%,27.78% 1.76%,33.33% 1.12%,38.89% 4.43%,44.44% 0.43%,50.00% 0.49%,55.56% 4.40%,61.11% 4.50%,66.67% 2.03%,72.22% 2.26%,77.78% 0.31%,83.33% 3.55%,88.89% 0.43%,94.44% 2.24%,100.00% 0.36%,99.56% 8.33%,99.48% 16.67%,99.57% 25.00%,99.70% 33.33%,99.38% 41.67%,99.95% 50.00%,99.83% 58.33%,99.74% 66.67%,99.64% 75.00%,99.48% 83.33%,99.52% 91.67%,100.00% 96.84%,94.44% 97.91%,88.89% 99.80%,83.33% 95.83%,77.78% 97.16%,72.22% 95.35%,66.67% 98.41%,61.11% 97.15%,55.56% 99.69%,50.00% 95.58%,44.44% 95.91%,38.89% 99.54%,33.33% 96.84%,27.78% 95.88%,22.22% 97.41%,16.67% 99.22%,11.11% 96.66%,5.56% 99.45%,0.00% 95.12%,0.49% 91.67%,0.61% 83.33%,0.63% 75.00%,0.25% 66.67%,0.34% 58.33%,0.12% 50.00%,0.22% 41.67%,0.07% 33.33%,0.39% 25.00%,0.55% 16.67%,0.20% 8.33%); }
h3 { font:700 1.32rem/1.2 var(--condensed); text-transform:uppercase; letter-spacing:.025em; margin:1.6rem 0 .35rem; color:var(--bone); }
ul, ol { margin:0 0 1rem; padding-left:1.3rem; }
li { margin-bottom:.35rem; }
li::marker { color:var(--brass); }
.note { color:var(--dim); font-style:italic; }
.lede { font-size:1.15rem; }
figure { margin:0; }
figcaption { margin-top:.4rem; color:var(--dim); font-size:.9rem; line-height:1.4; }
.split { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:2rem; align-items:start; }
.split > aside { display:grid; gap:1.25rem; }
.below-photo { margin-top:2.25rem; }
.wrap > .split > aside { margin-bottom:1.5rem; }
.split.flush { margin-bottom:0; }
.paper h3 { margin:0 0 .5rem; font:400 1.9rem/1 var(--display); text-transform:none; letter-spacing:0; }

/* Bone paper */
.paper { background:var(--bone); color:var(--ink); padding:1.1rem 1.25rem 1.9rem; clip-path:polygon(0.00% 0.00%,3.33% 0.00%,6.67% 0.00%,10.00% 0.00%,13.33% 0.00%,16.67% 0.00%,20.00% 0.00%,23.33% 0.00%,26.67% 0.00%,30.00% 0.00%,33.33% 0.00%,36.67% 0.00%,40.00% 0.00%,43.33% 0.00%,46.67% 0.00%,50.00% 0.00%,53.33% 0.00%,56.67% 0.00%,60.00% 0.00%,63.33% 0.00%,66.67% 0.00%,70.00% 0.00%,73.33% 0.00%,76.67% 0.00%,80.00% 0.00%,83.33% 0.00%,86.67% 0.00%,90.00% 0.00%,93.33% 0.00%,96.67% 0.00%,100.00% 0.00%,100.00% 8.33%,100.00% 16.67%,100.00% 25.00%,100.00% 33.33%,100.00% 41.67%,100.00% 50.00%,100.00% 58.33%,100.00% 66.67%,100.00% 75.00%,100.00% 83.33%,100.00% 91.67%,100.00% 99.47%,96.67% 98.99%,93.33% 98.41%,90.00% 99.67%,86.67% 99.89%,83.33% 99.25%,80.00% 97.92%,76.67% 98.79%,73.33% 99.73%,70.00% 99.28%,66.67% 98.47%,63.33% 98.59%,60.00% 99.31%,56.67% 99.43%,53.33% 97.86%,50.00% 98.74%,46.67% 98.46%,43.33% 98.88%,40.00% 99.42%,36.67% 99.62%,33.33% 98.88%,30.00% 98.11%,26.67% 99.75%,23.33% 99.61%,20.00% 98.82%,16.67% 99.98%,13.33% 98.30%,10.00% 98.71%,6.67% 97.84%,3.33% 99.65%,0.00% 97.84%,0.00% 91.67%,0.00% 83.33%,0.00% 75.00%,0.00% 66.67%,0.00% 58.33%,0.00% 50.00%,0.00% 41.67%,0.00% 33.33%,0.00% 25.00%,0.00% 16.67%,0.00% 8.33%); }
.paper a { color:var(--dark-ox); text-decoration-color:#7a141088; }
.paper a:hover { color:#000; }
.paper h2, .paper h3 { color:var(--ink); }
.paper h2 { font:400 1.9rem/1 var(--display); margin:0 0 .6rem; }
.paper dl { margin:0; }
.paper dt { font:700 .92rem/1.3 var(--condensed); text-transform:uppercase; letter-spacing:.05em; color:#55483a; }
.paper dd { margin:0 0 .6rem; line-height:1.35; }
.paper dd:last-child { margin-bottom:0; }
.paper ul { margin-bottom:0; }
.paper li::marker { color:var(--dark-ox); }

/* Home */
.doors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-bottom:1.5rem; }
.door { display:flex; flex-direction:column; background:var(--panel); }
.door h2 { margin:0; padding:.9rem 1.25rem 0; font:400 2.2rem/1.05 var(--display); }
.door h2 a { color:var(--bone); text-decoration:none; }
.door h2 a:hover { color:var(--brass); }
.door p { margin:.3rem 0 0; padding:0 1.25rem 1.25rem; }
.ten { list-style:none; margin:0 0 .5rem; padding:0; }
.ten li { display:grid; grid-template-columns:3.25rem minmax(0,1fr) 10.5rem minmax(0,14rem); gap:.75rem; align-items:baseline; margin:0; padding:.5rem 0; border-top:1px solid var(--rule); }
.ten .num { font:400 1.5rem/1 var(--display); color:var(--brass); }
.ten a { color:var(--bone); text-decoration:none; font:700 1.2rem/1.2 var(--condensed); text-transform:uppercase; letter-spacing:.02em; }
.ten a:hover { color:var(--brass); }
.ten span { font-size:1rem; line-height:1.3; }
.ten .where { color:var(--dim); }
.gallery { columns:3; column-gap:.7rem; }
.gallery figure { break-inside:avoid; margin-bottom:.7rem; }

/* Chronicle */
.jump { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; margin:0; padding:0; list-style:none; }
.jump li { margin:0; }
.jump a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center; font:400 1.5rem var(--display); text-decoration:none; border-bottom:2px solid transparent; }
.jump a:hover { color:var(--bone); border-bottom-color:var(--brass); }
.ev { display:grid; grid-template-columns:12rem minmax(0,1fr) 16rem; gap:0 2rem; padding:1.5rem 0; border-top:1px solid var(--rule); align-items:start; }
.ev:target { outline:0; }
.ev:target .ev-num { color:var(--bone); }
.ev.nofig { grid-template-columns:12rem minmax(0,1fr); }
.ev-num { font:400 3.2rem/1 var(--display); color:var(--brass); margin:0; }
.ev h3 { font:400 2.3rem/1.05 var(--display); text-transform:none; letter-spacing:0; margin:0 0 .5rem; }
.ev dl { margin:.4rem 0 0; font-size:.95rem; line-height:1.35; }
.ev dt { font:700 .85rem/1.3 var(--condensed); text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-top:.5rem; }
.ev dd { margin:0; }
.ev .sigils { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.ev .sigils img { width:100%; }
.ev .paper figcaption { color:#55483a; }

/* Rules */
.rulebook { display:grid; grid-template-columns:13.5rem minmax(0,1fr); gap:1.25rem; align-items:start; }
.toc { position:sticky; top:1rem; background:var(--panel); padding:.9rem 1.1rem 1rem; }
.toc h2 { font:700 1rem var(--condensed); text-transform:uppercase; letter-spacing:.09em; margin:0 0 .4rem; color:var(--dim); }
.toc ol { list-style:none; padding:0; margin:0; }
.toc li { margin:0; break-inside:avoid; }
.toc a { display:flex; align-items:center; min-height:34px; line-height:1.2; font-size:1rem; color:var(--bone); text-decoration:none; }
.toc a:hover { color:var(--brass); }
.chain { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; padding:0; margin:1rem 0 1.25rem; counter-reset:stage; }
.chain li { position:relative; margin:0; padding:.6rem .75rem .7rem; border:1px solid var(--rule); border-top:3px solid var(--brass); font-size:.97rem; line-height:1.35; }
.chain strong { display:block; font:700 1.15rem/1.2 var(--condensed); text-transform:uppercase; letter-spacing:.02em; margin-bottom:.15rem; }
table { width:100%; border-collapse:collapse; margin:.5rem 0 1rem; }
caption { text-align:left; font:700 1rem var(--condensed); text-transform:uppercase; letter-spacing:.05em; color:var(--dim); padding-bottom:.25rem; }
th, td { text-align:left; vertical-align:top; padding:.5rem .8rem .5rem 0; border-bottom:1px solid var(--rule); line-height:1.4; }
th { font:700 1.02rem var(--condensed); text-transform:uppercase; }
tbody th { text-transform:none; font-size:1.08rem; letter-spacing:.01em; }
th:last-child, td:last-child { padding-right:0; }
.scroll { overflow-x:auto; }
.example { margin:0 0 1rem; padding:.7rem 1rem; border-left:4px solid var(--brass); background:#c8a45c14; }
.example p:last-child { margin-bottom:0; }
.changed { margin:0 0 1rem; padding:.7rem 1rem; border-left:4px solid var(--dark-ox); background:#7a141033; }
.changed p:last-child { margin-bottom:0; }
.changed strong { font:700 .95rem var(--condensed); text-transform:uppercase; letter-spacing:.05em; color:var(--brass); }
.wide-fig { margin:1rem 0; }

@media (max-width:1120px) {
  .bill, .wrap { margin-left:1rem; margin-right:1rem; }
  .front .bill-side { width:20rem; margin-right:-.5rem; }
}
@media (max-width:900px) {
  .split, .rulebook, .doors { grid-template-columns:minmax(0,1fr); }
  .toc { position:static; }
  .toc ol { columns:2; column-gap:1rem; }
  .ev, .ev.nofig { grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .ev dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.1rem .75rem; }
  .ev dt { margin:0; }
  .ev figure { max-width:22rem; }
  .ten li { grid-template-columns:2.5rem minmax(0,1fr); gap:.05rem .6rem; }
  .ten .num { grid-row:1 / span 3; }
  .chain { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  body { font-size:17px; }
  .top, .foot { padding-left:1rem; padding-right:1rem; }
  .js .menu { display:inline-flex; align-items:center; }
  .top { flex-wrap:wrap; gap:0 1rem; }
  .links { flex-wrap:wrap; gap:0 1.1rem; }
  .js .links { display:none; width:100%; flex-direction:column; padding:.25rem 0 .5rem; }
  .js .links.open { display:flex; }
  .bill { margin:1rem .5rem 0; padding:1.25rem 1.1rem 1.5rem; }
  .bill::after { display:none; }
  .bill.has-side { grid-template-columns:minmax(0,1fr); }
  .front .bill-side { width:100%; max-width:24rem; margin:1.25rem auto 0; transform:none; }
  .crest { width:7.5rem; margin-top:1rem; }
  .print { display:none; }
  .below-photo { margin-top:0; }
  .wrap { margin:0 .5rem; padding-top:1rem; }
  .wrap.after-front { padding-top:1rem; }
  .panel { padding:.5rem 1rem 1.25rem; }
  .grp { font-size:2rem; margin-left:-.3rem; }
  .gallery { columns:2; }
  .door h2, .door p { padding-left:1rem; padding-right:1rem; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } html { scroll-behavior:auto; } }
@media print { body { background:#fff; color:#000; } .top, .foot, .toc, .bill::before, .bill::after { display:none; } .panel { background:none; } a { color:#000; } }