@font-face{font-family:"Glacial Indifference";src:url(https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url(https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* The Travel Bus Co. Journal: shared styles for the journal index and article pages.
   Warm paper and deep bus-teal alternate; Bodoni for display, Glacial Indifference for everything else. */
:root{
  /* Palette taken from the logo: bus teal, sunset deepened to rust, apricot sky, mint sea, sand road, wordmark grey */
  --paper:#FFF8EF;
  --deep:#05666C;
  --teal:#039BA2;
  --coral:#B4552D;
  --coral-ink:#9C4524;
  --apricot:#FDC686;
  --mint:#9AD4C8;
  --mint-lt:#E1F2EE;
  --sand:#C9AF94;
  --ink:#2F2F2F;
  --cream:#FFF8EF;
  --muted:#606060;
  --muted-lt:#B5DCD6;
  --rule:#EBDCC8;
  --display:"Libre Bodoni","Bauer Bodoni","Bodoni 72",Didot,Georgia,serif;
  --sans:"Glacial Indifference","Century Gothic",Futura,"Trebuchet MS",Arial,sans-serif;
  --gut:clamp(16px,5vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--coral-ink);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px;margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font:700 12px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--coral-ink);margin:0}
.dark{background:var(--deep);color:var(--cream)}
.dark .eyebrow{color:var(--apricot)}
.ph{position:relative;background:linear-gradient(var(--ang,170deg),var(--a),var(--b));background-size:cover;background-position:center}

/* top bar */
.top{border-bottom:1px solid var(--rule);background:var(--paper)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;font:700 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;text-decoration:none;color:var(--deep)}
.brand img{width:48px;height:48px;border-radius:50%}
.nav{display:flex;gap:28px;font:700 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--muted)}
.nav a[aria-current]{color:var(--coral-ink);border-bottom:1px solid var(--coral-ink);padding-bottom:4px}

/* index: an editorial spread, not a card grid */
.intro{padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,96px);align-items:end}
.intro h1{font:400 clamp(56px,8.4vw,116px)/.9 var(--display);letter-spacing:-.02em;color:var(--deep);margin:.3em 0 0}
.intro h1 .cap{display:block;font:700 clamp(13px,1.2vw,16px)/1 var(--sans);letter-spacing:.5em;text-transform:uppercase;margin-bottom:.35em}
.intro h1 em{color:var(--coral);display:block}
.intro .lede{font:italic 400 clamp(20px,2.2vw,26px)/1.35 var(--display);margin:.9em 0 0;max-width:30ch}
/* the contents list scrolls inside itself once there are more editions than fit */
.contents ol{list-style:none;margin:14px 0 0;padding:0 6px 0 0;max-height:300px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.contents.overflow ol{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.contents.overflow.end ol{-webkit-mask-image:none;mask-image:none}
.contents .hint{margin:10px 0 0;font:700 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.contents a,.contents .soon{display:grid;grid-template-columns:4.4em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .25s}
.contents a:hover{padding-left:6px}
.contents .soon .t{color:var(--muted)}
.contents .soon .w{color:var(--coral-ink)}
.contents .n{font:italic 400 18px/1 var(--display);color:var(--coral-ink);white-space:nowrap}
.contents .t{font:400 19px/1.2 var(--display);color:var(--deep)}
.contents .w{font:700 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);text-align:right;max-width:12em}
.filters{display:flex;flex-wrap:wrap;gap:10px;padding-block:24px 0;border-top:1px solid var(--rule)}
.filters span{font:700 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);align-self:center;margin-right:8px}
.chip{font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--deep);background:none;border:1px solid var(--rule);padding:11px 16px;border-radius:99px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--coral-ink)}
.chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--cream)}

.post{text-decoration:none;display:block;position:relative}
.post .fig{overflow:hidden}
.post .fig .ph{height:100%}
.post .ph{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.post:hover .ph{transform:scale(1.035)}
.post .ed{font:700 11px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--coral-ink);margin:0}
.post h2,.post h3{font:400 clamp(26px,2.4vw,34px)/1.12 var(--display);letter-spacing:-.005em;color:var(--deep);margin:.45em 0 0;text-wrap:balance}
.post p.ex{margin:.7em 0 0;font-size:16px;line-height:1.6;max-width:42ch}
.post .tags{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font:400 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.post .go{display:inline-block;margin-top:20px;font:700 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--deep);padding-bottom:5px;border-bottom:1px solid var(--coral-ink);transition:letter-spacing .3s}
.post:hover .go{letter-spacing:.38em}
.post .no{position:absolute;font:italic 400 clamp(48px,6vw,92px)/.8 var(--display);letter-spacing:-.02em;white-space:nowrap;color:var(--coral);pointer-events:none;z-index:3}
.post .side{position:absolute;writing-mode:vertical-rl;transform:rotate(180deg);font:700 11px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.flag{position:absolute;left:20px;top:20px;font:700 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--deep);background:var(--paper);padding:9px 12px}
/* coming soon: shown on the landing page, not clickable */
.post.soon{cursor:default}
.post.soon:hover .ph{transform:none}
.post.soon .go{border-bottom-color:transparent}
.post.soon:hover .go{letter-spacing:.3em}

/* lead: image bleeds off the right edge, the title overlaps it */
.ix-lead-wrap{padding-block:clamp(36px,5vw,64px) 0;padding-left:max(var(--gut),calc((100% - 1180px)/2 + var(--gut)))}
.ix-lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.ix-lead .fig{grid-column:4/-1;grid-row:1;height:clamp(420px,52vw,700px)}
.ix-lead .copy{grid-column:1/7;grid-row:1;position:relative;z-index:2;background:var(--paper);padding:clamp(28px,3vw,44px) clamp(28px,3.4vw,52px) 0 0}
.ix-lead h2{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.01em}
.post h2 em,.post h3 em{color:var(--coral)}
.post .pre{display:block;font:700 13px/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px}
.ix-lead p.ex{font-size:18px}
.ix-lead .no{display:none}

/* pair: one tall, one small, staggered */
.ix-pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);padding-block:clamp(72px,10vw,150px) clamp(96px,12vw,180px)}
.ix-tall{grid-column:2/7}
.ix-tall .fig{aspect-ratio:4/5}
.ix-tall .no{right:-.5em;top:-.45em}
.ix-tall .side{left:calc(-1 * clamp(28px,4vw,56px));top:0}
.ix-tall .copy{margin-top:28px;padding-right:12%}
.ix-small{grid-column:8/13;margin-top:clamp(120px,18vw,260px)}
.ix-small .fig{aspect-ratio:1/1;width:82%;margin-left:auto}
.ix-small .no{left:-.2em;top:-.45em}
.ix-small .flag{left:auto;right:20px}
.ix-small .copy{margin-top:28px;padding-left:18%}

/* band: full-width deep teal, image bleeds left and breaks out above the band */
.ix-band{padding-left:0;padding-right:max(var(--gut),calc((100% - 1180px)/2 + var(--gut)))}
.ix-wide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:clamp(16px,2vw,28px);align-items:end;color:var(--cream);padding-block:clamp(40px,5vw,72px) clamp(56px,8vw,104px)}
.ix-wide .fig{grid-column:1/8;grid-row:1/3;align-self:start;height:clamp(360px,42vw,580px);margin-top:calc(-1 * (clamp(56px,7vw,110px) + clamp(40px,5vw,72px)))}
.ix-wide .copy{grid-column:9/-1;grid-row:2;padding-bottom:6px}
.ix-wide h3{color:var(--cream);font-size:clamp(30px,3vw,42px);line-height:1.1}
.ix-wide h3 em{color:var(--apricot)}
.ix-wide .ed{color:var(--apricot)}
.ix-wide .tags{color:var(--muted-lt)}
.ix-wide .go{color:var(--cream);border-bottom-color:var(--apricot)}
.ix-wide .no{position:static;grid-column:9/-1;grid-row:1;align-self:end;margin-bottom:18px;color:var(--apricot)}
.ix-wide .side{display:none}

.reveal .ix .post{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal .ix .post.in{opacity:1;transform:none}

.empty{padding-block:48px;font:italic 400 22px/1.3 var(--display);color:var(--muted)}
.plan{padding-block:clamp(64px,9vw,120px);background:var(--mint-lt);color:var(--deep)}
.plan .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:end}
.plan h2{font:400 clamp(32px,3.8vw,52px)/1.1 var(--display);letter-spacing:-.01em;margin:.4em 0 0}
.plan h2 em{font-weight:400;color:var(--coral-ink)}
.contact{display:flex;flex-direction:column;gap:6px;font:400 17px/1.5 var(--sans);letter-spacing:.04em}
.contact span{user-select:all}
.contact a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;transition:opacity .2s}
.contact a:hover{opacity:.7}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-block:clamp(40px,6vw,72px)}
.grid .ph{aspect-ratio:4/5}
.grid .post .ed{margin-top:20px}
.grid .post h3{font-size:26px}

/* article: headings mix a bold caps line, regular serif and an italic accent; sizes stay modest */
.ahero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(28px,4vw,64px);padding-left:max(var(--gut),calc((100% - 1180px)/2 + var(--gut)));min-height:clamp(560px,82vh,820px)}
.ahero .txt{padding-block:56px}
.ahero .kick{font:700 11px/1.6 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--coral-ink);margin:0}
.ahero h1{font:400 clamp(40px,4.6vw,66px)/1.06 var(--display);letter-spacing:-.01em;color:var(--deep);margin:22px 0 0;text-wrap:balance}
.ahero h1 em{color:var(--coral)}
.ahero .dek{font:italic 400 clamp(18px,1.6vw,21px)/1.5 var(--display);color:var(--ink);margin:22px 0 0;max-width:34ch}
.ahero .back{display:inline-block;margin-top:34px;font:700 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;text-decoration:none;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:6px}
.ahero .art{position:relative;align-self:stretch}
.ahero .main{position:absolute;inset:0 0 64px 0}
.ahero .second{position:absolute;left:-14%;bottom:0;width:34%;aspect-ratio:4/5;outline:10px solid var(--paper)}

.opener{padding-block:clamp(64px,8vw,104px) clamp(40px,5vw,64px)}
.opener .body p:first-child{font:400 clamp(20px,1.9vw,24px)/1.55 var(--display);color:var(--deep)}
.opener .body p:first-child::first-letter{float:left;font:400 3.3em/.86 var(--display);color:var(--coral);margin:.04em .1em 0 0}
.body p{margin:0 0 1.15em;line-height:1.75}
.body p:last-child{margin-bottom:0}

.ch{padding-block:clamp(64px,8vw,112px)}
.ch-k{display:flex;gap:14px;align-items:baseline;margin:0;font:700 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--coral-ink)}
.ch-k .num{font:italic 400 18px/1 var(--display);letter-spacing:0;text-transform:none}
.ch-h{margin:18px 0 0;color:var(--deep);font-weight:400}
.ch-h .cap{display:block;font:700 13px/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.ch-h em{display:block;font:italic 400 clamp(32px,3.6vw,50px)/1.08 var(--display);letter-spacing:-.01em;margin-top:6px;text-wrap:balance}
.ch-h.place .pl{display:block;font:600 clamp(30px,3.4vw,46px)/1.05 var(--display);letter-spacing:.16em;text-transform:uppercase}
.ch-h.title .pl{display:block;font:400 clamp(30px,3.4vw,46px)/1.1 var(--display);letter-spacing:-.005em;text-wrap:balance}
.ch-h.title .it,.ch-h.place .it{display:block;font:italic 400 clamp(19px,1.8vw,24px)/1.3 var(--display);letter-spacing:0;color:var(--coral);margin-top:10px}
.ch .body{margin-top:28px}
.pull{font:italic 400 clamp(22px,2.2vw,28px)/1.35 var(--display)!important;color:var(--coral);margin:1.4em 0!important;padding-left:22px;position:relative}
.pull::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;background:currentColor;opacity:.5}
.stay{margin-top:2em;padding-top:1.1em;border-top:1px solid var(--rule)}
.stay b{display:block;font:700 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.5em}
.stay strong{display:block;font:500 18px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--deep);margin-bottom:.3em}
.stay p{margin:0}
.stat{display:flex;align-items:baseline;gap:12px;margin:28px 0 0}
.stat .fig{font:italic 400 clamp(40px,4vw,56px)/1 var(--display);color:var(--coral)}
.stat .fig span{padding:0 .05em}
.stat .u{font:700 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}

/* collage: text left, a tall frame with a smaller one overlapping its corner */
.collage .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:start}
.collage .txt{grid-column:1/7}
.collage .art{grid-column:8/-1;position:relative;padding-bottom:18%}
.collage .big{aspect-ratio:4/5}
.collage .small{position:absolute;width:52%;aspect-ratio:1/1;left:-18%;bottom:0;outline:10px solid var(--paper)}
.collage .stat{position:absolute;right:0;bottom:0;margin:0}

/* bleed: full-width frame, then heading beside two columns of text */
.bleed{padding-top:0}
.bleed .wide{height:clamp(300px,46vw,620px)}
.bleed .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.bleed .side{grid-column:1/5}
.bleed .body{grid-column:6/-1;margin-top:0}
.body.one{max-width:62ch}
.trio .body.one{margin-inline:auto}
.cols2{columns:2 260px;column-gap:clamp(28px,3vw,44px)}
.cols2 p,.cols2 .stay{break-inside:avoid}

/* trio: heading centred, three frames at staggered heights */
.trio .thead{text-align:center;max-width:720px;margin:0 auto}
.trio .thead .ch-k{justify-content:center}
.trio .strip{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:clamp(12px,1.6vw,22px);align-items:start;margin-top:clamp(36px,4vw,56px)}
.trio .t1{aspect-ratio:3/4}
.trio .t2{aspect-ratio:1/1;margin-top:18%}
.trio .t3{aspect-ratio:4/5;margin-top:6%}
.trio .body{max-width:900px;margin:clamp(36px,4vw,56px) auto 0}
.trio > .wrap > .stat{justify-content:center}

/* band: deep teal, image bleeds off the left edge */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;padding-right:max(var(--gut),calc((100% - 1180px)/2 + var(--gut)))}
.band .half{position:relative;min-height:100%}
.band .tall{position:absolute;inset:0}
.band .txt{padding:clamp(64px,8vw,112px) 0 clamp(64px,8vw,112px) clamp(32px,5vw,80px)}
.band .ch-k,.band .pull,.band .stat .fig,.band .ch-h .it{color:var(--apricot)}
.band .ch-h{color:var(--cream)}
.band .stay{border-top-color:rgba(253,198,134,.35)}
.band .stay b{color:var(--apricot)}
.band .stay strong{color:var(--cream)}
.band .stat .u{color:var(--muted-lt)}
.band .inset{width:52%;aspect-ratio:3/2;margin:40px 0 0 auto}

.bookby{padding-block:clamp(44px,6vw,72px);text-align:center;background:var(--mint-lt)}
.bookby p:not(.eyebrow){font:italic 400 clamp(21px,2.2vw,27px)/1.4 var(--display);color:var(--deep);max-width:34ch;margin:14px auto 0;text-wrap:balance}
.note{padding-block:clamp(64px,8vw,104px);text-align:center}
.note .q{font:italic 400 clamp(24px,2.6vw,32px)/1.35 var(--display);color:var(--apricot);margin:22px auto 0;max-width:26ch;text-wrap:balance}
.note .body{text-align:left;columns:2 280px;column-gap:44px;margin-top:40px;padding-top:36px;border-top:1px solid rgba(253,198,134,.35)}
.note .body p{break-inside:avoid}
.note .sig{font:italic 400 36px/1 var(--display);color:var(--apricot);margin-top:36px}
.closer{padding-block:clamp(64px,8vw,112px);text-align:center;background:var(--paper)}
.closer h2{font:400 clamp(30px,3.4vw,46px)/1.12 var(--display);color:var(--deep);margin:18px 0 0;text-wrap:balance}
.closer h2 em{color:var(--coral)}
.closer .body{max-width:60ch;margin:24px auto 0}
.closer .cta{font:italic 400 clamp(19px,1.9vw,23px)/1.45 var(--display);color:var(--coral-ink);max-width:36ch;margin:32px auto 0}
.closer .contact{align-items:center;margin-top:28px;color:var(--deep)}
.more{padding-block:clamp(56px,8vw,96px);border-top:1px solid var(--rule)}
.more .grid{padding-block:28px 0}

footer{background:var(--deep);color:var(--muted-lt);padding-block:28px;border-top:1px solid rgba(253,198,134,.2)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font:400 11px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase}
footer .b{display:flex;align-items:center;gap:10px;color:var(--cream)}
footer img{height:28px;width:28px;border-radius:50%}
footer a{text-decoration:none}

@media (max-width:860px){
  .intro,.plan .wrap{grid-template-columns:minmax(0,1fr)}
  .ahero{grid-template-columns:minmax(0,1fr);padding-left:0;min-height:0}
  .ahero .art{order:-1;height:clamp(340px,92vw,560px);margin-bottom:40px}
  .ahero .main{inset:0 0 0 0}
  .ahero .second{left:auto;right:var(--gut);bottom:-40px;width:36%}
  .ahero .txt{padding:8px var(--gut) 0}
  .collage .txt,.collage .art{grid-column:1/-1}
  .collage .art{margin:44px calc(-1 * var(--gut)) 0;padding-bottom:0}
  .collage .big{width:78%;margin-left:auto}
  .collage .small{left:0;bottom:-40px;width:42%}
  .collage .stat{position:static;margin-top:56px}
  .bleed .side,.bleed .body{grid-column:1/-1}
  .bleed .body{margin-top:28px}
  .trio .strip{grid-template-columns:1fr 1fr;margin-inline:calc(-1 * var(--gut))}
  .trio .t1{grid-column:1/-1;aspect-ratio:16/10}
  .trio .t2,.trio .t3{margin-top:0;aspect-ratio:1/1}
  .band{grid-template-columns:minmax(0,1fr);padding-right:0}
  .band .half{min-height:clamp(280px,70vw,460px)}
  .band .txt{padding:48px var(--gut) 64px}
  .band .inset{width:64%}
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ix-lead-wrap{padding-left:0}
  .ix-lead{grid-template-columns:minmax(0,1fr)}
  .ix-lead .fig{grid-column:1;grid-row:1;height:clamp(320px,80vw,520px)}
  .ix-lead .copy{grid-column:1;grid-row:2;margin:-72px var(--gut) 0 0;padding:28px 24px 0 var(--gut)}
  /* phone: images either bleed to a screen edge or fill the width, never float a few pixels off;
     the pair zig-zags (left edge, then right edge) while the text keeps one reading line */
  .ix-pair{grid-template-columns:minmax(0,1fr);padding-block:72px 112px}
  .ix-tall,.ix-small{grid-column:1}
  .ix-tall .fig{margin-left:calc(-1 * var(--gut));margin-right:20%}
  .ix-tall .no{right:6%;top:-.42em}
  .ix-tall .side{display:none}
  .ix-tall .copy{padding-right:0}
  .ix-small{margin-top:88px}
  .ix-small .fig{width:auto;margin-left:20%;margin-right:calc(-1 * var(--gut))}
  .ix-small .no{left:6%;top:-.42em}
  .ix-small .copy{padding-left:0}
  .ix-band{padding-right:0}
  .ix-wide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding-top:0}
  .ix-wide .fig{grid-column:1;grid-row:1;margin:0;height:clamp(260px,64vw,440px)}
  .ix-wide .no{position:absolute;right:var(--gut);top:calc(clamp(260px,64vw,440px) - .45em);margin:0}
  .ix-wide .copy{grid-column:1;grid-row:2;padding:44px var(--gut) 0}
  .ix-wide .side{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .ahero h1{font-size:34px}
  .ch-h em{font-size:30px}
  .ch-h.place .pl{font-size:28px;letter-spacing:.12em}
  .intro h1{font-size:54px}
  .ix-lead h2{font-size:36px}
  .closer h2,.plan h2{font-size:28px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid .ph{aspect-ratio:4/3}
  .nav{gap:16px}
  .contents .w{display:none}
  .contents ol{max-height:236px}
  .contents a,.contents .soon{grid-template-columns:4.4em minmax(0,1fr)}
}

/* photo framing modifiers (set per photo in build.py) */
.collage .big.land{aspect-ratio:1/1}
.band .inset.lg{width:84%;aspect-ratio:1/1}
.trio .strip.duo{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:end}
.trio .strip.duo .t1{aspect-ratio:3/4}
.trio .strip.duo .t2{aspect-ratio:4/3;margin:0 0 10%}
@media (max-width:860px){
  .band .inset.lg{width:100%}
  .trio .strip.duo{grid-template-columns:minmax(0,1fr)}
  .trio .strip.duo .t1{grid-column:auto;aspect-ratio:4/5;margin-right:18%}
  .trio .strip.duo .t2{aspect-ratio:4/3;margin:-24% 0 0 30%;outline:8px solid var(--paper);position:relative}
}
.credits a{color:inherit}

/* photo focal points: --pos on desktop, --mpos on phones */
.ph{background-position:var(--pos,center)}
@media (max-width:860px){.ph{background-position:var(--mpos,var(--pos,center))}}