/* HOTELA category/comparison pages — shared design system (ink/cream/gold + Cormorant
   Garamond). One source for the whole SEO cluster: /what-is-hotela, /not-a-timeshare,
   /private-hotel-ownership, /hotela-vs-second-home, … Pairs with /shared/js/hotela-category.js
   (the EN⇄JA toggle). EN is the default/static crawlable language; JA via body.ja. */
/* Accent = Apple blue (replaced gold 2026-06-26 — gold read "generic luxury").
   --gold name kept so the whole sheet cascades from one token; value is Apple blue.
   --gold:#0066CC passes WCAG AA on white for small text; --gold-bright is Apple's
   blue-on-dark, used for the eyebrow over the dark hero photo. */
:root{ --ink:#1C1A17; --cream:#F0ECE4; --gold:#0066CC; --gold-bright:#2997FF; --paper:#FBFAF7; --line:#E4DFD4; --muted:#6f6a60; }
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.7 -apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;color:var(--ink);background:var(--paper)}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
a{color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 22px}
nav{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font:700 19px Inter,sans-serif;letter-spacing:.22em;text-decoration:none}
.nlinks a{margin-left:22px;font-size:14px;text-decoration:none;color:var(--muted)}
.nlinks a:hover{color:var(--ink)}
.lang{margin-left:22px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 13px Inter,sans-serif;padding:5px 12px;cursor:pointer}
/* Hero photo: set --hero:url(...) on the <header> element. Until an image is
   provided the gradient layers over the ink colour, so the hero stays on-brand
   with no broken-image gap. The gradient keeps cream text readable over photos. */
header.hero{background-color:var(--ink);background-image:linear-gradient(180deg,rgba(18,16,13,.62),rgba(18,16,13,.80)),var(--hero,none);background-size:cover;background-position:center;color:var(--cream);padding:104px 0 92px}
header.hero .eyebrow{color:var(--gold-bright);letter-spacing:.2em;text-transform:uppercase;font:600 12px Inter,sans-serif;margin-bottom:18px}
header.hero h1{font-size:clamp(40px,6vw,68px);line-height:1.04;letter-spacing:-.01em}
header.hero .lede{font-size:clamp(19px,2.4vw,23px);color:#d9d3c7;margin-top:20px;max-width:640px}
section{padding:48px 0;border-bottom:1px solid var(--line)}
.label{color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font:700 12px Inter,sans-serif;margin-bottom:14px}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin-bottom:16px}
h3{font-size:23px;margin:22px 0 6px}
p{margin-bottom:16px}
.big{font-size:clamp(22px,2.8vw,30px);line-height:1.4}
/* Optional full-bleed photo band between sections. Use: <div class="feature" style="--img:url(...)"></div> */
.feature{height:clamp(220px,34vw,420px);background-color:var(--ink);background-image:var(--img,none);background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:15px}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 13px Inter,sans-serif;letter-spacing:.04em;background:#fff}
td:first-child{font-weight:600;width:30%}
.hl{color:var(--gold);font-weight:600}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{margin-top:0}
.card ul{margin:0;padding-left:18px}.card li{margin-bottom:7px}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{font:600 17px Inter,sans-serif;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:#3a352d}
.related{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.related a{flex:1 1 220px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none}
.related a:hover{border-color:var(--gold)}
.related .t{font:600 15px Inter,sans-serif;margin-bottom:3px}
.related .d{font-size:13px;color:var(--muted)}
.cta{background:var(--ink);color:var(--cream);text-align:center;padding:60px 0}
.cta h2{color:var(--cream)}
.btn{display:inline-block;margin:8px 6px 0;padding:14px 28px;border-radius:999px;text-decoration:none;font:600 15px Inter,sans-serif}
.btn.gold{background:var(--gold);color:#fff}
.btn.ghost{border:1px solid rgba(240,236,228,.5);color:var(--cream)}
footer{background:#15130f;color:#b7b1a4;font-size:13px;padding:34px 0;text-align:center}
footer a{color:#d9d3c7;text-decoration:none;margin:0 8px}
[data-ja]{display:none}
body.ja [data-en]{display:none} body.ja [data-ja]{display:revert}
body.ja{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}
@media(max-width:640px){ .cols{grid-template-columns:1fr} td:first-child{width:38%} .nlinks{display:none} }