@import url('/src/styles/tokens.css');
:root{--paper:#f8f5ef;--ink:#38382f;--muted:#65675c;--line:#dcd8ce;--accent:#765f45;--panel:#ebe6da}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--font-body)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}p{line-height:1.95;color:var(--muted)}h1,h2,h3{font-family:var(--font-display);font-weight:400}h1{font-size:clamp(40px,4.1vw,68px);line-height:1.4;letter-spacing:2px;margin:28px 0}h2{font-size:clamp(30px,3vw,44px);line-height:1.5;letter-spacing:1px;margin:18px 0 24px}h3{font-size:24px;line-height:1.5}.skip{position:absolute;left:20px;top:-100px;padding:12px;background:var(--ink);color:var(--paper);z-index:10}.skip:focus{top:12px}.notice{padding:10px 16px;text-align:center;background:var(--panel);font-size:11px;letter-spacing:1px}.header{margin:0 6%;min-height:112px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font:32px Georgia,serif;letter-spacing:3px;white-space:nowrap}.wordmark span{display:block;font:9px var(--font-body);letter-spacing:1.7px;margin-top:10px}.header nav{display:flex;gap:30px;font-size:13px}.header nav a,.header-link{padding:14px 0}.header-link{font-size:12px;border-bottom:1px solid var(--accent)}.header-link span{margin-left:20px}.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--accent);line-height:1.8}.caption{font-size:11px;line-height:1.8;letter-spacing:.5px}.hero{margin:0 6%;display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center;min-height:710px;padding:60px 0 65px}.hero-copy{padding:10px 0 0 7%}.lead{font-size:15px;margin-bottom:34px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:50px;padding:16px 25px;background:var(--ink);color:var(--paper);font-size:12px}.button:hover{background:#535348}.hero-copy>.caption{margin-top:30px}.hero-art{background:var(--panel);position:relative;padding:25px;min-width:0}.hero-art svg{display:block;width:100%;height:auto}.art-label,.art-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;letter-spacing:1.5px;color:#716a59}.art-bottom{border-top:1px solid #d6cebf;padding-top:20px}.draft{fill:none;stroke:#b4aa96;stroke-width:.7;stroke-dasharray:4 6}.measure{fill:#756e5b;stroke:#a89d85;stroke-width:.6}.measure text{stroke:none;font:12px var(--font-body);letter-spacing:2px}.intro{max-width:790px;margin:0 auto;text-align:center;padding:80px 30px 110px}.intro>p:not(.eyebrow){max-width:560px;margin:20px auto}.directions,.journey,.notes{margin:0 6%;padding:80px 0;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}.section-head>p{font-size:12px}.direction-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:8%;align-items:center}.form-study{background:#eeece4;min-width:0;padding:30px;text-align:center}.study-number{display:block;text-align:left;color:var(--accent);font-size:10px;letter-spacing:2px}.form-study svg{display:block;width:100%;height:auto;max-height:340px}.form-grid{fill:none;stroke:#c8c7b9;stroke-width:1;stroke-dasharray:3 5}.form-line{fill:none;stroke:#8b7454;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.form-line:not(.form-flow){display:none}.form-study[data-form="geometry"] .form-flow,.form-study[data-form="space"] .form-flow{display:none}.form-study[data-form="geometry"] .form-geometry,.form-study[data-form="space"] .form-space{display:block}.form-study p{font-size:13px}.direction-options button{width:100%;display:flex;align-items:center;gap:24px;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:24px 12px;min-height:104px}.direction-options button[aria-pressed="true"]{background:#e9e4d8;border-color:#b3a58f}.option-number{font:12px Georgia;color:var(--accent)}.direction-options strong{font:24px var(--font-display);font-weight:400}.direction-options small{display:block;color:var(--muted);font-size:12px;line-height:1.7;margin-top:9px}.direction-options button>span:last-child{margin-left:auto}.direction-result{font-size:12px;padding:15px 12px;border-left:2px solid #b6a17f}.journey-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.journey-steps li{border-top:1px solid var(--line);padding-top:24px}.journey-steps li>span{font-size:11px;letter-spacing:2px;color:var(--accent)}.journey-steps p{font-size:13px}.notes{display:grid;grid-template-columns:1fr 1.1fr;gap:12%}.notes>div>p{font-size:13px}.questions details{border-bottom:1px solid var(--line);padding:20px 0}.questions summary{cursor:pointer;min-height:44px;align-content:center;line-height:1.8;padding-right:15px}.questions details p{font-size:12px;margin:8px 0 18px}.closing{text-align:center;background:var(--ink);color:var(--paper);margin:20px 6% 70px;padding:70px 25px}.closing .eyebrow{color:#c9bb9e}.closing h2{margin:25px 0 30px}.text-link{display:inline-block;min-height:44px;padding:10px 0;border-bottom:1px solid #bab6a7;font-size:13px}footer{margin:0 6%;border-top:1px solid var(--line);padding:40px 0 50px;display:flex;align-items:center;justify-content:space-between;gap:25px}footer p{font-size:12px}
@media(max-width:1000px){.header-link{display:none}.hero{gap:3%;min-height:auto}.hero-copy{padding-left:0}.hero-art{padding:18px}.direction-layout{gap:5%}.journey-steps{gap:25px}.notes{gap:7%}}
@media(max-width:650px){.notice{font-size:9px;line-height:1.8}.header{padding:24px 0 12px;flex-wrap:wrap;gap:18px}.wordmark{font-size:29px}.header nav{width:100%;gap:24px;font-size:12px;justify-content:space-between}.header nav a{padding:12px 0}.hero{grid-template-columns:1fr;padding:36px 0 45px;gap:36px}.hero-copy{padding:0 3%}h1{font-size:40px;letter-spacing:0;margin:22px 0}.lead{font-size:13px}.hero-art{margin:0 3%;padding:22px}.hero-art svg{max-height:420px}.intro{padding:45px 8% 65px;text-align:left}.intro>p:not(.eyebrow){font-size:13px}.intro h2{font-size:30px}.directions,.journey,.notes{padding:45px 0}.section-head{display:block;margin-bottom:25px}.section-head>p{font-size:12px}.direction-layout,.notes{grid-template-columns:1fr}.form-study{padding:22px}.form-study p{font-size:12px}.direction-options{margin-top:25px}.direction-options button{padding:22px 12px}.journey-steps{grid-template-columns:1fr;gap:24px;margin-top:30px}.journey-steps h3{font-size:23px;margin:18px 0 10px}.journey-steps p{max-width:500px}.notes{gap:20px}.closing{margin:10px 6% 45px;padding:48px 20px}.closing .eyebrow{font-size:9px;letter-spacing:1px}footer{flex-wrap:wrap;padding-top:30px}footer p{width:100%;margin:0}.art-bottom{align-items:start}.art-bottom .caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ElseIsle: a personal shore, drawn at the edge of evening. */
:root{--paper:#f4f1e9;--ink:#203c3d;--muted:#5e706a;--line:#d8dfd5;--accent:#9a7d51;--panel:#e9e7dc}
.notice{background:#112b2e;color:#ece6d5;letter-spacing:1.6px}
.header{border-color:#d5dbd1}.wordmark{padding-left:34px;position:relative}.wordmark::before{content:'';position:absolute;left:0;top:9px;width:22px;height:18px;border:1px solid #9a7d51;border-radius:60% 40% 55% 45%;transform:rotate(-25deg);box-shadow:0 0 0 4px #9a7d5110}
.hero.island-dusk{position:relative;isolation:isolate;display:flex;align-items:center;margin:20px 3% 0;padding:0;min-height:650px;background:#102d32;color:#f7efdc;overflow:hidden}
.dusk-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.dusk-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0c292fed 0%,#0c292fb3 29%,#0b2b3040 57%,transparent 85%),linear-gradient(0deg,#09272d99,transparent 35%)}
.island-dusk .hero-copy{width:100%;max-width:710px;padding:70px 6% 110px}
.island-dusk .eyebrow{color:#dac7a2;font-size:10px;letter-spacing:2.8px;margin:0 0 28px}
.island-dusk h1{font-size:clamp(43px,4.8vw,70px);letter-spacing:3px;line-height:1.5;margin:0 0 25px}
.island-dusk .lead{color:#ece6d7;font-size:14px;line-height:2.1;margin-bottom:35px}
.island-dusk .button{background:transparent;color:#f8efd7;border:1px solid #c6b995;gap:55px;min-height:51px}
.island-dusk .button:hover{background:#e9dfc61a}
.island-dusk .hero-copy>.caption{color:#cabd9f;letter-spacing:1.7px;font-size:9px;margin-top:27px}
.dusk-bottom{position:absolute;bottom:25px;left:6%;right:5%;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#e1dcc7;font-size:10px;letter-spacing:1px}
.dusk-bottom>span:last-child{font-size:9px;color:#d8dbc9;letter-spacing:.6px}
.dusk-stamp{position:absolute;right:4%;top:34px;width:110px;text-align:center;color:#e6d5a7}
.dusk-stamp svg{display:block;width:77px;margin:10px auto;fill:none;stroke:currentColor;stroke-width:.8}
.dusk-stamp span{font-size:7px;letter-spacing:1.2px}
.tide-note{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 6%;padding:28px 0;border-bottom:1px solid var(--line)}
.tide-note>span{font-size:9px;color:var(--accent);letter-spacing:2px}.tide-note p{font-size:12px;margin:0}.tide-note>a{font-size:10px;min-height:44px;display:flex;align-items:center}
.intro{max-width:none;margin:0 9%;padding:85px 0;display:grid;grid-template-columns:1.15fr 1fr;gap:12%;align-items:center;text-align:left}
.intro h2{font-size:38px}.intro>div>p:not(.eyebrow){max-width:510px;font-size:13px}.intro>div>.caption{font-size:11px}
.intro-sketch{position:relative;background:#e5e9df;max-width:390px;margin-left:auto;padding:15px 24px 25px;width:100%;text-align:center}
.intro-sketch svg{display:block;width:100%;max-height:320px}.intro-sketch>span{display:block;font-size:9px;letter-spacing:1.3px;color:#64766a}
.form-study{background-color:#e3e9df;background-image:repeating-radial-gradient(ellipse at 20% 48%,transparent 0 35px,#7098810d 36px 37px,transparent 38px 57px)}
.form-grid{stroke:#a9bba9}.form-line{stroke:#8a7654}.direction-options strong em{font:italic 14px Georgia,serif;color:#8a8f7a;margin-left:14px}.direction-options button[aria-pressed=true]{background:#e1e8dc;border-color:#a7b8a1}.direction-result{border-color:#9b956b}.closing{position:relative;overflow:hidden;background:#173a3c}.closing::before{content:'';position:absolute;width:600px;height:600px;left:-250px;top:-140px;border-radius:48% 52% 40% 60%;border:1px solid #b2bd9d22;box-shadow:0 0 0 30px #b2bd9d0a,0 0 0 60px #b2bd9d08,0 0 0 90px #b2bd9d08;pointer-events:none}.closing .eyebrow,.closing h2,.closing a{position:relative}
@media(max-width:1000px){.hero.island-dusk{min-height:610px}.island-dusk h1{font-size:52px}.island-dusk .hero-copy{padding-left:6%}.intro{gap:7%}.intro h2{font-size:33px}.dusk-image{object-position:60% center}}
@media(max-width:650px){.wordmark{padding-left:30px}.wordmark::before{width:19px;height:15px}.hero.island-dusk{margin:12px 4% 0;min-height:690px;align-items:flex-start}.dusk-image{object-position:64% center}.dusk-shade{background:linear-gradient(180deg,#0b2b30dc 0%,#0b2b3099 41%,#0b2b3030 73%,#0b2b308f),linear-gradient(90deg,#0b2b3040,transparent)}.island-dusk .hero-copy{padding:48px 7% 110px}.island-dusk .eyebrow{font-size:8px;letter-spacing:1.8px;max-width:205px;margin-bottom:23px}.island-dusk h1{font-size:39px;letter-spacing:1px;margin-bottom:23px}.island-dusk .lead{font-size:12px;line-height:2.1;margin-bottom:26px}.island-dusk .button{font-size:11px;padding:14px 20px;gap:28px;min-height:48px}.island-dusk .hero-copy>.caption{font-size:8px;line-height:1.8;letter-spacing:.8px;margin-top:22px;max-width:210px}.dusk-stamp{width:55px;right:4%;top:19px}.dusk-stamp svg{width:42px;margin:4px auto}.dusk-stamp span{font-size:5px;letter-spacing:.3px;display:block}.dusk-bottom{left:7%;right:7%;bottom:20px;font-size:9px;align-items:end}.dusk-bottom>span:last-child{max-width:88px;text-align:right;font-size:8px;line-height:1.8}.tide-note{flex-wrap:wrap;justify-content:center;gap:10px;padding:22px 0;text-align:center}.tide-note>span{font-size:8px}.tide-note>p{width:100%;font-size:11px}.tide-note>a{font-size:9px}.intro{margin:0 8%;padding:48px 0;grid-template-columns:1fr;gap:30px}.intro h2{font-size:30px}.intro>div>p:not(.eyebrow){font-size:12px}.intro>div>.caption{font-size:10px}.intro-sketch{max-width:none}.intro-sketch svg{max-height:260px}.direction-options strong em{font-size:12px;margin-left:12px}}
@media(max-width:350px){.island-dusk h1{font-size:32px}.island-dusk .eyebrow{font-size:7px;max-width:175px}.hero.island-dusk{min-height:670px}.island-dusk .lead{font-size:11px}}
.wordmark span,.eyebrow{text-transform:uppercase}
