@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root { --cream:#f5eddf; --paper:#fffaf2; --ink:#1d2926; --muted:#72736a; --line:rgba(29,41,38,.17); --orange:#e9794d; --peach:#f1b28f; --moss:#8d9b7c; --purple:#6c6483; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.page-frame { display:grid; grid-template-columns:104px 1fr; min-height:100vh; }.side-rail { position:sticky; top:0; height:100vh; padding:28px 20px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; }.brand { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; line-height:1.03; letter-spacing:-.04em; }.side-rail .brand { flex-direction:column; text-align:center; }.brand-mark { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; gap:2px; transform:rotate(-17deg); }.brand-mark i { display:block; width:6px; border-radius:5px; background:var(--ink); transform:rotate(17deg); }.brand-mark i:nth-child(1) { height:14px; background:var(--orange); }.brand-mark i:nth-child(2) { height:23px; }.brand-mark i:nth-child(3) { height:17px; background:var(--moss); }.rail-line { flex:1; width:1px; margin:28px 0; background:var(--line); }.rail-caption { margin:0; color:var(--muted); font-size:10px; line-height:1.35; text-align:center; writing-mode:vertical-rl; transform:rotate(180deg); }.rail-bottom { display:flex; gap:5px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em; }.rail-slash { color:var(--orange); }
.site-content { min-width:0; }.topbar { height:76px; padding:0 clamp(24px,5vw,80px); display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--line); }.topbar-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); }.topnav { display:flex; gap:clamp(18px,3vw,42px); margin-left:auto; }.topnav a { color:var(--muted); font-size:12px; font-weight:600; }.topnav a:hover { color:var(--ink); }.topbar-actions { display:flex; align-items:center; gap:16px; }.language-switcher { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:99px; }.lang-button { width:28px; height:25px; padding:0; border:0; border-radius:99px; background:transparent; color:var(--muted); cursor:pointer; font-size:10px; font-weight:700; }.lang-button.is-active { background:var(--ink); color:var(--cream); }.menu-button { display:none; padding:8px; border:0; background:transparent; }.menu-button span { display:block; width:24px; height:1px; margin:5px; background:var(--ink); }
main { padding:0 clamp(24px,5vw,80px); }.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }.opening { min-height:calc(100vh - 76px); padding:clamp(60px,8vw,115px) 0 32px; display:grid; grid-template-columns:1fr minmax(0,2.2fr) .8fr; grid-template-rows:1fr auto; gap:36px; border-bottom:1px solid var(--line); }.issue-label { display:flex; flex-direction:column; align-items:flex-start; gap:12px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.issue-label span:first-child { color:var(--orange); }.opening-main { align-self:center; }.opening-kicker { margin:0 0 22px; color:var(--orange); font-size:12px; font-weight:700; letter-spacing:.03em; }.opening h1 { max-width:770px; margin:0 0 28px; font-size:clamp(58px,9vw,142px); line-height:.9; letter-spacing:-.085em; font-weight:600; }.opening h1 em { font-family:var(--serif); font-weight:500; letter-spacing:-.09em; }.opening-intro { max-width:490px; margin:0 0 30px; color:var(--muted); font-size:17px; line-height:1.55; }.arrow-link { display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; }.arrow-link span { color:var(--orange); font-size:18px; line-height:0; }.opening-side { align-self:center; }.stamp { width:112px; height:112px; margin:0 0 32px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--ink); border-radius:50%; transform:rotate(12deg); }.stamp span { font-size:34px; font-weight:700; letter-spacing:-.1em; }.stamp small { font-size:8px; font-weight:700; line-height:1.1; text-align:center; }.opening-side p { color:var(--muted); font-family:var(--serif); font-size:15px; line-height:1.3; }.opening-side em { color:var(--ink); }.opening-footer { grid-column:1 / -1; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.opening-footer span:first-child,.opening-footer span:last-child { color:var(--orange); }
.thesis { padding:clamp(85px,11vw,150px) 0; display:grid; grid-template-columns:1fr 1.6fr .75fr; gap:30px; align-items:start; }.section-number { display:block; margin-bottom:9px; color:var(--orange); font-size:11px; font-weight:700; }.thesis-label p,.section-head p,.scene-header p,.method-title p { margin:0; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.thesis-copy > p { margin:0 0 16px; color:var(--orange); font-size:14px; font-weight:700; }.thesis-copy h2 { max-width:690px; margin:0; font-size:clamp(40px,5.8vw,82px); line-height:.97; letter-spacing:-.07em; }.thesis-copy em,.scene-copy h2 em,.method h2 em,.closing h2 em { font-family:var(--serif); font-weight:500; letter-spacing:-.07em; }.thesis-aside { padding-top:35px; }.scribble { display:block; margin-bottom:16px; color:var(--orange); font-size:28px; }.thesis-aside p { max-width:190px; margin:0; color:var(--muted); font-size:13px; }
.service-index { padding:34px 0 clamp(95px,12vw,170px); }.section-head { display:grid; grid-template-columns:.8fr 2fr auto; gap:30px; align-items:end; padding-bottom:28px; border-bottom:1px solid var(--line); }.section-head h2 { margin:0; font-size:clamp(38px,4.8vw,66px); line-height:.98; letter-spacing:-.07em; }.section-head h2 em { font-family:var(--serif); font-weight:500; }.section-mark { color:var(--orange); font-size:30px; }.service-row { border-bottom:1px solid var(--line); }.service-trigger { width:100%; padding:25px 0; display:grid; grid-template-columns:55px 1fr 35px; gap:18px; align-items:center; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }.service-number { color:var(--orange); font-size:11px; font-weight:700; }.service-trigger h3 { margin:0; font-size:clamp(22px,3vw,40px); font-weight:500; letter-spacing:-.05em; }.service-plus { justify-self:end; font-size:24px; font-weight:300; }.service-detail { max-height:0; padding:0 53px; overflow:hidden; display:flex; justify-content:space-between; gap:30px; transition:max-height .35s ease,padding .35s ease; }.service-row.is-open .service-detail { max-height:150px; padding-bottom:25px; }.service-detail p { max-width:530px; margin:0; color:var(--muted); font-size:14px; }.detail-note { align-self:end; color:var(--orange); font-family:var(--serif); font-size:13px; font-style:italic; }
.scenes { margin:0 calc(clamp(24px,5vw,80px) * -1); padding:clamp(75px,9vw,125px) clamp(24px,5vw,80px); background:var(--moss); color:var(--paper); }.scene-header { display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,250,242,.35); }.scene-header p { color:rgba(255,250,242,.75); }.scene-count { font-size:11px; font-weight:700; }.scene-layout { padding:58px 0 55px; display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; align-items:center; }.scene-kicker { margin:0 0 15px; color:var(--peach); font-size:13px; font-weight:700; }.scene-copy h2 { max-width:500px; margin:0 0 25px; font-size:clamp(42px,5.4vw,76px); line-height:.95; letter-spacing:-.07em; }.scene-description { max-width:300px; margin:0; color:rgba(255,250,242,.72); font-size:14px; }.scene-window { background:var(--paper); color:var(--ink); box-shadow:16px 16px 0 rgba(29,41,38,.14); }.window-top,.window-bottom { min-height:42px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.window-top { border-bottom:1px solid var(--line); }.window-bottom { border-top:1px solid var(--line); }.window-bottom span:last-child { max-width:260px; text-align:right; }.window-dots { display:flex; gap:4px; }.window-dots i { width:6px; height:6px; border-radius:50%; background:var(--orange); }.window-dots i:nth-child(2) { background:var(--peach); }.window-dots i:nth-child(3) { background:var(--moss); }
.scene-art { position:relative; height:370px; overflow:hidden; background:var(--peach); transition:background .35s ease; }.scene-art:before { content:''; position:absolute; inset:11%; border:1px solid rgba(29,41,38,.25); border-radius:50%; transform:rotate(-17deg); }.art-sun { position:absolute; top:13%; right:17%; width:80px; height:80px; border-radius:50%; background:var(--orange); }.art-line { position:absolute; width:130%; height:1px; left:-15%; background:rgba(29,41,38,.32); transform:rotate(-22deg); }.line-a { top:43%; }.line-b { top:61%; transform:rotate(12deg); }.art-block { position:absolute; bottom:0; background:var(--moss); transform:skewY(-12deg); }.block-a { left:5%; width:37%; height:43%; }.block-b { right:5%; width:32%; height:32%; background:var(--purple); }.art-label { position:absolute; left:12%; bottom:15%; color:var(--ink); font-family:var(--serif); font-size:34px; line-height:.9; transform:rotate(-6deg); }.art-label small { font-family:var(--sans); font-size:10px; letter-spacing:.03em; }.scene-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,250,242,.35); }.scene-tab { padding:17px 0; display:flex; gap:14px; border:0; border-bottom:1px solid transparent; background:transparent; color:rgba(255,250,242,.62); text-align:left; cursor:pointer; font-size:14px; }.scene-tab span:first-child { color:var(--peach); font-size:10px; font-weight:700; }.scene-tab.is-active { color:var(--paper); border-bottom-color:var(--paper); }
.method { padding:clamp(95px,12vw,170px) 0; display:grid; grid-template-columns:.75fr 1.25fr; gap:10vw; }.method-title h2 { max-width:460px; margin:36px 0 0; font-size:clamp(40px,5vw,70px); line-height:.96; letter-spacing:-.07em; }.notebook { position:relative; padding:27px 30px 35px; background:var(--paper); border:1px solid var(--line); box-shadow:9px 9px 0 var(--peach); transform:rotate(1deg); }.notebook-top { display:flex; justify-content:space-between; padding-bottom:20px; color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.07em; }.method-step { display:grid; grid-template-columns:48px 1fr; gap:15px; padding:22px 0; border-top:1px solid var(--line); }.method-step > span { color:var(--orange); font-size:11px; font-weight:700; }.method-step h3 { margin:0 0 5px; font-size:19px; letter-spacing:-.04em; }.method-step p { max-width:420px; margin:0; color:var(--muted); font-size:13px; }.notebook-signoff { margin-top:20px; color:var(--orange); font-family:var(--serif); font-size:14px; font-style:italic; }
.closing { margin:0 calc(clamp(24px,5vw,80px) * -1); padding:clamp(70px,9vw,125px) clamp(24px,5vw,80px); background:var(--orange); }.closing-top { display:flex; justify-content:space-between; margin-bottom:90px; color:rgba(29,41,38,.62); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.closing h2 { max-width:850px; margin:0 0 28px; font-size:clamp(48px,7.6vw,112px); line-height:.9; letter-spacing:-.08em; }.closing p { max-width:400px; margin:0 0 30px; color:rgba(29,41,38,.75); font-size:16px; }.closing .arrow-link { border-color:var(--ink); }
.footer { padding:28px clamp(24px,5vw,80px) 32px; display:flex; align-items:center; gap:30px; border-top:1px solid var(--line); }.footer p { margin:0; color:var(--muted); font-size:11px; }.footer-note { margin-left:auto; color:var(--muted); font-size:10px; }
.contact-details { padding:clamp(80px,10vw,135px) 0; border-top:1px solid var(--line); }.contact-details-head { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:28px; border-bottom:1px solid var(--line); }.contact-details-head p { margin:0; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.contact-details-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; padding-top:48px; align-items:start; }.contact-copy h2 { margin:0 0 26px; font-size:clamp(34px,5vw,68px); line-height:.95; letter-spacing:-.07em; }.contact-copy h2 em { font-family:var(--serif); font-weight:500; }.contact-label { margin:0 0 9px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.contact-address { max-width:390px; margin:0 0 28px; color:var(--muted); font-size:16px; line-height:1.55; }.contact-emails { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:30px; }.contact-emails a { color:var(--ink); font-size:16px; line-height:1.7; border-bottom:1px solid var(--line); }.map-card { min-height:360px; overflow:hidden; background:var(--paper); border:1px solid var(--line); box-shadow:12px 12px 0 var(--peach); }.map-card iframe { width:100%; height:360px; display:block; border:0; filter:saturate(.72) sepia(.08); }
@media (max-width:1050px) { .page-frame { grid-template-columns:76px 1fr; }.side-rail { padding-left:12px; padding-right:12px; }.opening { grid-template-columns:.6fr 2fr .7fr; }.topnav { gap:18px; } }
@media (max-width:780px) { .page-frame { display:block; }.side-rail { display:none; }.topbar { height:68px; }.topnav { position:absolute; top:68px; left:0; right:0; z-index:10; padding:18px 24px; display:none; flex-direction:column; gap:14px; background:var(--paper); border-bottom:1px solid var(--line); }.topnav.is-open { display:flex; }.menu-button { display:block; }.opening { min-height:auto; padding-top:70px; grid-template-columns:1fr; grid-template-rows:auto; gap:28px; }.issue-label { flex-direction:row; justify-content:space-between; }.opening-main { padding-top:35px; }.opening-side { display:flex; align-items:center; gap:25px; }.stamp { flex:none; margin:0; width:86px; height:86px; }.stamp span { font-size:27px; }.opening-side p { margin:0; }.opening-footer { margin-top:60px; }.thesis { grid-template-columns:1fr; gap:32px; }.thesis-aside { padding-top:0; }.section-head { grid-template-columns:1fr auto; }.section-head h2 { grid-column:1 / -1; grid-row:2; }.service-detail { padding-left:0; }.scenes { margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; }.scene-layout { grid-template-columns:1fr; gap:45px; }.scene-tabs { grid-template-columns:repeat(2,1fr); gap:0 20px; }.method { grid-template-columns:1fr; gap:55px; }.closing { margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; }.contact-details { padding-left:0; padding-right:0; }.contact-details-grid { grid-template-columns:1fr; gap:42px; }.map-card,.map-card iframe { height:300px; min-height:300px; }.footer { flex-wrap:wrap; }.footer-note { margin-left:0; } }
@media (max-width:480px) { main { padding-left:20px; padding-right:20px; }.topbar { padding-left:20px; padding-right:20px; }.topbar-meta { font-size:10px; }.opening h1 { font-size:clamp(52px,16vw,75px); }.opening-intro { font-size:16px; }.opening-footer span:nth-child(2) { max-width:150px; text-align:center; }.service-trigger { grid-template-columns:31px 1fr 24px; gap:8px; padding:21px 0; }.service-trigger h3 { font-size:24px; }.service-detail { display:block; }.detail-note { display:block; margin-top:16px; }.scene-art { height:300px; }.art-label { font-size:28px; }.window-bottom span:last-child { max-width:165px; }.notebook { padding-left:20px; padding-right:20px; }.closing-top { margin-bottom:65px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms !important; }.reveal { opacity:1; transform:none; } }

/* image layer: tactile visuals sit inside the editorial system without changing its structure */
.opening-side { position:relative; }
.opening-image { width:100%; min-width:175px; aspect-ratio:1.05 / 1; margin:0 0 25px; overflow:hidden; border:1px solid rgba(29,41,38,.18); border-radius:8px 42% 8px 8px; transform:rotate(2deg); background:var(--peach); }
.opening-image img { width:100%; height:100%; display:block; object-fit:cover; }
.opening-side .stamp { position:absolute; top:83px; left:-31px; z-index:2; width:88px; height:88px; margin:0; background:var(--cream); }
.opening-side > p { padding-left:22px; }
.scene-art { background:var(--paper); }
.scene-art:before,.art-sun,.art-line,.art-block { display:none; }
.scene-art img { width:100%; height:100%; display:block; object-fit:cover; }
.scene-image-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(29,41,38,.02) 35%,rgba(29,41,38,.28)); pointer-events:none; }
.scene-art .art-label { z-index:2; padding:8px 12px; background:rgba(255,250,242,.78); }
@media (max-width:780px) { .opening-side { display:grid; grid-template-columns:minmax(140px,.75fr) 1fr; gap:25px; align-items:center; }.opening-image { grid-row:1 / span 2; min-width:0; margin:0; }.opening-side .stamp { position:relative; top:auto; left:auto; }.opening-side > p { padding-left:0; } }