:root{
  --color-bg:        #f3f2f2;
  --color-surface:   #eae9e9;
  --color-text:      #201e1d;

  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;

  --accent-h: 45;
  --accent-c: 0.163;

  --color-accent-100: oklch(0.962 calc(var(--accent-c) * 0.15) var(--accent-h));
  --color-accent-200: oklch(0.915 calc(var(--accent-c) * 0.34) var(--accent-h));
  --color-accent-300: oklch(0.855 calc(var(--accent-c) * 0.60) var(--accent-h));
  --color-accent-400: oklch(0.762 calc(var(--accent-c) * 0.86) var(--accent-h));
  --color-accent:     oklch(0.655 var(--accent-c)              var(--accent-h));
  --color-accent-600: oklch(0.580 calc(var(--accent-c) * 0.95) var(--accent-h));
  --color-accent-700: oklch(0.498 calc(var(--accent-c) * 0.83) var(--accent-h));
  --color-accent-900: oklch(0.292 calc(var(--accent-c) * 0.47) var(--accent-h));

  --color-accent-2: #d6006c;
  --radius-sm: 2px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:'Rubik',system-ui,sans-serif; font-size:17px; line-height:1.55;
  text-wrap:pretty;
}
h1,h2,h3{margin:0; font-weight:400;}
p{margin:0 0 1em; text-wrap:pretty;}
p:last-child{margin-bottom:0}
a{color:inherit}
button, input, textarea{font-family:inherit; color:inherit;}
table{border-collapse:collapse; width:100%;}
img{max-width:100%; display:block;}

.display{font-family:'Rubik Glitch','Rubik',cursive; text-transform:uppercase; letter-spacing:.01em; font-weight:400;}
.eyebrow{font-family:'Rubik'; font-size:13px; text-transform:uppercase; letter-spacing:.18em; font-weight:500;}
.tabular{font-variant-numeric:tabular-nums;}
.italic{font-style:italic;}

/* ===== LAYOUT SHELL ===== */
.layout{display:flex; align-items:stretch; min-height:100vh;}
.band{width:46px; flex:0 0 46px; background:var(--color-accent); position:relative;}
.band-text{
  position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; font-family:'Rubik Glitch','Rubik',cursive; font-size:19px;
  text-transform:uppercase; color:var(--color-bg); white-space:nowrap;
}
.page{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
@media (max-width:899px){
  .band{display:none;}
}

/* ===== HEADER ===== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px; border-bottom:3px solid var(--color-text); gap:20px; flex-wrap:wrap;
}
.wordmark{font-family:'Rubik',sans-serif; font-weight:800; letter-spacing:.03em; font-size:40px;}
.site-nav{display:flex; align-items:center; gap:26px; flex-wrap:wrap; font-size:15px;}
.site-nav a{text-decoration:none; padding:4px 0; border-bottom:1px solid transparent;}
.site-nav a:hover{border-bottom-color:var(--color-text);}
.lang-select{
  border:1.5px solid var(--color-text); border-radius:var(--radius-sm); background:var(--color-bg);
  padding:8px 24px 8px 12px; font-size:13px; letter-spacing:.08em; cursor:pointer; min-height:40px;
  font-family:'Rubik'; color:var(--color-text);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23201e1d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:9px 5px;
}
.lang-select:hover{border-color:var(--color-accent-700);}
.lang-select:focus-visible{outline:2px solid var(--color-accent-700); outline-offset:1px;}

/* ===== DATELINE ===== */
.dateline{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:10px 56px; font-size:13px; border-bottom:1px solid var(--color-neutral-400);
  color:var(--color-neutral-700);
}
.dateline .accent{color:var(--color-accent-700);}

/* ===== GENERIC SECTION ===== */
main{padding:0 56px;}
section{padding:60px 0;}
section + section{border-top:1px solid var(--color-neutral-400);}
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:28px;
}
.section-head h2{font-size:44px;}
.section-explain{font-size:14px; color:var(--color-neutral-700); margin-top:4px; max-width:60ch;}

@media (max-width:899px){
  main{padding:0 20px;}
  .site-header{padding:16px 20px;}
  .dateline{padding:8px 20px;}
  .wordmark{font-size:32px;}
  section{padding:44px 0;}
  .section-head h2{font-size:32px;}
}

/* ===== CHECKBOX ===== */
.check-field{display:flex; align-items:center; gap:10px; min-height:44px; font-size:14px; cursor:pointer;}
.check-field input{width:20px; height:20px; accent-color:var(--color-accent); cursor:pointer;}

/* ===== TOP 3 ===== */
.top3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:36px;}
.top3-card{border-top:3px solid var(--color-text); padding-top:16px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.top3-rank{color:var(--color-accent-700); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;}
.top3-name{font-size:26px; margin:8px 0 6px;}
.top3-meta{font-size:13px; color:var(--color-neutral-700);}
.top3-sum{font-size:40px; white-space:nowrap;}
.top3-sum .unit{font-size:18px; margin-left:2px; font-family:'Rubik',sans-serif; font-weight:500; text-transform:none;}
@media (max-width:899px){
  .top3{grid-template-columns:1fr; gap:20px;}
}

/* ===== FORECAST TABLE ===== */
.forecast-table{font-size:14px;}
.forecast-table th{
  text-align:left; font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-neutral-700); padding:0 10px 10px; border-bottom:1px solid var(--color-text);
}
.forecast-table td{padding:12px 10px; border-bottom:1px solid var(--color-neutral-300); vertical-align:middle;}
.forecast-table tr:last-child td{border-bottom:1px solid var(--color-text);}
.spot-country{color:var(--color-neutral-600); font-size:12px; margin-left:6px;}
.day-row{display:flex; gap:4px;}
.day-cell{
  width:26px; height:20px; border-radius:2px; display:flex; align-items:center; justify-content:center;
  font-size:11px;
}
.day-cell.lvl-3{background:var(--color-accent); color:var(--color-bg);}
.day-cell.lvl-2{background:var(--color-accent-300); color:var(--color-accent-900);}
.day-cell.lvl-1{background:var(--color-neutral-200); color:var(--color-neutral-700);}
.day-cell.lvl-0{background:transparent; color:var(--color-neutral-500);}
.map-link{color:var(--color-accent-700); text-decoration:none; font-size:13px;}
.map-link:hover{text-decoration:underline;}
.sum-cell{font-size:16px;}
.forecast-footer{display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--color-text);
  border-radius:var(--radius-sm); padding:11px 20px; font-size:14px; background:none;
  cursor:pointer; text-decoration:none; min-height:44px;
}
.btn:hover{background:var(--color-text); color:var(--color-bg);}
.forecast-footer p{font-size:13px; color:var(--color-neutral-700); margin:0;}

/* ===== MOBILE: TABLE -> CARDS ===== */
@media (max-width:899px){
  .forecast-table thead{display:none;}
  .forecast-table, .forecast-table tbody, .forecast-table tr, .forecast-table td{display:block; width:100%;}
  .forecast-table tr{padding:14px 0; border-bottom:1px solid var(--color-neutral-300);}
  .forecast-table td{padding:2px 0; border-bottom:none;}
  .row-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
  .row-top .spot-name{font-size:17px;}
  .row-meta{font-size:13px; color:var(--color-neutral-700); margin:4px 0 10px;}
  .row-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .day-cell{width:34px; height:30px; font-size:12px;}
  .day-col{display:flex; flex-direction:column; align-items:center; gap:3px;}
  .day-label{font-size:10px; color:var(--color-neutral-600); text-transform:uppercase;}
  .desktop-only{display:none !important;}
}
@media (min-width:900px){
  .row-meta, .row-bottom{display:none;}
}

/* ===== LIVE SECTION ===== */
.live-section{background:var(--color-text); color:var(--color-bg); padding:56px 56px; margin:0 -56px;}
.live-status{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:34px;}
.live-status-left{display:flex; align-items:center; gap:10px;}
.pulse-dot{width:11px; height:11px; border-radius:50%; background:var(--color-accent-400); animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.35; transform:scale(.82);}
}
.live-status-left span{color:var(--color-accent-400); font-size:13px; letter-spacing:.16em;}
.live-status-right{font-size:13px; color:var(--color-neutral-400);}
.live-stage{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; margin-bottom:40px;}
.live-current{min-height:190px;}
.live-context{font-size:12px; letter-spacing:.14em; color:var(--color-neutral-400); text-transform:uppercase;}
.live-name{font-size:54px; margin:10px 0 6px; opacity:0; transform:translateY(14px); transition:opacity .5s, transform .5s;}
.live-name.in{opacity:1; transform:translateY(0);}
.live-row{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
.live-kn{font-size:42px; color:var(--color-accent-400);}
.live-detail{font-size:14px; color:var(--color-neutral-400);}
.live-sentence{font-style:italic; font-size:18px; color:var(--color-neutral-200); max-width:46ch;}
.live-rank{border-top:1px solid var(--color-neutral-800);}
.live-rank-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--color-neutral-800); font-size:14px;}
.live-rank-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
.live-rank-dot.hi{background:var(--color-accent);}
.live-rank-dot.mid{background:var(--color-accent-400);}
.live-rank-dot.lo{background:var(--color-neutral-500);}
.live-rank-name{flex:1 1 auto;}
.marquee-wrap{overflow:hidden; border-top:1px solid var(--color-neutral-800); padding-top:20px;}
.marquee{display:flex; gap:48px; width:max-content; animation:marquee 46s linear infinite; font-family:'Rubik Glitch','Rubik',cursive; font-size:21px; color:var(--color-neutral-500); text-transform:uppercase; white-space:nowrap;}
.marquee span{display:flex; gap:48px;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:899px){
  .live-section{padding:40px 20px; margin:0 -20px;}
  .live-stage{grid-template-columns:1fr; gap:32px;}
  .live-name{font-size:38px;}
  .live-kn{font-size:32px;}
}

/* ===== DESTINATION ===== */
.dest-chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{
  border-radius:var(--radius-sm); padding:8px 14px; font-size:13px; border:1.5px solid var(--color-text);
  min-height:44px; display:inline-flex; align-items:center;
}
.chip.active{background:var(--color-accent); border-color:var(--color-accent); color:var(--color-bg);}
.chip.planned{border-color:var(--color-neutral-400); color:var(--color-neutral-500); cursor:default;}
.dest-sub{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-neutral-700); margin:34px 0 16px;}

/* ===== COMMUNITY ===== */
.community-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; margin-bottom:6px; color:var(--color-neutral-700);}
.field input, .field textarea{
  width:100%; border:1px solid var(--color-neutral-500); border-radius:var(--radius-sm);
  padding:11px 12px; font-size:15px; background:var(--color-surface); min-height:44px;
}
.field textarea{min-height:auto; resize:vertical;}
.field input:focus, .field textarea:focus{outline:2px solid var(--color-accent-700); outline-offset:1px; border-color:transparent;}
.form-note{font-size:12px; color:var(--color-neutral-600); margin-top:2px;}
.form-error{font-size:13px; color:#a3241f; margin-top:-6px; margin-bottom:14px; display:none;}
.form-error.show{display:block;}
.notes-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; gap:12px;}
.notes-count{font-size:13px; color:var(--color-accent-700);}
.note-item{border-top:1px solid var(--color-neutral-400); padding:16px 0;}
.note-top{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--color-neutral-600); margin-bottom:4px;}
.note-spot{color:var(--color-accent-700); font-size:13px; margin-bottom:6px;}
.note-text{font-size:15px; margin-bottom:8px;}
.status-chip{font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-sm); display:inline-block;}
.status-chip.done{background:var(--color-accent); color:var(--color-bg);}
.status-chip.review{border:1px solid var(--color-neutral-500); color:var(--color-neutral-700);}
@media (max-width:899px){
  .community-grid{grid-template-columns:1fr; gap:36px;}
}

/* ===== METHODE ===== */
.howto-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:56px;}
.howto-points{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.howto-point{border-top:1px solid var(--color-text); padding-top:14px;}
.howto-point .eyebrow{color:var(--color-accent-700); display:block; margin-bottom:8px;}
.howto-point h3{font-size:22px; margin-bottom:8px;}
.howto-point p{font-size:14px; color:var(--color-neutral-700);}
@media (max-width:899px){
  .howto-grid{grid-template-columns:1fr; gap:32px;}
  .howto-points{grid-template-columns:1fr;}
}

/* ===== MOVES ===== */
.moves-sub{font-size:13px; color:var(--color-neutral-700); margin-top:4px;}
.moves-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.move-card{border-top:1px solid var(--color-text); padding-top:16px;}
.move-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px;}
.move-status{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-neutral-700);}
.move-attempts{font-size:12px; color:var(--color-neutral-600);}
.move-name{font-size:25px; margin-bottom:12px;}
.move-bar-track{height:5px; background:var(--color-neutral-300); border-radius:3px; overflow:hidden; margin-bottom:8px;}
.move-bar-fill{height:100%; background:var(--color-accent-2); border-radius:3px;}
.move-pct{font-size:13px; margin-bottom:10px; color:var(--color-neutral-800);}
.move-note{font-size:13px; color:var(--color-neutral-700);}
.move-tutorial{display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--color-accent-700); text-decoration:none;}
.move-tutorial:hover{text-decoration:underline;}
@media (max-width:899px){
  .moves-grid{grid-template-columns:1fr 1fr; gap:20px;}
}
@media (max-width:560px){
  .moves-grid{grid-template-columns:1fr;}
}

/* ===== CLIPS ===== */
.clips-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:56px;}
.clips-link{font-size:14px; color:var(--color-accent-700); text-decoration:none; margin-top:6px; display:inline-block;}
.video-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px;}
.video-card{cursor:pointer; text-decoration:none; color:inherit;}
.video-thumb{position:relative; aspect-ratio:16/9; background:var(--color-neutral-300); border-radius:var(--radius-sm); overflow:hidden;}
.video-thumb svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; opacity:.5;}
.video-badge{position:absolute; bottom:6px; right:6px; background:rgba(32,30,29,.82); color:var(--color-bg); font-size:11px; padding:2px 6px; border-radius:2px;}
.video-title{font-size:17px; font-weight:500; margin:10px 0 2px;}
.video-meta{font-size:13px; color:var(--color-neutral-600);}
.insta-handle{font-size:14px; color:var(--color-neutral-700); display:block; margin-top:4px;}
.insta-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px;}
.insta-tile{aspect-ratio:1/1; background:var(--color-neutral-300); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; text-decoration:none;}
.insta-tile svg{width:26px; height:26px; opacity:.45;}
@media (max-width:899px){
  .clips-grid{grid-template-columns:1fr; gap:36px;}
}

/* ===== FOOTER ===== */
footer{background:var(--color-text); color:var(--color-bg); padding:48px 56px 32px;}
.footer-grid{display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap;}
.footer-brand .wordmark{font-size:32px;}
.footer-slogan{font-style:italic; color:var(--color-neutral-400); margin-top:8px; font-size:16px;}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-neutral-500); margin-bottom:14px; font-weight:400;}
.footer-col a{display:block; font-size:14px; color:var(--color-neutral-300); text-decoration:none; margin-bottom:9px;}
.footer-col a:hover{color:var(--color-bg);}
@media (max-width:899px){
  footer{padding:36px 20px 24px;}
  .footer-grid{flex-direction:column; gap:32px;}
  .footer-cols{gap:32px;}
}