@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin-400-normal.woff2')}@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin-600-normal.woff2');font-weight:600}@font-face{font-family:Instrument;src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2');font-style:italic}*{box-sizing:border-box}html{background:#090f13;color:#f1efe6;font-family:Manrope,Arial,sans-serif;scroll-behavior:auto}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #d4b576;outline-offset:6px}button{border:0;background:none}button[hidden],[hidden]{display:none!important}.skip{position:fixed;top:10px;left:10px;z-index:20;background:#e1c794;color:#090f13;padding:12px;transform:translateY(-150%)}.skip:focus{transform:none}#journey{position:relative}#stage{height:100svh;min-height:0;position:relative;overflow:hidden;background:#091015}.is-3d #journey{height:540svh}.is-3d #stage{position:sticky;top:0}#viewport{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#071014c9 0%,transparent 62%),linear-gradient(0deg,#060d14a8,transparent 22%,transparent 78%,#0810168c)}header{position:absolute;left:5%;right:5%;top:32px;display:flex;justify-content:space-between;align-items:center;gap:18px;z-index:3}.brand{font-size:24px;font-weight:600;letter-spacing:5px}.brand span{font-size:9px;display:block;letter-spacing:9px;margin-top:1px}.edition{font-size:9px;letter-spacing:2px;color:#b8b8af;display:flex;align-items:center;gap:16px}.edition i{height:4px;width:4px;background:#d3ba86;border-radius:50%}.return{font-size:10px;letter-spacing:.5px;border-bottom:1px solid #d6c8a64d;padding:10px 0}.hero-copy{position:absolute;left:8%;top:25%;max-width:470px;pointer-events:auto;transition:opacity .2s}.eyebrow{font-size:10px;letter-spacing:3px;color:#d1b980}.eyebrow span{display:inline-block;width:23px;height:1px;background:#c6ae7b;vertical-align:middle;margin-right:12px}h1{font-size:clamp(45px,5.2vw,80px);line-height:1.04;font-weight:400;letter-spacing:-3px;margin:24px 0}em{font-family:Instrument,Georgia,serif;font-weight:400;color:#dbc593}.intro{font-size:13px;line-height:1.85;color:#c6cbc7;margin:22px 0 30px}.begin{border-bottom:1px solid #d1b98080;padding:0 0 12px;font-size:11px;letter-spacing:1px}.begin span{margin-left:27px;color:#d1b980}.scene-note{position:absolute;left:8%;bottom:105px;display:flex;gap:13px;align-items:center}.scene-note p{font-size:8px;letter-spacing:1.6px;line-height:2;color:#c8b689;margin:0}.scene-note p span{letter-spacing:.3px;color:#a6b3b5;font-size:9px}.small-line{width:26px;height:1px;background:#c8b689}.chapter{position:absolute;right:5%;bottom:110px;text-align:right}.chapter>span{font-size:10px;letter-spacing:2px;color:#d5bb86}.chapter p{font-size:12px;color:#bcc6c8}.controls{position:absolute;bottom:24px;left:5%;right:5%;display:flex;align-items:center;gap:20px;z-index:4}.scroll-label{font-size:8px;letter-spacing:1.4px;color:#b7c0c4;margin-right:auto}.scroll-label>span{margin-left:16px;color:#dac394}.controls nav{display:flex;gap:12px}.controls nav button{font-size:10px;color:#b4bec1;padding:10px}.controls nav button[aria-current]{color:#ead3a5;border-bottom:1px solid #d6bd83}.controls>button{font-size:9px;color:#b7c3c6;border:1px solid #ffffff25;border-radius:18px;padding:9px 13px}.progress{position:absolute;left:0;right:0;bottom:-24px;height:2px;background:#ffffff16}.progress span{height:100%;width:100%;display:block;background:#c9ab72;transform:scaleX(0);transform-origin:left}#screen-prompt{position:absolute;left:50%;bottom:105px;transform:translateX(-50%);text-align:center;background:#091117d9;padding:16px 22px;border:1px solid #bfa47766;z-index:3;white-space:nowrap}#screen-prompt>span{font-size:8px;letter-spacing:2px;color:#c6b482;display:block;margin-bottom:10px}#screen-prompt button{font-size:12px}#fallback{position:absolute;inset:0;padding:170px 8% 90px;background:radial-gradient(ellipse at 70% 30%,#263332,#0b131a 65%);z-index:1}#fallback h2{font-size:clamp(44px,6vw,85px);font-weight:400;line-height:1;letter-spacing:-2px;position:relative;z-index:2}#fallback p{max-width:400px;font-size:13px;line-height:1.8;position:relative;z-index:2}#fallback a{display:inline-block;border-bottom:1px solid #ceb880;padding:20px 0 10px;position:relative;z-index:2;font-size:12px}.fallback-columns{position:absolute;right:7%;top:20%;bottom:0;width:33%;display:flex;gap:12%}.fallback-columns i{width:25%;border-top:15px solid #c4bda180;background:repeating-linear-gradient(90deg,#b9b9b11f 0 8%,#adb5b40a 9% 17%);box-shadow:0 0 45px #c7bca010}.is-3d #fallback{display:none}.is-fallback .hero-copy,.is-fallback .scene-note,.is-fallback .chapter,.is-fallback .controls,.is-fallback .vignette{display:none}#portal{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 0%,#173238,#0c161e 70%);z-index:3;display:flex;flex-direction:column;justify-content:center;padding:100px 9% 95px;opacity:0;transition:opacity .35s}#portal h2,.project-entry h2{font-size:clamp(30px,4vw,55px);font-weight:400;letter-spacing:-1.7px;margin:14px 0}#portal>p{font-size:12px;color:#a8bec3;margin:0 0 30px}.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.portal-grid a{background:#15242a;border:1px solid #b5b19a30;overflow:hidden;border-radius:3px;transition:transform .2s}.portal-grid a:hover{transform:translateY(-5px)}.portal-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.portal-grid a>span{padding:18px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.portal-grid small{font-size:9px;color:#c5b285;letter-spacing:0}.portal-back{align-self:flex-start;margin-top:24px;font-size:11px;color:#c6b285}.project-entry{padding:100px 8%;background:#0d1921}.project-entry>p:not(.eyebrow){font-size:13px;max-width:550px;color:#b3c4c9;line-height:1.8}.project-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px;font-size:12px}.project-links a{border-bottom:1px solid #9cafac66;padding-bottom:8px}.at-portal .controls,.at-portal .chapter,.at-portal .scene-note,.at-portal .hero-copy{visibility:hidden}.at-portal .vignette{opacity:0}body:not(.is-3d) .hero-copy,body:not(.is-3d) .scene-note,body:not(.is-3d) .chapter,body:not(.is-3d) .controls{display:none}
@media(max-width:700px){#stage{min-height:0}header{top:24px}.brand{font-size:20px}.edition{font-size:7px;letter-spacing:1px;gap:7px}.return{display:none}.hero-copy{top:15%;left:7%;max-width:300px}h1{font-size:44px;letter-spacing:-1.7px;margin:15px 0}.eyebrow{font-size:8px;letter-spacing:1.7px}.intro{font-size:11px;margin:15px 0}.begin{font-size:10px}.vignette{background:linear-gradient(180deg,#071014a8,transparent 60%,#060d14b0)}.scene-note{left:7%;bottom:126px}.scene-note p{font-size:7px}.scene-note p span{font-size:8px}.chapter{right:6%;bottom:175px}.controls{gap:8px;flex-wrap:wrap;bottom:22px}.scroll-label{flex-basis:100%;font-size:7px;margin-bottom:2px}.controls nav{gap:5px;margin-right:auto}.controls nav button{padding:8px}.controls>button{font-size:8px;padding:8px}.progress{bottom:-22px}#portal{padding:85px 7% 30px;justify-content:flex-start;overflow:auto}#portal h2{font-size:31px}.portal-grid{gap:10px;grid-template-columns:1fr}.portal-grid a{display:grid;grid-template-columns:95px 1fr;align-items:center}.portal-grid img{aspect-ratio:1;object-fit:cover}.portal-grid a>span{display:block;padding:14px;font-size:10px}.portal-grid small{display:block;margin-top:10px}#portal>p{margin-bottom:18px}.portal-back{margin-top:22px}.project-entry{padding:70px 7%}.project-entry h2{font-size:34px}#fallback{padding-top:160px}.fallback-columns{opacity:.5;right:-8%;width:60%}#screen-prompt{bottom:240px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#portal{overflow:auto}.controls>button[aria-pressed=true]{border-color:#c9ab72;color:#e2c995}@media(max-height:600px){header{top:16px}.hero-copy{top:20%}h1{font-size:38px;margin:10px 0}.intro{display:none}.scene-note{display:none}.chapter{bottom:85px}.eyebrow{font-size:8px}#portal{justify-content:flex-start;padding-top:85px}.portal-grid img{max-height:150px}.controls{bottom:16px}.progress{bottom:-16px}}

.out-arrow{position:relative;display:inline-block;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;margin-left:3px;vertical-align:2px}.out-arrow::before{content:"";position:absolute;right:-1px;top:-1px;width:8px;height:1px;background:currentColor;transform:rotate(-45deg);transform-origin:right center}


/* Digital Olympus v2 — automatic introduction and the EXACT /concepto/ring3d.js geometry. */
body.is-3d #journey,body.is-portal #journey{height:100svh}
body.is-3d #stage,body.is-portal #stage{position:relative;top:auto}
body.is-portal #portal{display:block}
body.is-portal #fallback{display:none}
#portal{padding:0!important;inset:0!important;overflow:hidden!important;display:block;isolation:isolate;background:#030607;opacity:1!important;transition:none!important}
#portal[hidden]{display:none!important}
#portal .portal-heading{position:absolute;z-index:11;top:12%;left:7%;right:6%;pointer-events:none;max-width:570px}
#portal .portal-heading h2{font-size:clamp(30px,3.4vw,54px);line-height:1.02;letter-spacing:-1.9px;margin:13px 0}
#portal .portal-heading p{font-size:12px;line-height:1.65;color:#bec7c7;max-width:430px;margin:12px 0 0}
#portal .ring3d-stage{--ring-ambient:77,48,30;position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;touch-action:pan-y;cursor:grab;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,rgba(var(--ring-ambient),.2),transparent 53%),linear-gradient(180deg,#080d11,#020404 88%);isolation:isolate}
#portal .ring3d-stage:active{cursor:grabbing}
#portal .ring3d-stage:focus-visible{outline:1px solid #dbbb77;outline-offset:-2px}
#portal .ring3d-bg-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 54%,rgba(232,209,177,.095),transparent 60%)}
#portal .ring3d-bg-shade:after{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:34%;background:radial-gradient(ellipse at center,rgba(230,211,190,.09),transparent 70%);filter:blur(18px);transform:perspective(700px) rotateX(67deg)}
#portal .ring3d-canvas{position:absolute;inset:0;z-index:2}
#portal .ring3d-canvas canvas{display:block;width:100%;height:100%;outline:none}
#portal .ring3d-fallback{position:absolute;inset:20% 8% 21%;z-index:3;display:grid;place-items:center;pointer-events:none;transition:opacity .3s}
#portal .ring3d-fallback img{display:block;width:min(790px,62vw);aspect-ratio:1.82;object-fit:cover;border:1px solid #ffffff30;border-radius:16px;box-shadow:0 26px 70px #000c}
#portal .webgl-ring-ready .ring3d-fallback{opacity:0;pointer-events:none}
#portal .ring3d-controls{position:absolute;top:auto;bottom:18%;left:50%;transform:translateX(-50%);z-index:13;display:flex;gap:10px;white-space:nowrap}
#portal .ring3d-controls button{min-width:100px;padding:11px 15px;border:1px solid #cbb88970;border-radius:100px;background:#080c10df;color:#f1e8d5;font-size:11px;letter-spacing:.02em;backdrop-filter:blur(12px)}
#portal .ring3d-controls button:hover{background:#283137;border-color:#e1c992}
#portal .ring-project-action{position:absolute;z-index:15;bottom:7%;left:50%;transform:translateX(-50%);min-width:min(460px,86vw);display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 18px;border-top:1px solid #d7c7a456;background:linear-gradient(90deg,#060d11ed,#121618c5)}
#portal .ring-project-index{font-size:9px;letter-spacing:1.5px;color:#b2b3a9;display:grid;gap:4px}
#portal .ring-project-index strong{font-size:16px;letter-spacing:.2px;font-weight:600;color:#e9dfce}
#portal #ringOpen{border:1px solid #ccb17880;border-radius:2px;padding:12px 16px;font-size:11px;color:#f2e4c5;white-space:nowrap;text-decoration:none}
#portal #ringOpen:hover{background:#e5c894;color:#080c0f}
#portal #ringUnavailable{color:#b5a88f;font-size:11px}
#portal #replay-intro{position:absolute;z-index:15;right:5%;top:30px;left:auto;margin:0;padding:10px;border-bottom:1px solid #d0c4ab70;background:#081015bb;color:#e8dbc3}
#portal #ring3dStage .sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
#portal .ring3d-stage .ring3d-fallback[hidden]{display:none}
body.is-portal .hero-copy,body.is-portal .scene-note,body.is-portal .chapter,body.is-portal .controls,body.is-portal .vignette{visibility:hidden}
body.is-portal .hero-copy,body.is-portal .controls{pointer-events:none}
#pause-intro,#skip-intro{min-width:70px}
@media(max-width:700px){
 #portal .portal-heading{top:12%;left:7%;right:7%}
 #portal .portal-heading h2{font-size:clamp(29px,8vw,39px);margin:10px 0}
 #portal .portal-heading p{font-size:10px;line-height:1.5;max-width:280px}
 #portal .ring3d-fallback{inset:27% 6% 22%}
 #portal .ring3d-fallback img{width:88vw}
 #portal .ring3d-controls{bottom:22%;gap:8px}
 #portal .ring3d-controls button{min-width:104px;padding:10px 12px;font-size:10px}
 #portal .ring-project-action{bottom:8%;padding:9px 12px;min-width:88vw}
 #portal .ring-project-index{font-size:8px;letter-spacing:.5px}
 #portal .ring-project-index strong{font-size:13px}
 #portal #ringOpen{font-size:9px;padding:10px 9px}
 #portal #replay-intro{top:auto;bottom:2%;right:5%;font-size:9px;padding:5px}
 #portal .controls{max-width:100vw}
}
@media(max-height:550px){
 #portal .portal-heading{top:5%}
 #portal .portal-heading h2{font-size:28px}
 #portal .portal-heading p{display:none}
 #portal .ring3d-controls{bottom:19%}
 #portal .ring-project-action{bottom:4%}
}


/* Live ring bridge: keep 3D canvas laid out and rendering behind the introduction.
   A previous release hid #portal entirely, so the original renderer could initialize at 0x0.
   The display and the portal now share the very same ring frames. */
body:not(.is-portal) #portal{opacity:0!important;visibility:visible!important;pointer-events:none!important}
body.is-portal #portal{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .55s ease!important}
body.is-portal #portal[hidden]{display:none!important}
#portal #ring3dStage.webgl-ring-ready .ring3d-fallback{opacity:0!important;visibility:hidden;pointer-events:none}
#portal .ring3d-canvas canvas{object-fit:fill;display:block;width:100%;height:100%}
#portal #ring3dStage{contain:layout paint style;isolation:isolate}
#portal .ring3d-controls button{font-family:Manrope,Arial,sans-serif}
#portal .ring-project-action{font-family:Manrope,Arial,sans-serif}
@media(prefers-reduced-motion:reduce){body.is-portal #portal{transition:none!important}}

/* Live cinematic staging: preserve the last GPU image as the original ring expands. */
body.is-portal #portal{transition:opacity .65s cubic-bezier(.22,1,.36,1)!important}
#viewport[data-laptop3d="live"]{background:transparent}
#portal .ring3d-stage.webgl-ring-ready .ring3d-fallback{display:none!important}
#portal #ring3dCanvas{display:block!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){body.is-portal #portal{transition:none!important}}


/* Visual QA revision: the heading must NEVER overlap the large, original five-sided ring. */
#portal .portal-heading{top:5%;left:6%;max-width:460px}
#portal .portal-heading h2{font-size:clamp(31px,2.8vw,43px);line-height:1.08;letter-spacing:-1.1px;margin:8px 0}
#portal .portal-heading p{font-size:10px;line-height:1.55;margin:6px 0 0;max-width:415px}
@media(max-width:700px){
 #portal .portal-heading{top:6%;left:7%;right:6%;max-width:310px}
 #portal .portal-heading h2{font-size:clamp(28px,6.6vw,33px);line-height:1.11;letter-spacing:-.65px;margin:7px 0}
 #portal .portal-heading p{font-size:10px;line-height:1.5;margin:6px 0 0;max-width:285px}
}


/* Olympus v5 — the original WebGL ring expands from the laptop's real screen rectangle.
   No full-size holding panel or disconnected page transition. */
#portal{transform-origin:0 0;backface-visibility:hidden}
body.is-entering-portal #portal{
 opacity:1!important;visibility:visible!important;pointer-events:none!important;
 transition:none!important;will-change:transform;z-index:7;
}
body.is-entering-portal #portal .portal-heading,
body.is-entering-portal #portal .ring3d-controls,
body.is-entering-portal #portal .ring-project-action,
body.is-entering-portal #portal #replay-intro{
 opacity:0!important;pointer-events:none!important;
}
body.is-entering-portal .chapter,
body.is-entering-portal .scene-note,
body.is-entering-portal #screen-prompt{opacity:0;pointer-events:none}
body.is-portal #portal{transform:none!important;opacity:1!important;transition:none!important;z-index:7}
body.is-portal #portal .portal-heading,
body.is-portal #portal .ring3d-controls,
body.is-portal #portal .ring-project-action,
body.is-portal #portal #replay-intro{opacity:1;transition:opacity .45s ease .10s}
body.is-entering-portal #portal .ring3d-stage{border-radius:0}
@media(prefers-reduced-motion:reduce){
 body.is-entering-portal #portal,body.is-portal #portal{transition:none!important}
}

/* Digital Olympus v6 — seamless soft portal reveal.
   No CSS transform of the portal: scaling the entire fullscreen scene used to create
   an enormous distorted black rectangle in front of the laptop. */
#portal{transform:none!important;transform-origin:center center}
body.is-entering-portal #portal{
 transform:none!important;opacity:1!important;visibility:visible!important;
 transition:none!important;pointer-events:none!important;
 backface-visibility:visible;will-change:clip-path,mask-image;
}
#entry-glow{
 position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse 26% 32% at var(--entry-x,50%) var(--entry-y,50%),rgba(226,197,132,.38) 0%,rgba(137,183,185,.11) 36%,transparent 74%);
 mix-blend-mode:screen;
}
body.is-entering-portal #portal .portal-heading,
body.is-entering-portal #portal .ring3d-controls,
body.is-entering-portal #portal .ring-project-action,
body.is-entering-portal #portal #replay-intro{
 visibility:hidden!important;opacity:0!important;pointer-events:none!important
}
body.is-portal #portal{
 transform:none!important;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important;
 will-change:auto
}
body.is-portal #entry-glow{opacity:0!important}
@media(prefers-reduced-motion:reduce){
 #entry-glow{display:none}
 body.is-portal #portal{clip-path:none!important}
}