/* MOREDIVE Phase 1 — dive theme. Depth is the layout: the page goes from surface to abyss. */
:root{--surface:#a8f0f4;--sea:#2433ff;--deep:#0a1a5c;--abyss:#050b2e;--buoy:#ff5b1f;--foam:#f4fbff;--ink:#050b2e;--display:'Gasoek One','Black Han Sans',sans-serif;--body:'IBM Plex Sans KR','Apple SD Gothic Neo',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--body);color:var(--ink);line-height:1.75;word-break:keep-all;background:linear-gradient(180deg,var(--sea) 0,var(--sea) 25%,var(--deep) 55%,var(--abyss) 80%,var(--abyss) 100%)}
a{color:inherit}img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--buoy);outline-offset:4px}
.skip{position:fixed;top:-100px;left:0;background:var(--foam);padding:12px;z-index:100}.skip:focus{top:0}

/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:32px;padding:26px 5vw}
.wordmark{font-family:var(--display);font-size:22px;text-decoration:none;letter-spacing:.5px}
.top nav{display:flex;gap:26px;margin-left:auto;font-weight:500}.top nav a{text-decoration:none}.top nav a:hover,.top nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:16px;text-decoration:none;padding:14px 26px;border-radius:999px;border:2px solid currentColor;cursor:pointer;background:transparent;color:inherit}
.btn.buoy{background:var(--buoy);border-color:var(--buoy);color:var(--abyss)}
.btn.buoy:hover{background:#ff7a47}
.top .btn{padding:10px 20px;font-size:14px}
.menu{display:none}

/* hero: MORE above the waterline, DIVE below it */
.hero{background:var(--surface);padding-top:110px;overflow:hidden}
.hero .ask{font-size:clamp(18px,1.8vw,24px);font-weight:500;margin:6vh 5vw 2vh}
.row{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:3vw;padding:0 5vw}
.giant{font-family:var(--display);font-weight:400;font-size:clamp(96px,19vw,300px);line-height:.8;margin:0;letter-spacing:-.01em}
.row.more{color:var(--abyss);padding-bottom:2vh}
.waterline{display:block;width:100%;height:clamp(28px,4vw,60px);margin-bottom:-1px}
.below{background:var(--sea);color:var(--foam);padding-top:2vh;padding-bottom:10vh}
.row.dive{padding-left:12vw}
.meaning{margin:0 0 1.2em;font-size:clamp(15px,1.35vw,19px);font-weight:500;line-height:1.6;max-width:16em}
.meaning b{display:block;font-family:var(--display);font-weight:400;font-size:1.35em;margin-bottom:4px}
/* sections share one rhythm; depth tag tells where you are */
.zone{padding:120px 5vw;position:relative;color:var(--foam)}
.depth{font-size:15px;font-weight:700;color:var(--buoy);font-variant-numeric:tabular-nums;margin:0 0 18px}
.zone h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.6vw,88px);line-height:1.08;margin:0 0 34px;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.5vw,21px);max-width:34em;margin:0}

.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:start}
.intro .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.letter{background:var(--foam);color:var(--abyss);padding:40px 44px;border-radius:4px 28px 4px 28px}
.letter p{margin:0 0 18px;font-size:17px}
.letter .from{font-family:var(--display);font-size:30px;margin:8px 0 0}
.letter .draft{display:inline-block;font-size:12px;border:1px dashed #8a93b8;border-radius:999px;padding:2px 10px;margin-bottom:16px;color:#4b5580}

/* questions as bubbles */
.bubbles{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.bubbles li{border:2px solid var(--foam);border-radius:50%;aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:26px;font-weight:700;line-height:1.45}
.bubbles li:nth-child(1){width:250px;font-size:20px}.bubbles li:nth-child(2){width:200px;font-size:17px;margin-top:-60px}.bubbles li:nth-child(3){width:180px;font-size:16px;margin-top:90px}.bubbles li:nth-child(4){width:230px;font-size:18px}.bubbles li:nth-child(5){width:210px;font-size:17px;margin-top:70px}.bubbles li.yours{width:170px;background:var(--buoy);border-color:var(--buoy);color:var(--abyss);margin-top:-30px}
.bubbles li.yours a{text-decoration:underline;text-underline-offset:4px}

/* dive log */
.log{width:100%;border-collapse:collapse;margin-top:10px;font-size:16px}
.log th{text-align:left;font-weight:500;color:#b9c3ff;font-size:14px;padding:0 18px 14px 0;border-bottom:2px solid var(--foam)}
.log td{padding:22px 18px 22px 0;border-bottom:1px solid #4d5bd6;vertical-align:top}
.log td.what{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);line-height:1.2;width:30%}
.log td.who{white-space:nowrap;color:var(--surface);font-weight:700}
.log-note{font-size:13px;color:#b9c3ff;margin-top:16px}

/* season stories: first-person, the person is the subject */
.sample-tag{display:inline-block;margin:22px 0 10px;font-size:14px;font-weight:500;color:var(--abyss);background:var(--surface);padding:6px 14px;border-radius:999px}
.story{display:grid;grid-template-columns:1.5fr 1fr;gap:5vw;align-items:end;padding:56px 0;border-bottom:1px solid #3b4bd8}
.story.flip{grid-template-columns:1fr 1.5fr}.story.flip blockquote{order:2}
.story blockquote{margin:0;font-size:clamp(24px,2.6vw,40px);font-weight:700;line-height:1.45;letter-spacing:-.02em}
.story .who{margin:0 0 10px;font-size:15px;color:#c5ccf2}.story .who b{display:block;font-family:var(--body);font-weight:700;font-size:30px;letter-spacing:-.02em;color:var(--foam);line-height:1.2}
.story .q{margin:0 0 18px;font-size:15px;color:var(--surface)}
.story dl{margin:0;display:grid;gap:8px}.story dl div{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.story dt{font-family:var(--display);font-size:14px;color:var(--buoy)}.story dd{margin:0;font-size:15px;font-variant-numeric:tabular-nums}
@media(max-width:700px){.story,.story.flip{grid-template-columns:1fr;gap:20px;padding:40px 0}.story.flip blockquote{order:0}}

/* path: each step sits deeper than the last */
.path{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.path li{border-top:3px solid var(--surface);padding-top:20px}
.path li:nth-child(2){margin-top:70px}.path li:nth-child(3){margin-top:140px}.path li:nth-child(4){margin-top:210px;border-color:var(--buoy)}
.path .m{font-size:14px;font-weight:700;color:var(--surface);font-variant-numeric:tabular-nums}
.path h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,36px);margin:8px 0 4px;line-height:1.1}
.path .as{font-weight:700;margin:0 0 10px}
.path p{margin:0;color:#d6dcff;font-size:15px}

/* buddies */
.buddy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:20px}
.buddy .ph{aspect-ratio:1;border-radius:50%;border:2px dashed #6f7bd6;display:grid;place-items:center;font-size:13px;color:#9aa4e6}
.buddy h3{font-family:var(--display);font-weight:400;font-size:28px;margin:18px 0 2px}
.buddy .role{color:var(--buoy);font-weight:700;font-size:14px;margin:0}
.buddy .now{color:#c5ccf2;font-size:15px;margin:8px 0 0}

/* abyss cta */
.abyss-cta{text-align:center;padding:160px 5vw 140px}
.abyss-cta h2{font-size:clamp(48px,7vw,110px)}
.glow{color:var(--buoy);text-shadow:0 0 40px #ff5b1f88}

footer.bottom{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding:30px 5vw 40px;color:#8f99c9;font-size:14px;border-top:1px solid #1c2766}
footer.bottom .wordmark{color:var(--foam)}footer.bottom nav{display:flex;gap:20px;margin-left:auto}footer.bottom a{text-decoration:none}

/* depth gauge — the one moving thing */
.gauge{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.gauge .track{width:3px;height:44vh;background:#ffffff55;border-radius:3px;position:relative;overflow:hidden}
.gauge .fill{position:absolute;top:0;left:0;right:0;height:0;background:var(--buoy)}
.gauge output{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;color:var(--buoy);background:var(--abyss);padding:4px 9px;border-radius:999px;min-width:66px;text-align:center}

@media(max-width:960px){.intro{grid-template-columns:1fr}.path{grid-template-columns:1fr 1fr}.path li:nth-child(3){margin-top:30px}.path li:nth-child(4){margin-top:100px}.buddy-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
.top{padding:18px 16px;gap:12px}.top nav{display:none;position:absolute;top:64px;left:16px;right:16px;flex-direction:column;background:var(--foam);padding:20px;border-radius:14px;gap:16px}.top nav.open{display:flex}.menu{display:block;margin-left:auto;background:none;border:0;font-size:24px;color:var(--abyss)}.top .btn{display:none}
.hero{padding-top:80px}.hero .ask{margin:4vh 16px 2vh}.row{grid-template-columns:1fr;padding:0 16px;gap:10px}.row.dive{padding-left:16px}.meaning{max-width:none}.row.more .meaning{order:-1}
.zone{padding:84px 16px}.letter{padding:28px 22px}
.bubbles{gap:14px}.bubbles li{padding:16px}.bubbles li:nth-child(n){width:46%;margin-top:0;font-size:15px}
.log thead{display:none}.log tr{display:block;padding:18px 0;border-bottom:1px solid #4d5bd6}.log td{display:block;border:0;padding:3px 0}.log td.what{width:auto}
.path{grid-template-columns:1fr}.path li:nth-child(n){margin-top:0;margin-left:calc(var(--i,0) * 22px)}
.buddy-grid{gap:18px}.buddy h3{font-size:22px}
.gauge{right:10px;top:auto;bottom:16px;transform:none}.gauge .track{display:none}
footer.bottom nav{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* workshops: the surface page. shallow water, light, the easy way in */
.ws-hero{background:var(--surface);padding:150px 5vw 70px}
.ws-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,7.4vw,120px);line-height:1.02;margin:0 0 30px;letter-spacing:-.01em}
.ws-hero .depth{color:#c23d0c}
.ws-facts{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;gap:14px 44px}
.ws-facts li{font-size:15px;font-weight:500}.ws-facts b{display:block;font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1}
.ws-page .waterline{background:var(--surface);margin-top:-1px}
.ws-page .zone{padding-top:90px;padding-bottom:90px}

.ws-cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 5vw;margin-top:40px}
.month h3{font-size:20px;font-weight:700;margin:0 0 14px}
.month table{width:100%;border-collapse:collapse;table-layout:fixed}
.month th{font-size:13px;font-weight:500;color:#b9c3ff;padding:0 0 10px;text-align:left}
.month td{height:74px;vertical-align:top;border-top:1px solid #4d5bd6;padding:6px 4px 0 0}
.month .n{font-size:14px;font-variant-numeric:tabular-nums;color:#c5ccf2}
.month td.on a{display:block;height:100%;text-decoration:none;background:var(--foam);color:var(--abyss);border-radius:10px;padding:6px 7px}
.month td.on.open a{background:var(--buoy)}
.month td.on .n{color:inherit;font-weight:700}
.month .t{display:block;font-size:12px;font-weight:700;line-height:1.3;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.month td.on a:hover{outline:2px solid var(--foam);outline-offset:2px}

.ws-list{list-style:none;padding:0;margin:30px 0 0}
.ws{display:grid;grid-template-columns:150px 1fr 220px;gap:4vw;padding:44px 0;border-top:1px solid #4d5bd6;scroll-margin-top:30px}
.ws:target{background:#ffffff10;box-shadow:0 0 0 20px #ffffff10}
.ws-date{margin:0}.ws-date b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(36px,3.6vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.ws-date span{font-size:14px;color:#c5ccf2}
.ws-team{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--surface)}
.ws-team em{font-style:normal;font-weight:500;color:var(--abyss);background:var(--foam);border-radius:999px;padding:2px 10px;margin-left:8px;font-size:12px}
.ws.open .ws-team em{background:var(--buoy)}
.ws h3{font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0 0 12px}
.ws-body p{margin:0 0 14px;max-width:36em}
.ws-make{font-size:15px;color:#d6dcff}.ws-make b{display:block;color:var(--buoy);font-size:13px}
.ws-side dl{margin:0 0 18px;display:grid;gap:6px}.ws-side dl div{display:flex;justify-content:space-between;border-bottom:1px solid #4d5bd6;padding-bottom:6px;font-size:15px}
.ws-side dt{color:#c5ccf2}.ws-side dd{margin:0;font-weight:700}
.btn.off{opacity:.5;cursor:default}

.plans{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:3vw;align-items:start;margin-top:30px}
.plan{border-top:3px solid var(--surface);padding-top:22px}
.plan h3{font-size:22px;font-weight:700;margin:0 0 6px}
.plan .price{font-family:var(--display);font-size:34px;margin:0 0 14px;line-height:1.2}.plan .price small{font-family:var(--body);font-size:15px;font-weight:500;color:#c5ccf2}
.plan p{margin:0 0 12px;color:#d6dcff}
.plan.premium{border-color:var(--buoy);background:var(--foam);color:var(--abyss);padding:30px 32px;border-radius:4px 28px 4px 28px;border-top-width:6px}
.plan.premium .price small,.plan.premium p{color:#4b5580}
.plan.premium ul{margin:0 0 24px;padding-left:1.1em}.plan.premium li{margin-bottom:8px;font-weight:500}.plan.premium li small{color:#4b5580;font-weight:400}
.lede.center{margin:0 auto 30px}

@media(max-width:960px){.ws{grid-template-columns:140px 1fr}.ws-side{grid-column:2}.plans{grid-template-columns:1fr}}
@media(max-width:700px){.ws-hero{padding:110px 16px 50px}.ws{grid-template-columns:1fr;gap:12px}.ws-side{grid-column:auto}.month td{height:62px}.month .t{font-size:11px}}