:root{--paper:#F7F3EA;--band:#EDE5D6;--ink:#2A211B;--stone:#6B5D4E;--line:#D8CDB9;--accent:#B5523A;--night:#14100D;
--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--paper)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.draft{background:var(--band);font-size:14px;color:var(--stone);text-align:center;padding:9px 22px}
header{text-align:center;padding:30px 0 0}
.mast{font:400 clamp(32px,8vw,52px)/1.1 var(--serif);letter-spacing:.02em}
.mast em{color:var(--accent);font-style:italic}
.tag{margin:4px 0 0;font-size:14px;color:var(--stone)}
nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin:18px 0 0;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--stone)}
nav a:hover,nav a.on{color:var(--ink)}
nav a.on{border-bottom:1px solid var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
.kicker{font-size:14px;color:var(--accent);margin:0}
.meta{font-size:13px;color:var(--stone);margin:6px 0 0}
.head{text-align:center;max-width:720px;margin:44px auto 0}
.head h1{font-size:clamp(34px,6.5vw,56px);line-height:1.1;margin:8px 0 14px}
.dek{font:400 21px/1.5 var(--serif);color:var(--stone);margin:0 0 12px}
.ph{background:#F1E2C2;border-bottom:1px dotted var(--accent);padding:0 3px}
.photo{background:var(--night);color:#A89880;font-size:13px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.hero{height:clamp(240px,50vw,500px);margin:30px 0 8px}
.cap{font-size:13px;color:var(--stone);margin:0 0 36px}
.layout{display:grid;gap:34px}
.facts{background:var(--band);padding:20px 22px;border-left:3px solid var(--accent);align-self:start}
.facts h2{font-size:24px;margin:0 0 10px}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.facts dt{color:var(--stone)}.facts dd{margin:0}
.body h2{font-size:29px;line-height:1.2;margin:38px 0 8px}
.body h2:first-child{margin-top:0}
.body p{margin:0 0 16px;max-width:62ch}
.disc{font-size:14px;color:var(--stone);border-top:1px solid var(--line);padding-top:16px;margin-top:34px}
.sec{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--line)}
.sec>h2{font-size:30px;margin:0 0 6px}
.sec>p.lede{color:var(--stone);margin:0 0 22px}
.grid{display:grid;gap:34px 26px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card .photo{aspect-ratio:4/3;margin-bottom:12px}
.card h3{font-size:25px;line-height:1.2;margin:4px 0 4px}
.card p{margin:0;color:var(--stone);font-size:15.5px}
.card:hover h3{color:var(--accent)}
.band{background:var(--band);padding:clamp(30px,5vw,48px) clamp(22px,5vw,56px) clamp(34px,5vw,52px);margin-top:56px}
/* Home: Dining and Travelling tabs */
.tabs{margin-top:64px;padding-top:0;border-top:0}
.tablist{position:relative;display:flex;gap:30px;border-bottom:1px solid var(--line);margin:0 0 14px}
.tablist button{background:none;border:0;padding:0 0 10px;margin:0;font:400 clamp(28px,4.4vw,36px)/1.2 var(--serif);color:var(--stone);cursor:pointer}
.tablist button:hover,.tablist button[aria-selected="true"]{color:var(--ink)}
.tabline{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:transform .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1)}
.tabview{overflow:hidden}
.tabtrack{display:flex;align-items:flex-start;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.panel{flex:0 0 100%;min-width:0}
.panel .lede{color:var(--stone);margin:0 0 22px}
.rail{display:flex;align-items:flex-start;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail .card{flex:0 0 auto;scroll-snap-align:start}
.rail .card{width:clamp(240px,30vw,310px)}
[hidden]{display:none!important}
/* Filters */
.filters{display:grid;gap:8px;margin:0 0 26px}
.fgroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;font-size:15px}
.fgroup>span{color:var(--stone);font-size:14px;min-width:86px}
.chip{background:none;border:0;border-bottom:1px solid transparent;padding:2px 0;font:inherit;color:var(--stone);cursor:pointer}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.fnote{font-size:13px;color:var(--stone);margin:2px 0 0}
.empty{font:italic 400 21px/1.5 var(--serif);color:var(--stone);margin:6px 0 30px}
.railnav{display:none;justify-content:flex-end;gap:10px;margin-top:4px}
.railnav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font:400 18px/1 var(--sans);cursor:pointer}
.railnav button:hover{border-color:var(--accent);color:var(--accent)}
@media(min-width:800px){.railnav{display:flex}}
@media(prefers-reduced-motion:reduce){.tabtrack,.tabline{transition:none}}
.list a{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.list a:hover span:first-child{color:var(--accent)}
.list span:last-child{color:var(--stone);font-size:14px;white-space:nowrap}
.pn{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:15px}
.pn a{max-width:46%}.pn small{display:block;color:var(--stone);font-size:13px}
.join{text-align:center;padding:60px 0 54px;background:var(--band);margin-top:56px}
.join h2{font-size:clamp(28px,5vw,38px);margin:0 0 8px}
.join p{margin:0 auto 20px;max-width:440px;color:var(--stone)}
.join form{display:flex;gap:12px;max-width:440px;margin:0 auto;flex-wrap:wrap;padding:0 22px}
.join input{flex:1 1 200px;font:inherit;padding:12px 2px;border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0}
.join button{font:500 16px var(--sans);padding:12px 26px;border:0;background:var(--accent);color:#fff;cursor:pointer}
.join button:hover{background:#9A4430}
.note{min-height:1.5em;font-size:15px;color:var(--accent);margin-top:12px}
footer{padding:26px 0 36px;font-size:14px;color:var(--stone);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.prose h2{font-size:30px;margin:34px 0 8px}.prose p{max-width:62ch;margin:0 0 16px}
body{overflow-x:clip}
/* Hover: the photo slowly grows inside its frame */
.photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .photo img,.card:focus-visible .photo img,a.zoom:hover .photo img,a.zoom:focus-visible .photo img{transform:scale(1.06)}
/* Story: one shell, photos placed differently inside each story */
.col{max-width:680px;margin:0 auto}
.col .body p{max-width:none}
.facts.row{background:none;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:0 0 44px}
.facts.row h2{font:400 14px/1.4 var(--sans);color:var(--accent);margin:0 0 12px}
.facts.row dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 28px}
.facts.row dt{font-size:13px}
.body .intro::first-letter{float:left;font:400 4.2em/.8 var(--serif);margin:.08em .12em 0 0}
.body .s{display:flow-root}
.body .s h2{margin:38px 0 8px}
.body>.s:first-child h2{margin-top:0}
.fig{margin:32px 0}
.fig .photo{aspect-ratio:3/2}
.fig .cap{margin:8px 0 0}
.fig.left .photo,.fig.right .photo,.fig.offset .photo,.fig.pair .photo{aspect-ratio:4/5}
.fig .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.disc{clear:both}
@media(min-width:600px){.fig.left{float:left;width:46%;margin:6px 30px 16px 0}.fig.right{float:right;width:46%;margin:6px 0 16px 30px}
.fig.offset{display:grid;grid-template-columns:1fr 1.7fr;gap:24px;align-items:end}.fig.offset .cap{order:-1;margin:0}}
@media(min-width:800px){.layout{grid-template-columns:250px 1fr;gap:54px}.layout>.facts{position:sticky;top:24px}}
@media(min-width:900px){.fig.left{margin-left:-50px}.fig.right{margin-right:-50px}.fig.wide{margin-left:-100px;margin-right:-100px}.fig.pair{margin-left:-40px;margin-right:-40px}.fig.offset{margin-right:-50px}}
@media(min-width:1100px){.fig.left{margin-left:-90px}.fig.right{margin-right:-90px}.fig.wide{margin-left:-160px;margin-right:-160px}.fig.pair{margin-left:-60px;margin-right:-60px}.fig.offset{margin-right:-90px}}
@media(prefers-reduced-motion:reduce){.photo img{transition:none}.card:hover .photo img,.card:focus-visible .photo img,a.zoom:hover .photo img,a.zoom:focus-visible .photo img{transform:none}}
/* Real photos in stories show whole, at their own shape (no cropping) */
.photo.has-img{aspect-ratio:auto!important;height:auto!important;padding:0;display:block;background:var(--night)}
.photo.has-img img{height:auto}
.fig .two{align-items:start}
/* Big photos: full text width, or the same size shifted left or right */
@media(min-width:900px){.fig.big-left{margin-left:-100px;margin-right:100px}.fig.big-right{margin-left:100px;margin-right:-100px}.fig.big-right .cap{text-align:right}}
@media(min-width:1100px){.fig.big-left{margin-left:-160px;margin-right:160px}.fig.big-right{margin-left:160px;margin-right:-160px}}
/* Display crop set in a story file ("crop 4:5 right"); the photo file is untouched */
.photo.cropped{height:auto!important;padding:0;display:block;background:var(--night)}
.photo.cropped img{width:100%;height:100%;object-fit:cover}
/* Space under the top photo when it has no caption */
.hero + .col{margin-top:36px}
/* Links inside stories and the details box */
.facts dd a,.body a,.prose a,.disc a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.facts dd a:hover,.body a:hover,.prose a:hover,.disc a:hover{color:#9A4430}
/* Front page link under the featured story, and space above the footer */
.readon{margin:18px 0 0;font-size:15px}
.readon a{color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px}
.readon a::after{content:" \2192"}
.readon a:hover{color:#9A4430}
footer.wrap{border-top:1px solid var(--line);margin-top:64px}
.join+footer.wrap{border-top:0;margin-top:0}