:root{
  --bg:#FBF8F2; --dark:#073F42; --dark2:#0B4F52; --terracotta:#C85A35; --terracotta-d:#AD4B2B;
  --gold:#C3A052; --gold-soft:#D8BD82; --ink:#2D3332; --ink-soft:#5B615F; --ivory:#F7F1E7;
  --line:#E3D9C4; --card:#FFFFFF;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', Inter, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
#methodology, #rankings, #regions, #property-types, #about-ranking, #faq{scroll-margin-top:100px;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;}
img,svg{display:block; max-width:100%;}
#article img{margin:1.5em auto; border-radius:.5em; height:auto;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:var(--serif); color:var(--dark); margin:0 0 .5em; font-weight:600;}
.eyebrow{font-family:var(--sans); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; color:var(--terracotta);}
.section{padding:88px 0;}
.section.tight-top{padding-top:44px;}
.section-tight{padding:56px 0;}
.section-title{font-size:32px; margin-bottom:14px;}
.section-sub{color:var(--ink-soft); font-size:15.5px; margin-bottom:40px; max-width:56ch;}
.center{text-align:center;}
.center .section-sub{margin-left:auto; margin-right:auto;}
.icon{width:26px; height:26px; flex:none;}
hr.rule{border:none; height:1px; background:var(--line); margin:56px 0;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);}
.reveal.visible{opacity:1; transform:translateY(0);}

.rank-card{transition:transform .28s ease, box-shadow .28s ease;}
.rank-card:hover{transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(7,63,66,.35);}
.photo-card{transition:transform .28s ease, box-shadow .28s ease;}
.photo-card:hover{transform:scale(1.035); box-shadow:0 20px 38px -20px rgba(7,63,66,.35); z-index:2; position:relative;}
.method-item, .apart-item{transition:transform .25s ease;}
.method-item:hover{transform:translateY(-3px);}
.apart-item:hover{transform:translateX(3px);}
#article table {border:1px solid #e1dac3; margin:1.5em auto;}
#article a {color:var(--terracotta);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .rank-card, .photo-card, .method-item, .apart-item{transition:none;}
}

.site-header{position:sticky; top:0; z-index:80; background:var(--dark); border-bottom:2px solid var(--gold);}
.header-inner{max-width:1180px; margin:0 auto; padding:13px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo-wrap{display:flex; align-items:center; gap:12px; color:var(--ivory);}
.logo-wrap .mark{flex:none; display:flex;}
.logo-wrap .mark img{height:42px; width:auto; display:block;}
.logo-wrap .word{font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ivory); white-space:nowrap;}
.main-nav{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.main-nav a{color:var(--ivory); font-size:14px; font-weight:500; opacity:.9;}
.main-nav a:hover{opacity:1; color:var(--gold-soft);}
.nav-toggle{display:none; background:none; border:1px solid var(--gold); color:var(--gold); border-radius:6px; padding:8px 10px; font-size:16px;}

.hero{position:relative; color:var(--ivory); overflow:hidden;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(7,63,66,.94) 0%, rgba(7,63,66,.82) 32%, rgba(7,63,66,.42) 62%, rgba(7,63,66,.15) 100%);}
.hero-border{position:absolute; top:0; bottom:0; width:70px; background-repeat:repeat-y; background-size:100% auto; opacity:.55; z-index:2;}
.hero-border.left{left:0;}
.hero-border.right{right:0; transform:scaleX(-1);}
.hero-inner{position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:150px 32px 130px;}
.hero-inner .eyebrow{color:var(--gold-soft);}
.hero h1{color:var(--ivory); font-size:52px; line-height:1.12; max-width:16ch; margin:16px 0 22px;}
.hero p{max-width:46ch; color:#E4E9E4; font-size:16.5px; margin-bottom:34px;}
.hero-btns{display:flex; gap:16px; flex-wrap:wrap;}
.btn{display:inline-block; padding:15px 28px; border-radius:2px; font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer;}
.btn.primary{background:var(--terracotta); color:var(--ivory);}
.btn.primary:hover{background:var(--terracotta-d);}
.btn.ghost{border:1.5px solid var(--ivory); color:var(--ivory);}
.btn.ghost:hover{background:rgba(247,241,231,.12);}

.why-grid{display:flex; flex-wrap:wrap; gap:56px; align-items:center;}
.why-grid .figure{flex:1 1 420px; border-radius:2px; overflow:hidden;}
.why-grid .text{flex:1 1 420px;}
.why-grid h2{font-size:34px;}
.why-grid p{color:var(--ink-soft); font-size:16px; margin-bottom:16px;}

.about-text{max-width:76ch; color:var(--ink-soft); font-size:16px; margin-bottom:8px;}
.method-grid{display:flex; flex-wrap:wrap; gap:36px; margin-top:44px;}
.method-item{flex:1 1 170px; min-width:170px;}
.method-item .icon{color:var(--gold); width:46px; height:46px; margin-bottom:18px;}
.method-item h3{font-size:18px; margin-bottom:8px;}
.method-item p{font-size:13.6px; color:var(--ink-soft); line-height:1.55;}

.scale-panel{background:var(--dark); border-radius:3px; padding:44px 40px; margin-top:56px; color:var(--ivory);}
.scale-panel h3{color:var(--ivory); font-size:22px; text-align:center; margin-bottom:34px;}
.scale-grid{display:flex; flex-wrap:wrap; gap:0;}
.scale-item{flex:1 1 180px; text-align:center; padding:0 18px; border-left:1px solid rgba(247,241,231,.18);}
.scale-item:first-child{border-left:none;}
.scale-item .num{font-family:var(--serif); font-size:38px; color:var(--gold-soft); font-weight:600; margin-bottom:10px;}
.scale-item p{font-size:12.6px; color:#CFE0DD; line-height:1.5;}
.scale-note{text-align:center; font-size:13px; color:#B9CFCB; margin-top:32px; max-width:70ch; margin-left:auto; margin-right:auto;}

.rank-list{display:flex; flex-direction:column; gap:22px; margin-top:48px;}
.rank-card{background:var(--card); border:1px solid var(--line); border-radius:3px; padding:30px 32px; display:flex; gap:26px;}
.rank-num{flex:none; width:56px; text-align:center;}
.rank-num .n{font-family:var(--serif); font-size:34px; font-weight:600; color:var(--terracotta);}
.rank-num .lbl{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px;}
.rank-body{flex:1; min-width:0;}
.rank-top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
.rank-top h3{font-size:22px; margin-bottom:4px;}
.rank-loc{font-size:12.5px; color:var(--ink-soft); margin-bottom:3px;}
.rank-url{font-size:12.5px; color:var(--terracotta); font-weight:500; display:inline-block; margin-bottom:12px;}
.rank-url:hover{text-decoration:underline;}
.rank-score{text-align:right; flex:none;}
.rank-score .val{font-family:var(--serif); font-size:30px; font-weight:600; color:var(--dark);}
.rank-score .val small{font-size:14px; color:var(--ink-soft); font-weight:400;}
.rank-score .cap{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:2px;}
.rank-desc{font-size:14px; color:var(--ink-soft); margin:6px 0 18px; max-width:80ch;}
.metric-row{display:flex; flex-wrap:wrap; gap:22px; border-top:1px solid var(--line); padding-top:18px;}
.metric{display:flex; align-items:center; gap:9px; flex:1 1 130px;}
.metric .icon{width:20px; height:20px; color:var(--dark2); flex:none;}
.metric .m-lbl{font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; display:block;}
.metric .m-val{font-size:14px; font-weight:600; color:var(--ink);}

.table-card{margin-top:64px; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--card);}
.table-card .head{background:var(--dark); color:var(--ivory); text-align:center; padding:18px; font-family:var(--serif); font-size:20px;}
.table-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{background:var(--dark2); color:var(--ivory); text-align:left; padding:12px 14px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;}
thead th.sortable{cursor:pointer; user-select:none; position:relative;}
thead th.sortable:hover{background:#0E5D61;}
.sort-arrow{display:inline-block; margin-left:5px; opacity:.5; font-size:9px;}
.sort-arrow.asc::after{content:"▲";}
.sort-arrow.desc::after{content:"▼";}
.sort-arrow.active{opacity:1; color:var(--gold-soft);}
.table-hint{text-align:center; font-size:11.5px; color:var(--ink-soft); padding:12px 0 16px; margin:0;}
thead th.hi{background:var(--gold); color:var(--dark);}
tbody td{padding:11px 14px; border-top:1px solid var(--line);}
tbody td.rank{color:var(--terracotta); font-weight:700;}
tbody td.name{font-weight:600; color:var(--dark); white-space:normal; min-width:220px;}
tbody td.hi{background:#F4E8CE; font-weight:800; color:var(--dark); text-align:center;}
tbody td.val{text-align:center; color:var(--ink-soft);}
tbody tr:nth-child(even){background:#FBF7EE;}

.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;}
.card-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr); gap:26px;}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr); gap:26px;}
.photo-card{background:var(--card); border-radius:3px; overflow:hidden; border:1px solid var(--line);}
.photo-card .figure{aspect-ratio:4/3; overflow:hidden;}
.journal .photo-card .figure{aspect-ratio:16/9;}
.photo-card .figure img{width:100%; height:100%; object-fit:cover;}
.photo-card .body{padding:16px 18px 20px;}
.photo-card h3{font-size:19px; margin-bottom:5px;}
.photo-card p{font-size:13px; color:var(--ink-soft); margin:0;}
.info-card .body{padding:22px 26px 26px;}
.info-card h3{font-size:22px; margin-bottom:14px;}
.info-row{margin-bottom:13px;}
.info-row:last-child{margin-bottom:0;}
.info-row .lbl{display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--terracotta); margin-bottom:3px;}
.info-row p{font-size:13.6px; color:var(--ink-soft); margin:0; line-height:1.5;}
.regions-section,.journal{background:var(--dark); color:var(--ivory);}
.regions-section .section-title, .regions-section h2, .journal .section-title, .journal h2{color:var(--ivory);}
.regions-section .section-sub, .journal .section-sub{color:#C7DAD6;}

.check-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px 40px; margin-top:8px;}
.check-item{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(247,241,231,.14);}
.check-item:nth-last-child(-n+2){border-bottom:none;}
.check-num{flex:none; color:var(--gold-soft); margin-top:2px;}
.check-num img{width:24px; height:24px; display:block;}
.check-item h4{color:var(--ivory); font-size:16.5px; margin:0 0 5px; font-family:var(--serif); font-weight:600;}
.check-item p{margin:0; font-size:14px; color:#C7DAD6; line-height:1.5;}

.apart-cols{display:flex; flex-wrap:wrap; gap:40px; margin-top:8px;}
.apart-col{flex:1 1 320px;}
.apart-item{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid rgba(247,241,231,.14);}
.apart-item:last-child{border-bottom:none;}
.apart-item .icon{color:var(--gold); width:22px; height:22px; flex:none; margin-top:2px;}
.apart-item p{margin:0; font-size:15.5px; color:var(--ivory);}
.apart-panel{background:var(--dark); border-radius:3px; padding:52px 44px;}
.apart-panel .eyebrow{color:var(--gold-soft);}
.apart-panel h2{color:var(--ivory); font-size:30px;}
.apart-panel .section-sub{color:#C7DAD6;}

.faq-list{margin-top:40px; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--serif); font-size:18px; color:var(--dark); font-weight:600;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .mark{font-family:var(--sans); font-size:20px; color:var(--terracotta); flex:none; transition:transform .2s ease;}
.faq-item[open] summary .mark{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 40px 22px 4px; color:var(--ink-soft); font-size:14.5px;}

.site-footer{background:var(--dark); color:var(--ivory); margin-top:0;}
.footer-inner{max-width:1180px; margin:0 auto; padding:56px 32px 28px; display:flex; flex-wrap:wrap; gap:40px;}
.footer-brand{flex:1.4 1 280px;}
.footer-brand .logo-wrap{margin-bottom:14px; align-items:flex-start;}
.footer-brand .logo-wrap .word{white-space:normal; font-size:16.5px; line-height:2.75em;}
.footer-brand .logo-wrap .mark img{margin-top:2px;}
.footer-brand p{color:#C7DAD6; font-size:13.5px; max-width:34ch;}
.footer-col{flex:1 1 160px;}
.footer-col h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; font-family:var(--sans); font-weight:600;}
.footer-col a{display:block; font-size:14px; color:var(--ivory); opacity:.88; margin-bottom:11px;}
.footer-bottom{border-top:1px solid rgba(247,241,231,.14); text-align:center; padding:18px; font-size:12px; color:#9FB6B1;}

@media (max-width: 860px){
  .hero h1{font-size:38px;}
  .hero-inner{padding:120px 24px 90px;}
  .rank-card{flex-direction:column;}
  .rank-num{width:auto; display:flex; align-items:center; gap:10px; text-align:left;}
  .card-grid, .card-grid.cols-5{grid-template-columns:repeat(2,1fr);}
  .card-grid.cols-2, .card-grid.cols-3{grid-template-columns:1fr;}
  .check-grid{grid-template-columns:1fr;}
  .check-item{border-bottom:1px solid rgba(247,241,231,.14) !important;}
  .check-item:last-child{border-bottom:none !important;}
}
@media (max-width: 1010px){
  .nav-toggle{display:block;}
  .main-nav{position:fixed; inset:64px 0 0 0; background:var(--dark); flex-direction:column; align-items:flex-start; padding:28px; gap:20px; transform:translateX(100%); transition:transform .25s ease; z-index:70;}
  .main-nav.open{transform:translateX(0);}
}
@media (max-width: 700px){
  .main-nav{position:fixed; inset:64px 0 0 0; background:var(--dark); flex-direction:column; align-items:flex-start; padding:28px; gap:20px; transform:translateX(100%); transition:transform .25s ease;}
  .main-nav.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .hero-border{width:34px;}
  .hero h1{font-size:30px;}
  .section{padding:56px 0;}
  .card-grid, .card-grid.cols-5, .card-grid.cols-2, .card-grid.cols-3{grid-template-columns:1fr;}
}