@font-face{font-family:Manrope;src:url('../fonts/Manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{--paper:#fafbfc;--ink:#18212b;--slate:#627180;--muted:#8c98a5;--line:#dce3ea;--blue:#e9eef5;--accent:#375aca;--accent-dark:#2949ae;--white:#fff;--radius:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Inter,'Segoe UI',Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible,label:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(1440px,calc(100% - 72px));margin-inline:auto}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:12px;z-index:50;padding:10px 16px;background:var(--white);border:2px solid var(--accent)}
.skip-link:focus{left:12px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.045em;line-height:1.14}
h1{font-size:clamp(43px,5.2vw,76px);font-weight:760}
h2{font-size:clamp(29px,3vw,42px);font-weight:730}
h3{font-size:clamp(22px,2vw,30px);font-weight:700}
.site-header{height:64px;background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:30}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-logo{width:40px;height:40px;object-fit:contain;flex:none}
.brand-name{font-size:19px;letter-spacing:-.045em;font-weight:800;white-space:nowrap}
.primary-nav{display:flex;align-items:center;gap:clamp(16px,2vw,31px);white-space:nowrap}
.primary-nav a,.mobile-nav a{text-decoration:none;font-size:13px;font-weight:650;color:#495665}
.primary-nav a:hover,.mobile-nav a:hover{color:var(--accent)}
.mobile-nav{display:none;position:relative;flex:none}
.mobile-nav summary{cursor:pointer;list-style:none;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink)}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav nav{position:absolute;right:0;top:34px;z-index:20;width:min(260px,calc(100vw - 30px));padding:10px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 45px #18212b21}
.mobile-nav a{display:block;padding:11px 13px;border-radius:6px}
.mobile-nav a:hover{background:var(--blue)}
.home-lead{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(270px,.72fr);align-items:end;gap:45px;padding-top:48px;padding-bottom:27px}
.home-lead__copy{max-width:810px}
.home-kicker{font-size:13px;color:var(--accent);font-weight:750;letter-spacing:.01em;margin-bottom:14px}
.home-lead h1{font-size:clamp(43px,4.7vw,64px);margin:0}
.home-lead__summary{max-width:500px;font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:#4d5d6b;margin:0 0 4px}
.room-section{padding-bottom:66px}
.room-explorer{min-width:0;margin:0;padding:0;border:0}
.mode-radio{position:absolute;width:1px;height:1px;opacity:0}
.mode-switch{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;background:var(--blue);padding:7px 8px 7px 24px;border-radius:12px 12px 0 0}
.mode-switch__intro{font-size:14px;font-weight:700;color:var(--ink)}
.mode-switch__options{display:flex;align-items:center;gap:4px;padding:4px;background:#dfe7f1;border-radius:9px}
.mode-switch label{display:inline-flex;align-items:center;justify-content:center;min-width:83px;min-height:35px;padding:7px 13px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:750;color:#566778;transition:background .15s,color .15s}
#room-work:checked~.mode-switch label[for=room-work],#room-dine:checked~.mode-switch label[for=room-dine],#room-sleep:checked~.mode-switch label[for=room-sleep]{background:var(--white);color:var(--accent);box-shadow:0 1px 4px #18212b1a}
#room-work:focus-visible~.mode-switch label[for=room-work],#room-dine:focus-visible~.mode-switch label[for=room-dine],#room-sleep:focus-visible~.mode-switch label[for=room-sleep]{outline:3px solid var(--accent);outline-offset:2px}
.explorer-figure{margin:0;background:var(--blue);padding:0 10px 11px;border-radius:0 0 12px 12px}
/* Original 1086×1448 triptych: show 464 source pixels starting at y=0, 476 or 952. */
.stage-frame{position:relative;overflow:hidden;aspect-ratio:1086/464;background:#c9d4dc;border-radius:8px}
.stage-panel{display:none;position:absolute;left:0;width:100%;max-width:none;height:auto}
.stage-panel--work{top:0}
.stage-panel--dine{top:0;transform:translateY(-32.873%)}
.stage-panel--sleep{top:0;transform:translateY(-65.746%)}
#room-work:checked~.explorer-figure .stage-panel--work,#room-dine:checked~.explorer-figure .stage-panel--dine,#room-sleep:checked~.explorer-figure .stage-panel--sleep{display:block}
.explorer-figure figcaption{font-size:11px;color:#5d6a76;padding:10px 4px 1px;line-height:1.5}
.mode-notes{border-bottom:1px solid var(--line)}
.mode-note{display:none;grid-template-columns:minmax(0,1fr) minmax(230px,.52fr);align-items:center;gap:30px;padding:26px 0}
#room-work:checked~.mode-notes .mode-note--work,#room-dine:checked~.mode-notes .mode-note--dine,#room-sleep:checked~.mode-notes .mode-note--sleep{display:grid}
.mode-note h2{font-size:clamp(25px,2.5vw,35px);margin:0 0 5px}
.mode-note p{color:var(--slate);font-size:14px;line-height:1.6;margin:0}
.mode-note details{border:1px solid var(--line);background:var(--white);border-radius:9px;padding:13px 16px}
.mode-note summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:750}
.mode-note details p{padding-top:12px}
.planning-principle{background:var(--blue)}
.planning-principle__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10%;align-items:center;padding-block:56px}
.planning-principle h2{margin:0;max-width:440px}
.planning-principle p{max-width:650px;color:#455667;font-size:16px;line-height:1.7;margin:0}
.topics{padding-top:100px;padding-bottom:80px}
.section-intro{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:33px}
.section-label{font-size:13px;color:var(--accent);font-weight:750;margin-bottom:10px}
.section-intro h2{margin:0}
.section-intro>p{max-width:420px;margin:0;color:var(--slate);font-size:14px;line-height:1.65}
.topic-list{display:grid;grid-template-columns:1.04fr .96fr;grid-template-rows:repeat(3,auto);column-gap:40px}
.topic{padding:23px 0;border-top:1px solid var(--line)}
.topic:first-child{grid-row:1/4;background:var(--blue);border:0;border-radius:12px;padding:38px;display:flex;flex-direction:column;justify-content:end;min-height:340px;position:relative;overflow:hidden}
.topic:first-child h3{font-size:clamp(30px,3vw,46px);max-width:460px}
.topic:last-child{border-bottom:1px solid var(--line)}
.topic h3{font-size:clamp(20px,1.8vw,26px);margin:0 0 7px;position:relative}
.topic h3 a{text-decoration:none}
.topic h3 span{font-size:.75em;color:var(--accent)}
.topic p{font-size:14px;line-height:1.65;color:var(--slate);max-width:560px;margin:0;position:relative}
.latest{padding-bottom:75px}
.latest>h2{font-size:32px}
.reading-note{display:flex;align-items:center;gap:30px;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reading-note h2{font-size:20px;letter-spacing:-.025em;flex:none;margin:0}
.reading-note p{font-size:14px;color:var(--slate);margin:0}
.archive-note{display:flex;align-items:center;justify-content:space-between;gap:60px;padding-block:58px 76px;border-top:1px solid var(--line)}
.archive-note h2{font-size:29px;margin:0 0 8px}
.archive-note p{font-size:14px;max-width:670px;color:var(--slate);margin:0;line-height:1.65}
.archive-note>a{white-space:nowrap;font-size:14px;font-weight:750;color:var(--accent);text-decoration:none}
.site-footer{background:#eef2f6;border-top:1px solid var(--line)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-block:55px}
.footer-brand{font-size:24px;font-weight:800;letter-spacing:-.045em;margin:0 0 8px}
.footer-inner p{color:var(--slate);font-size:13px}
.footer-inner .eyebrow{color:var(--ink);font-size:13px;font-weight:750;margin:4px 0 17px}
.footer-inner a{display:block;text-decoration:none;color:#4e6070;font-size:13px;margin:9px 0}
.footer-inner ul{list-style:none;padding:0;margin:0}
.footer-note{max-width:370px;line-height:1.7}
.footer-bottom{border-top:1px solid #d1dae4;padding-block:20px;font-size:11px;color:var(--slate)}
.page-main{padding-block:72px 110px;min-height:55vh}
.page-intro{max-width:800px;margin-bottom:42px}
.eyebrow{font-size:13px;color:var(--accent);font-weight:750;margin-bottom:13px}
.page-intro h1{font-size:clamp(38px,4.6vw,62px);margin:0 0 17px}
.page-intro>p:last-child{color:var(--slate);font-size:16px;line-height:1.7}
.page-main .story-grid{margin-top:32px}
.search-form{display:flex;max-width:590px;gap:8px}
.search-form label{flex:1}
.search-field{padding:12px 14px;width:100%;border:1px solid var(--line);border-radius:6px;font:inherit;background:var(--white)}
.search-submit{padding:12px 18px;border:0;border-radius:6px;background:var(--accent);color:var(--white);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.search-submit:hover{background:var(--accent-dark)}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.story-card{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}
.story-card__image{display:block;aspect-ratio:1.6;overflow:hidden;background:var(--blue)}
.story-card__image img{width:100%;height:100%;object-fit:cover}
.story-card__placeholder{display:grid;place-items:center;width:100%;height:100%;color:var(--slate);font-size:45px;font-weight:800}
.story-card__body{padding:22px}
.story-card__body .eyebrow{font-size:11px;color:var(--slate);margin-bottom:9px}
.story-card h3{font-size:23px;line-height:1.25;margin:0 0 12px}
.story-card h3 a{text-decoration:none}
.story-card__body>p:not(.eyebrow){color:var(--slate);font-size:13px}
.text-link{color:var(--accent);font-size:13px;font-weight:750;text-decoration:none}
.pagination{margin:44px 0}
.pagination ul{display:flex;flex-wrap:wrap;gap:6px;padding:0;list-style:none}
.pagination a,.pagination span{display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:var(--white)}
.pagination [aria-current],.pagination .current{background:var(--accent);border-color:var(--accent);color:var(--white)}
.article-wrap{max-width:850px;margin-inline:auto;padding:72px 24px 100px;min-height:55vh}
.article-wrap h1{font-size:clamp(38px,4.5vw,62px);margin:0 0 18px}
.article-meta{font-size:13px;color:var(--slate);margin:0 0 26px}
.lead{font-size:19px;color:#4b5c6b;line-height:1.65}
.article-hero{margin:34px 0}
.article-hero img{width:100%;border-radius:9px}
.article-hero figcaption{font-size:12px;color:var(--slate);margin-top:8px}
.prose{font-size:17px;line-height:1.82;overflow-wrap:anywhere}
.prose h2{font-size:31px;margin:1.7em 0 .5em}
.prose h3{font-size:24px;margin:1.4em 0 .5em}
.prose img,.prose figure{max-width:100%;height:auto}
.prose blockquote{border-left:3px solid var(--accent);padding-left:22px;margin-left:0;color:#46586a}
.prose a{color:var(--accent)}
.post-nav{display:flex;justify-content:space-between;gap:20px;margin-top:52px;border-top:1px solid var(--line);padding-top:24px}
.post-nav a{max-width:45%;text-decoration:none;font-size:14px;color:var(--accent)}
.comments-area{border-top:1px solid var(--line);margin-top:60px;padding-top:30px}
.comments-area input,.comments-area textarea{max-width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;font:inherit}
.comments-area input[type=submit]{background:var(--accent);color:var(--white);cursor:pointer}
@media(max-width:1060px){.primary-nav{display:none}.mobile-nav{display:block}.topic-list{column-gap:26px}}
@media(max-width:760px){.wrap{width:min(100% - 36px,1440px)}.site-header{height:60px}.brand-logo{width:37px;height:37px}.brand-name{font-size:18px}.home-lead{grid-template-columns:1fr;gap:13px;padding-top:35px;padding-bottom:25px}.home-lead h1{font-size:clamp(42px,8vw,60px)}.mode-switch{padding-left:13px}.mode-switch__intro{font-size:12px}.mode-switch label{min-width:64px}.stage-frame{aspect-ratio:1086/696}.stage-panel{width:150%;left:-25%}.mode-note{grid-template-columns:1fr;gap:15px;padding:23px 0}.planning-principle__inner{grid-template-columns:1fr;gap:18px;padding-block:43px}.topics{padding-top:67px;padding-bottom:52px}.section-intro{display:block}.section-intro>p{margin-top:13px}.topic-list{grid-template-columns:1fr}.topic:first-child{grid-row:auto;min-height:250px}.reading-note{display:block}.reading-note p{margin-top:7px}.archive-note{display:block;padding-block:45px 65px}.archive-note>a{display:inline-block;margin-top:18px}.footer-inner{grid-template-columns:1fr 1fr;gap:28px;padding-block:45px}.footer-inner>div:first-child{grid-column:1/-1}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:530px){.home-lead h1{font-size:43px}.home-lead__summary{font-size:15px}.mode-switch{display:block;padding:10px}.mode-switch__intro{display:block;margin:1px 0 9px}.mode-switch__options{width:100%;justify-content:space-between}.mode-switch label{flex:1;min-width:0}.explorer-figure figcaption{font-size:10px}.topic:first-child{padding:27px;min-height:220px}.topic:first-child h3{font-size:31px}.story-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr}.search-form{flex-direction:column}.post-nav{display:block}.post-nav a{display:block;max-width:none;margin:12px 0}}
@media(max-width:360px){.wrap{width:calc(100% - 28px)}.header-inner{gap:8px}.brand{gap:6px}.brand-logo{width:34px;height:34px}.brand-name{font-size:17px}.mode-switch label{font-size:12px;padding-inline:7px}.home-lead h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mode-switch label{transition:none}}