/* Layout: fixed vertical rail on the left (desktop), top bar on phones. Utility strip (date/weather/wind/ferries) above a NYT-style package hero.
   Each section carries one colour from the Italian-era buildings of Rhodes; the rest of the page is white marble and ink. */
:root{
  --bg:#fbfbf9; --bg-2:#f2f1ec; --ink:#1b1f22; --ink-2:#5a6066; --rule:#dcdad3; --rail:#ffffff;
  --c-news:#1456d6; --c-report:#d7263d; --c-culture:#0e9f6e; --c-tourism:#0096c7; --c-sport:#ef9f10; --c-opinion:#ff5a36;
  --accent:#0096c7; --c-news-soft:#e6efff;
  --sea:#cfe8f5; --sand:#f3c768; --sand-2:#e2a93b; --landf:#ebe7de;
  --foot:#0f2f45; --foot-ink:#e9efec;
  --photo-a:linear-gradient(160deg,#5b8fa8,#1f4e79 70%,#13304b); --photo-b:linear-gradient(160deg,#cdbfa3,#8f7d5e 60%,#5a4c37); --photo-c:linear-gradient(160deg,#e3b98a,#c9733e 55%,#7a3b1a); --photo-d:linear-gradient(160deg,#9fb8b0,#4d7a6c 60%,#1d3a33); --photo-e:linear-gradient(160deg,#d9d5cc,#9a9890 60%,#5f5e58); --photo-f:linear-gradient(160deg,#7fb6c9,#2d7f99 60%,#0b4a5c);
  --display:'GFS Didot',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3','Segoe UI',Roboto,Arial,sans-serif;
  --railw:76px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121517; --bg-2:#1b1f22; --ink:#ebeae4; --ink-2:#a2a7aa; --rule:#2c3236; --rail:#171b1e;
  --c-news:#79a8ff; --c-report:#ff6b7d; --c-culture:#3fd39a; --c-tourism:#4fd0f0; --c-sport:#ffbf3c; --c-opinion:#ff8c6a;
  --c-news-soft:#172338; --sea:#0f2838; --sand:#c99a3a; --sand-2:#e2b24f; --landf:#232a2e; --foot:#0a1e2c; --foot-ink:#dbe5e0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121517; --bg-2:#1b1f22; --ink:#ebeae4; --ink-2:#a2a7aa; --rule:#2c3236; --rail:#171b1e;
  --c-news:#79a8ff; --c-report:#ff6b7d; --c-culture:#3fd39a; --c-tourism:#4fd0f0; --c-sport:#ffbf3c; --c-opinion:#ff8c6a;
  --c-news-soft:#172338; --sea:#0f2838; --sand:#c99a3a; --sand-2:#e2b24f; --landf:#232a2e; --foot:#0a1e2c; --foot-ink:#dbe5e0; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
a{color:inherit;text-decoration:none}
a:hover .t, a:hover.t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.08}
p{margin:0}
img{max-width:100%}
.k{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase}
.k i{font-style:normal;opacity:.55;margin:0 .35em}
.meta{font-size:13px;color:var(--ink-2)}
.meta b{font-weight:600;color:var(--ink)}

/* photos */
.img{position:relative;width:100%;max-width:100%;background:var(--photo-a);overflow:hidden}
.img.b{background:var(--photo-b)}.img.c{background:var(--photo-c)}.img.d{background:var(--photo-d)}.img.e{background:var(--photo-e)}.img.f{background:var(--photo-f)}
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.img::after{content:attr(data-cap);position:absolute;left:8px;bottom:6px;font:400 11px var(--body);color:#fff;opacity:.75;letter-spacing:.02em}
.img.r32{aspect-ratio:3/2}.img.r43{aspect-ratio:4/3}.img.r169{aspect-ratio:16/9}.img.sq{aspect-ratio:1}

/* rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--railw);background:var(--rail);border-right:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);gap:8px;z-index:20}
.rail .mark{font-family:var(--display);font-size:22px;line-height:1;color:var(--ink);text-align:center;letter-spacing:-.02em;margin-bottom:14px}
.rail .mark small{display:block;font:700 9px var(--body);letter-spacing:.2em;color:var(--accent);margin-top:3px}
.rail nav{display:flex;flex-direction:column;gap:2px;width:100%;padding:0 8px}
.rail nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border-radius:3px;font:600 10px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);position:relative}
.rail nav a .sw{width:22px;height:3px;border-radius:2px}
.rail nav a:hover,.rail nav a[aria-current]{background:var(--bg-2);color:var(--ink)}
.rail .islands{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:10px 4px;width:calc(100% - 16px);border-top:1px solid var(--rule)}
.rail .islands svg{width:36px;height:36px}
.rail .tools{display:flex;gap:10px;margin-top:10px}
.rail .tools a,.rail .tools button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:none;border:1px solid var(--rule);color:var(--ink-2);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px}
.rail .tools button:focus-visible,.topbar button:focus-visible,.nl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* mobile top bar */
.topbar{display:none;position:sticky;top:env(safe-area-inset-top,0px);background:var(--rail);border-bottom:1px solid var(--rule);z-index:20;margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px))) 0 calc(-1*max(16px,env(safe-area-inset-right,0px)));padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));align-items:center;gap:12px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--rail)}
.topbar .mark{font-family:var(--display);font-size:24px;line-height:1;flex:1}
.topbar .mark small{font:700 9px var(--body);letter-spacing:.2em;color:var(--accent);margin-left:8px}
.topbar .btn,.topbar button{background:none;border:1px solid var(--rule);color:var(--ink);padding:6px 10px;border-radius:3px;font:600 12px var(--body);cursor:pointer}
.mnav{display:none;overflow-x:auto;gap:4px;padding:8px 0;border-bottom:1px solid var(--rule);scrollbar-width:none}
.mnav a{flex:none;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule);border-radius:20px;color:var(--ink-2)}
.mnav a .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}

.page{margin-left:var(--railw);padding-left:40px;padding-right:24px}
.pagein{max-width:none}
@media (max-width:960px){.rail{display:none}.topbar{display:flex}.mnav{display:flex}.page{margin-left:0;padding-left:0}}

/* utility strip */
.strip{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink-2)}
.strip .date{font-family:var(--display);font-size:15px;color:var(--ink)}
.strip .wx{display:flex;gap:18px;flex-wrap:wrap}
.strip .wx span b{color:var(--ink);font-weight:600}
.strip .wind{display:inline-flex;align-items:center;gap:6px}
.strip .wind svg{width:14px;height:14px}
.strip .ferry{flex-basis:100%;margin-left:0}
.strip .ferry b{color:var(--ink);font-weight:600}
.strip .ferry em{font-style:normal;color:var(--accent);font-weight:600}
.strip .muted{color:var(--ink-2);font-weight:400}


/* hero package */
.hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:36px;padding:28px 0 36px;border-bottom:1px solid var(--rule)}
.hero .lead{display:grid;gap:14px;min-width:0}
.hero .lead h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.005em}
.hero .lead .dek{font-size:19px;line-height:1.45;color:var(--ink-2);max-width:62ch}
.hero .stack{display:grid;align-content:start;min-width:0}
.hero .stack a{display:grid;gap:6px;padding:16px 0;border-top:1px solid var(--rule)}
.hero .stack a:first-child{border-top:0;padding-top:0}
.hero .stack h3{font-size:22px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:22px}.hero .stack a:first-child{border-top:1px solid var(--rule);padding-top:16px}}

/* sections */
.sec{padding:36px 0;border-bottom:1px solid var(--rule)}
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;padding-top:14px;border-top:4px solid var(--sc,var(--rule))}
.sechead h2{font-size:30px;color:var(--sc,var(--ink))}
.sechead .sw{width:34px;height:4px;flex:none;align-self:center}
.sechead .more{margin-left:auto;font:600 13px var(--body);letter-spacing:.04em;white-space:nowrap;display:inline-block;padding:6px 0;min-height:24px}
.sechead .more:hover{text-decoration:underline}
.sechead .desc{font-size:14px;color:var(--ink-2)}
@media (max-width:700px){.sechead{flex-wrap:wrap}.sechead .desc{display:none}}

/* rhythm feed: 1 big + 4 small */
.rhythm{display:grid;gap:26px}
.rhythm .big{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center}
.rhythm .big .txt{display:grid;gap:12px}
.rhythm .big h3{font-size:clamp(26px,3vw,38px)}
.rhythm .big .dek{color:var(--ink-2);font-size:17px}
.rhythm .four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--rule);padding-top:20px}
.rhythm .four a{display:grid;gap:8px;align-content:start}
.rhythm .four h3{font-size:20px}
@media (max-width:860px){.rhythm .big{grid-template-columns:1fr}.rhythm .four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rhythm .four{grid-template-columns:1fr}}

/* photo section */
.photo3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.photo3 a{display:grid;gap:10px;align-content:start}
.photo3 h3{font-size:22px}
@media (max-width:860px){.photo3{grid-template-columns:1fr}}

/* text section */
.text2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.text2 a{display:grid;gap:5px;padding:14px 0;border-top:1px solid var(--rule)}
.text2 a:nth-child(-n+2){border-top:0;padding-top:0}
.text2 h3{font-size:21px}
.text2 .meta{font-size:12.5px}
@media (max-width:700px){.text2{grid-template-columns:1fr}.text2 a:nth-child(2){border-top:1px solid var(--rule);padding-top:14px}}

/* islands map */
.islands{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:start}
.map{background:var(--sea);border:1px solid var(--rule);padding:0;position:relative;overflow:hidden}
.map svg{width:100%;height:auto;display:block}
.land{fill:var(--landf);stroke:var(--rule);stroke-width:1}
.isl{fill:var(--sand);stroke:var(--sand-2);stroke-width:.8}
.isl.main{fill:var(--sand-2)}
.map .isl.main{cursor:pointer;transition:fill .15s}
.map .isl.main:hover,.map .isl.main.on{fill:var(--accent);stroke:var(--accent)}
.inset-box{fill:var(--sea);stroke:var(--ink-2);stroke-width:1}
.map .lbl{font:600 17px var(--body);fill:var(--ink);letter-spacing:.02em;pointer-events:none;paint-order:stroke;stroke:var(--sea);stroke-width:4px;stroke-linejoin:round}
.map .lbl.big{font-size:26px}
.map .sea{font:italic 400 20px var(--display);fill:var(--ink-2);opacity:.75;pointer-events:none}
.rail .islands svg,footer .fmap svg{aspect-ratio:1000/1242}
.islist h3{font-size:24px;margin-bottom:6px}
.islist .cur{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.islist ul{list-style:none;margin:14px 0 0;padding:0;display:grid}
.islist li a{display:grid;gap:3px;padding:12px 0;border-top:1px solid var(--rule)}
.islist li h4{font-size:19px}
.islist .all{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.islist .all a{font:600 12px var(--body);padding:7px 10px;border:1px solid var(--rule);border-radius:20px;color:var(--ink-2)}
.islist .all a.on{border-color:var(--accent);color:var(--accent)}
@media (max-width:860px){.islands{grid-template-columns:1fr}}

/* opinion */
.ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.op{background:color-mix(in srgb,var(--sc,var(--accent)) 11%,var(--bg));color:var(--sc,var(--accent));padding:22px 22px 0;display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:280px;position:relative;overflow:hidden}
.op .q{font-family:var(--display);font-size:64px;line-height:.5;color:var(--sc,var(--accent));height:26px}
.op h3,.op .by .n{color:var(--ink)}
.op h3{font-size:23px;line-height:1.15;padding-right:10px}
.op .by{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:8px}
.op .by .n{font:600 13px var(--body);padding-bottom:18px}
.op .by .n small{display:block;font-weight:400;color:var(--ink-2)}
.op .cut{width:96px;height:112px;flex:none;align-self:flex-end;margin-right:-6px}
.op .cut svg{width:100%;height:100%;display:block}
@media (max-width:860px){.ops{grid-template-columns:1fr}.op{min-height:0}}

/* newsletter */
.nl{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:center;background:var(--c-news-soft);padding:36px 34px;margin:40px 0 0;border-left:6px solid var(--accent)}
.nl h2{font-size:clamp(26px,3vw,36px)}
.nl .k{color:var(--accent);margin-bottom:8px}
.nl p{color:var(--ink-2);margin-top:10px;max-width:50ch}
.nl form{display:grid;grid-template-columns:1fr auto;gap:8px}
.nl input{font:16px var(--body);padding:12px 14px;border:1px solid var(--ink-2);background:var(--bg);color:var(--ink);min-width:0}
.nl button{font:600 15px var(--body);padding:12px 20px;background:var(--ink);color:var(--bg);border:0;cursor:pointer}
.nl .fine{font-size:12.5px;color:var(--ink-2);grid-column:1/-1}
.nl .ok{font-size:14px;color:var(--accent);font-weight:600;grid-column:1/-1}
@media (max-width:860px){.nl{grid-template-columns:1fr;padding:26px 20px}}

/* footer */
footer{background:var(--foot);color:var(--foot-ink);margin:48px calc(-1*max(16px,env(safe-area-inset-right,0px))) 0 calc(-1*(var(--railw) + 40px + max(16px,env(safe-area-inset-left,0px))));padding:48px max(16px,env(safe-area-inset-right,0px)) calc(36px + env(safe-area-inset-bottom,0px)) calc(var(--railw) + 40px + max(16px,env(safe-area-inset-left,0px)))}
@media (max-width:960px){footer{margin-left:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-left:max(16px,env(safe-area-inset-left,0px))}}
footer .in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(200px,300px);gap:32px 40px;align-items:start}
footer h4{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:15px}
footer ul a{display:inline-block;padding:4px 0;min-height:24px}
footer ul a:hover{text-decoration:underline}
footer .mark{font-family:var(--display);font-size:34px;line-height:1}
footer .mark small{display:block;font:400 13px var(--body);opacity:.75;margin-top:6px;letter-spacing:0}
footer .fmap svg{width:100%;height:auto;max-width:300px;display:block;margin-left:auto}
footer .fmap .isl{fill:#7f9c93}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:16px;font-size:12.5px;opacity:.75;display:flex;flex-wrap:wrap;gap:8px 24px}
@media (max-width:1100px){footer .in{grid-template-columns:repeat(3,minmax(0,1fr))}footer .fmap{display:none}}
@media (max-width:860px){footer .in{grid-template-columns:repeat(2,minmax(0,1fr))}footer .brand{grid-column:1/-1}}

/* ───────── article page ───────── */
.art{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;padding:28px 0 40px;align-items:start}
.art .side{position:sticky;top:calc(24px + env(safe-area-inset-top,0px));display:grid;gap:16px}
.art .side h1{font-size:clamp(30px,3.2vw,42px)}
.art .side .dek{color:var(--ink-2);font-size:17px;line-height:1.45}
.art .side .by{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.art .side .by .av{width:44px;height:44px;border-radius:50%;background:var(--photo-c);flex:none}
.art .side .by .n{font:600 14px var(--body)}
.art .side .by .n small{display:block;font-weight:400;color:var(--ink-2)}
.art .toc{display:grid;gap:6px;font-size:14px}
.art .toc .k{color:var(--ink-2);margin-bottom:4px}
.art .toc a{color:var(--ink-2);padding-left:12px;border-left:2px solid var(--rule)}
.art .toc a.on,.art .toc a:hover{color:var(--ink);border-color:var(--sc,var(--accent))}
.art .side .where{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-2)}
.art .side .where svg{width:56px;height:56px;flex:none}
.art .side .share{display:flex;gap:8px}
.art .side .share span{font:600 12px var(--body);border:1px solid var(--rule);padding:5px 10px;border-radius:20px;color:var(--ink-2)}
.art .body{min-width:0;max-width:780px}
.art .body > *{margin:0 0 1.25em}
.art .body p{font-size:19.5px;line-height:1.62}
.art .body p.first::first-letter{font-family:var(--display);font-size:4.2em;float:left;line-height:.8;padding:6px 10px 0 0;color:var(--sc,var(--accent))}
.art .body h2{font-size:28px;margin-top:1.6em;scroll-margin-top:24px}
.art .body figure{margin:1.8em 0}
.art .body figure.wide{width:calc(100% + 160px);max-width:calc(100vw - var(--railw) - 72px)}
.art .body figcaption{font-size:13px;color:var(--ink-2);margin-top:8px}
.art .body blockquote{margin:1.8em 0;padding:0 0 0 22px;border-left:4px solid var(--sc,var(--accent));font-family:var(--display);font-size:28px;line-height:1.25;color:var(--ink)}
.art .body blockquote cite{display:block;font:600 13px var(--body);color:var(--ink-2);margin-top:10px;font-style:normal}
.art .body .fact{background:var(--bg-2);padding:18px 22px;font-size:16px;display:grid;gap:8px;border-top:3px solid var(--sc,var(--accent))}
.art .body .fact dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-variant-numeric:tabular-nums}
.art .body .fact dt{color:var(--ink-2)}.art .body .fact dd{margin:0;font-weight:600}
.art .end{border-top:1px solid var(--rule);padding-top:20px;margin-top:30px}
.art .rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:14px}
.art .rel a{display:grid;gap:6px}.art .rel h3{font-size:18px}
@media (max-width:1100px){.art .body figure.wide{width:100%;max-width:100%}}
@media (max-width:860px){.art{grid-template-columns:1fr;gap:28px}.art .side{position:static}.art .rel{grid-template-columns:1fr}}
.back{display:inline-flex;gap:8px;align-items:center;font:600 13px var(--body);letter-spacing:.04em;color:var(--ink-2);margin-top:20px;padding:6px 0;min-height:24px}
.back:hover{color:var(--ink)}

.note{font-size:12.5px;color:var(--ink-2);border:1px dashed var(--rule);padding:8px 12px;margin-top:18px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ───────── additions for the CMS site ───────── */
.rail .tools a{font-size:15px}
.hero.empty{padding:40px 0}
.img.ph{background:var(--photo-a)}
.art .side .by img.av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.art .side .where{color:var(--ink-2)}
.art .side .where:hover{color:var(--ink)}
.art .side .share a{font:600 12px var(--body);border:1px solid var(--rule);padding:5px 10px;border-radius:20px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.art .side .share a:hover{color:var(--ink);border-color:var(--ink-2)}
.art .body figcaption .cr{opacity:.8}
.art .body img{max-width:100%;height:auto}
.art .body figure .img{background:var(--bg-2)}
.art .body figure > img{display:block;width:100%;height:auto}
.art .body ul,.art .body ol{padding-left:1.3em;font-size:18.5px;line-height:1.55}
.art .body li{margin-bottom:.4em}
.art .body h3{font-size:23px;margin-top:1.3em}
.art .body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art .body table{border-collapse:collapse;width:100%;font-size:16px}
.art .body td,.art .body th{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left}
.art .body iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border:0}
.art .body .fact p{font-size:15px}
.art.single .side h1{font-size:clamp(30px,3vw,40px)}
.art.single .body p{font-size:18px}

/* opinion portraits */
.op .cut img{width:96px;height:112px;object-fit:cover;object-position:top;display:block;border-radius:48px 48px 0 0;filter:saturate(.9)}
.op .cut svg{opacity:.45}

/* lists (category / island pages) */
.list .sechead h1{font-size:clamp(30px,4vw,44px);color:var(--sc)}
.list .sechead .where{margin-left:auto}
.list .sechead .where svg{width:64px;height:64px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 26px;margin-top:30px}
.grid3 a{display:grid;gap:10px;align-content:start}
.grid3 h3{font-size:22px}
.grid3.isl-cards{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.islcard{padding:16px 0;border-top:1px solid var(--rule)}
.islcard h3{font-size:24px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:16px;border-top:1px solid var(--rule);font:600 13px var(--body);letter-spacing:.04em;color:var(--ink-2)}
.pager a{color:var(--ink)}
@media (max-width:860px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3.isl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid3{grid-template-columns:1fr}}

/* search */
.search form{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:640px}
.search input{font:18px var(--body);padding:12px 14px;border:1px solid var(--ink-2);background:var(--bg);color:var(--ink);min-width:0}
.search button{font:600 15px var(--body);padding:12px 20px;background:var(--ink);color:var(--bg);border:0;cursor:pointer}
.search .grid3 a{grid-template-columns:96px 1fr;gap:4px 14px}
.search .grid3 a .img{grid-row:1/4}
.search .grid3 h3{font-size:19px}

/* newsletter honeypot */
.nl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ───────── advertising slots ───────── */
.spot{position:relative;margin:28px 0}
.spot .spot-lbl{position:absolute;top:-16px;right:0;font:600 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.7}
.spot-wide .spot-item{display:flex;justify-content:center;align-items:center;min-height:90px;max-width:970px;margin:0 auto;overflow:hidden}
.spot-wide .spot-item img{display:block;width:100%;height:auto;max-height:250px;object-fit:contain}
.spot-sq{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,300px));justify-content:center;gap:20px}
.spot-sq .spot-item{aspect-ratio:1;display:flex;justify-content:center;align-items:center;overflow:hidden;background:var(--bg-2)}
.spot-sq .spot-item img{width:100%;height:100%;object-fit:cover;display:block}
.spot-sq.one{grid-template-columns:minmax(0,300px);margin-top:4px}
.spot.ph .spot-item{border:1px dashed var(--rule);background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--rule) 45%,transparent) 10px 11px);color:var(--ink-2);font:600 11px var(--body);letter-spacing:.12em;text-align:center;line-height:1.5}
.spot-wide.ph .spot-item{aspect-ratio:970/250;max-height:250px;min-height:90px}
.art .body .spot{margin:30px 0}
.art .body .spot-wide .spot-item{max-width:100%}
.art .body .spot-sq{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec > .spot:last-child{margin-bottom:0}
@media (max-width:860px){.spot-sq{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.spot-wide.ph .spot-item{aspect-ratio:320/100}}

/* ───────── hero variants ───────── */
.pill{display:inline-block;font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--sc,var(--accent));padding:5px 9px;margin-bottom:14px}
/* A · cinematic */
.hero-a{position:relative;margin:20px 0 0;min-height:min(78vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#1a2a36}
.hero-a .bg{position:absolute;inset:0;display:block}
.hero-a .bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-a .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,30,0) 35%,rgba(10,20,30,.82) 100%)}
.hero-a .txt{position:relative;padding:44px 48px;max-width:1040px;pointer-events:none}
.hero-a .txt a{pointer-events:auto}
.hero-a h1{font-size:clamp(34px,5vw,74px);color:#fff;line-height:1.02;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-a .dek{color:rgba(255,255,255,.88);font-size:20px;line-height:1.4;max-width:62ch;margin-top:16px}
.hero-a .meta{color:rgba(255,255,255,.75);margin-top:12px}.hero-a .meta b{color:#fff}
.hero-a-stack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.hero-a-stack a{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:18px 18px 18px 0;margin-right:18px;border-right:1px solid var(--rule);align-items:center}
.hero-a-stack a:last-child{border-right:0;margin-right:0}
.hero-a-stack .img{width:84px;aspect-ratio:1}
.hero-a-stack h3{font-size:19px;margin-top:4px}
@media (max-width:960px){.hero-a{min-height:60vh}.hero-a .txt{padding:24px 20px}.hero-a-stack{grid-template-columns:1fr 1fr}.hero-a-stack a:nth-child(2n){border-right:0;margin-right:0}}
@media (max-width:560px){.hero-a-stack{grid-template-columns:1fr}.hero-a-stack a{border-right:0;margin-right:0;border-bottom:1px solid var(--rule)}}
/* B · split */
.hero-b{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);margin:20px 0 0;min-height:min(72vh,720px)}
.hero-b .photo{position:relative;display:block;overflow:hidden;background:var(--bg-2)}
.hero-b .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-b .photo .cap{position:absolute;left:10px;bottom:8px;font:400 11px var(--body);color:#fff;opacity:.8}
.hero-b .panel{background:var(--foot);color:var(--foot-ink);padding:40px 44px 32px;display:flex;flex-direction:column;border-top:6px solid var(--sc,var(--accent))}
.hero-b .panel .k{color:var(--sand)}
.hero-b h1{font-size:clamp(30px,3.4vw,52px);color:#fff;margin-top:12px}
.hero-b .dek{color:rgba(255,255,255,.8);font-size:18px;line-height:1.45;margin-top:14px}
.hero-b .meta{color:rgba(255,255,255,.6);margin-top:10px}
.hero-b ol{list-style:none;margin:auto 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:14px}
.hero-b ol a{display:grid;grid-template-columns:30px 1fr;gap:10px;font-family:var(--display);font-size:19px;line-height:1.2;color:#fff}
.hero-b ol .n{font:600 12px var(--body);color:var(--sand);padding-top:4px;letter-spacing:.05em}
.hero-b ol .k2{display:block;font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
@media (max-width:900px){.hero-b{grid-template-columns:1fr}.hero-b .photo{aspect-ratio:3/2}.hero-b .panel{padding:26px 20px}}
/* C · slideshow */
.hero-c{margin:20px 0 0;border-bottom:1px solid var(--rule)}
.hero-c .slides{position:relative;height:min(70vh,680px);overflow:hidden;background:#1a2a36}
.hero-c .slide{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;transition:opacity .7s;color:#fff}
.hero-c .slide.on{opacity:1;z-index:1}
.hero-c .slide img,.hero-c .slide .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-c .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,30,0) 35%,rgba(10,20,30,.8) 100%)}
.hero-c .txt{position:relative;z-index:1;padding:40px 48px;max-width:1000px}
.hero-c h1,.hero-c h2{font-size:clamp(30px,4.4vw,64px);color:#fff;line-height:1.04;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-c .dek{color:rgba(255,255,255,.85);font-size:19px;margin-top:12px;max-width:60ch}
.hero-c .thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:14px 0 18px}
.hero-c .thumbs button{background:none;border:0;padding:8px 0 0;min-height:36px;text-align:left;cursor:pointer;display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;color:var(--ink-2);font:400 14px var(--body);position:relative}
.hero-c .thumbs button .bar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--rule)}
.hero-c .thumbs button[aria-selected=true]{color:var(--ink)}
.hero-c .thumbs button[aria-selected=true] .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:herobar 6s linear forwards}
@keyframes herobar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-c .thumbs img,.hero-c .thumbs .img{width:64px;height:48px;object-fit:cover;display:block}
.hero-c .thumbs .t{font-family:var(--display);font-size:15px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.hero-c .slides{height:60vh}.hero-c .txt{padding:22px 18px}.hero-c .thumbs{grid-template-columns:repeat(5,1fr);gap:8px}.hero-c .thumbs button{grid-template-columns:1fr;min-height:44px}.hero-c .thumbs .t,.hero-c .thumbs img,.hero-c .thumbs .img{display:none}}
/* D · mosaic */
.hero-d{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:8px;margin:20px 0 0;height:min(76vh,740px)}
.hero-d a{position:relative;overflow:hidden;display:flex;align-items:flex-end;color:#fff;background:var(--sc,var(--accent))}
.hero-d a.lead{grid-row:1/3}
.hero-d a img,.hero-d a .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hero-d a:hover img{transform:scale(1.04)}
.hero-d a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,30,0) 40%,rgba(10,20,30,.82) 100%)}
.hero-d .txt{position:relative;z-index:1;padding:22px 24px}
.hero-d .lead .txt{padding:36px 40px;max-width:820px}
.hero-d h1{font-size:clamp(30px,3.4vw,52px);color:#fff;line-height:1.04;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero-d h3{font-size:clamp(18px,1.5vw,23px);color:#fff;line-height:1.15;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero-d .dek{color:rgba(255,255,255,.85);font-size:18px;margin-top:12px;max-width:56ch}
.hero-d .pill{margin-bottom:10px}
.hero-d a:hover h1,.hero-d a:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:900px){.hero-d{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.hero-d a.lead{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}.hero-d a{aspect-ratio:1}.hero-d .lead .txt{padding:20px}.hero-d .dek{display:none}.hero-d h1{font-size:clamp(24px,6vw,34px)}.hero-d h3{font-size:17px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}

/* photo grid section (3 columns, photo cards; coloured placeholder when an article has no photo) */
.photogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 26px}
.photogrid a{display:grid;gap:10px;align-content:start}
.photogrid h3{font-size:22px}
.img.phc{display:flex;align-items:flex-end;padding:12px 14px}
.img.phc span{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.85}
@media (max-width:860px){.photogrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.photogrid{grid-template-columns:1fr}}

/* text section with a small thumbnail on the right of each title */
.text2.thumbs a{grid-template-columns:minmax(0,1fr) 132px;gap:6px 18px;align-items:start}
.text2.thumbs a .tx{display:grid;gap:5px;min-width:0}
.text2.thumbs a .img{width:132px;margin-top:2px}
.text2.thumbs a .img::after{display:none}
@media (max-width:480px){.text2.thumbs a{grid-template-columns:minmax(0,1fr) 96px}.text2.thumbs a .img{width:96px}}

footer .legal .credit a{text-decoration:underline;text-underline-offset:3px}
footer .legal .credit a:hover{color:var(--sand)}

/* row of island silhouettes linking to every island page */
.islrow{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:40px;padding-top:22px;border-top:1px solid var(--rule)}
.islrow a{display:grid;justify-items:center;gap:6px;padding:10px 8px 8px;min-width:88px;border-radius:6px;color:var(--ink-2);font:600 10.5px var(--body);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.islrow a svg{width:54px;height:54px;color:var(--sand-2)}
.islrow a svg path{fill:currentColor}
.islrow a:hover{background:var(--bg-2);color:var(--ink)}
.islrow a:hover svg,.islrow a.on svg{color:var(--accent)}
.islrow a.on{color:var(--accent)}
.isl-cards{margin-top:28px}
@media (max-width:600px){.islrow a{min-width:72px;font-size:9.5px}.islrow a svg{width:40px;height:40px}}

/* 'advertise here' placeholders */
.spot.ph{text-decoration:none}
.spot.ph .spot-item span{display:grid;gap:4px;text-transform:none;letter-spacing:0;font:400 12.5px var(--body);color:var(--ink-2)}
.spot.ph .spot-item span b{font:700 15px var(--display);color:var(--ink);letter-spacing:0}
.spot.ph .spot-item:hover{border-color:var(--accent)}
.spot.ph .spot-item:hover span b{color:var(--accent)}

/* tap targets: small inline links get a comfortable hit area */
.art .side .share a,.rail .tools a,.topbar .btn,.pager a{min-height:24px;display:inline-flex;align-items:center}
footer .legal a{display:inline-block;padding:4px 0;min-height:24px}

/* article audio/video (video_url, audio_path) */
.avfile{margin:1.2em 0;padding:12px 14px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:rgba(0,0,0,.03)}
.avfile figcaption{font-weight:600;margin:0 0 8px;font-size:.95em}
.avfile audio{width:100%;display:block}
.avfile video{width:100%;height:auto;display:block;background:#000;border-radius:6px}
.avfile:not(.audio){padding:0;border:0;background:none}
figure.avvideo{margin:1.2em 0}
figure.avvideo iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}