/* ATELIER 02 — a coherent original visual language, not decorative widgets.
   Black mineral paper / sandstone ink / copper / frosted sea-glass.
   Abstract line engravings react to selected reading room. */
:root{--accent:#c4a38f;--line:rgba(231,221,211,.165);--bg:#101113;--panel:#161719;--panel2:#131517;--ink:#f0e9df;--dim:#c6bcb1;--quiet:#a9a094;--faint:#91897f;--cold:#8daba9;--copper:#b97866}
html,body{background-color:var(--bg)}
body{background-image:linear-gradient(90deg,transparent calc(50% - 1px),rgba(215,195,178,.017) 50%, transparent calc(50% + 1px)),repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0 1px,transparent 1px 68px)}
.site-shell{max-width:1450px}
.site-header{position:relative;z-index:5;border-bottom-color:rgba(232,210,190,.23);min-height:91px}
.wordmark{font-size:20px;letter-spacing:.19em}
.wordmark-star{color:var(--accent);font-size:21px;margin-right:5px}
.header-center{font-size:9px;letter-spacing:.18em}
.manifesto-trigger{position:relative;z-index:5;padding:11px 17px!important;border:1px solid rgba(211,181,156,.38)!important;background:rgba(22,22,23,.6)!important;transition:background .2s,border-color .2s}
.manifesto-trigger:hover{background:#24201e!important;border-color:var(--accent)!important}
.intro{max-width:none;min-height:624px;padding:120px 0 95px;isolation:isolate}
.intro::before{content:"";position:absolute;left:0;bottom:27px;width:14px;height:14px;border:1px solid var(--accent);transform:rotate(45deg);opacity:.65}
.intro .eyebrow{font-size:10px;position:relative;z-index:3}
.intro h1{max-width:1150px;position:relative;z-index:2;margin:46px 0 47px;font-size:clamp(69px,8.5vw,141px);line-height:1.015;letter-spacing:-.055em}
.intro h1 em{color:#d7b29f}
.intro-description{max-width:715px;position:relative;z-index:2;font:400 clamp(15px,1.25vw,18px)/1.9 var(--sans);color:#d5c5b8}
.intro-meta{margin-top:58px;position:relative;z-index:2}
.hero-artwork{position:absolute;z-index:-1;right:max(-20px,-3vw);top:18px;width:min(48vw,665px);height:min(53vw,635px);display:flex;align-items:center;justify-content:center;color:#a99384;opacity:.75;pointer-events:none}
.hero-artwork::before{content:"";position:absolute;inset:10%;border:1px solid rgba(206,175,156,.13);border-radius:50%;transform:rotate(-18deg) scaleX(.8)}
.hero-artwork::after{content:"";position:absolute;inset:16% 13%;border-left:1px solid rgba(210,192,165,.24);transform:rotate(26deg)}
.hero-engraving{width:100%;height:100%;max-height:550px;overflow:visible;filter:drop-shadow(1px 4px 22px rgba(178,138,108,.09))}
.hero-art-label{position:absolute;bottom:5px;right:7%;font:400 8px/1.8 var(--sans);letter-spacing:.22em;color:#a69788}
.sky-strip{border-color:rgba(224,202,185,.29);min-height:109px}
.sky-text{font-size:clamp(20px,2.24vw,29px);color:#dccabb}
.experience{gap:28px;grid-template-columns:minmax(0,1.59fr) minmax(270px,.64fr);margin-top:47px}
.daily-panel{background:radial-gradient(circle at 96% 5%,rgba(167,112,85,.035),transparent 40%),#17191b;position:relative;overflow:hidden}
.quote-art-index{position:absolute;right:22px;top:84px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#c29f83;opacity:.55;pointer-events:none}
.quote-art-index span:first-child{font:400 70px/.8 var(--serif);letter-spacing:-.1em}
.quote-art-index span:last-child{font:400 7px/1 var(--sans);letter-spacing:.12em}
.quote-text{padding:94px clamp(28px,5vw,78px) 110px;max-width:1030px;position:relative;z-index:1}
.quote-header,.quote-footer{position:relative;z-index:1}
.folio-art{height:350px;min-height:350px;display:flex;flex-direction:column;overflow:hidden;background:#151719;border:1px solid rgba(214,189,165,.32);position:relative}
.folio-art::before{content:"A / N";position:absolute;top:17px;left:20px;font:400 9px/1 var(--sans);letter-spacing:.1em;color:#af9684;z-index:2}
.folio-art::after{content:"";position:absolute;inset:24px;border:1px solid rgba(219,187,158,.14);pointer-events:none}
.living-etching{width:100%;height:100%;padding:19px;color:var(--accent);display:block;overflow:visible}
.folio-serial{z-index:2;position:absolute;bottom:18px;left:0;right:0;padding:0 27px;background:transparent}
.art-caption{font-style:italic;color:#bcaaa0;font-size:24px}
.daily-story{margin-top:123px;border-color:rgba(224,202,185,.25)}
.story-head{margin-bottom:66px}
.story-sheet{position:relative;overflow:hidden;background:#161719;border:1px solid rgba(224,208,190,.23)}
.story-art{position:absolute;top:100px;right:8%;width:158px;height:146px;pointer-events:none;color:var(--accent);opacity:.38}
.story-art-circle{position:absolute;border:1px solid currentColor;border-radius:50%;width:100px;height:100px;right:0;top:0}
.story-art-line{position:absolute;width:145px;top:48px;right:-10px;border-top:1px solid currentColor;transform:rotate(-37deg)}
.story-art-square{position:absolute;width:63px;height:63px;border:1px solid currentColor;top:55px;left:13px;transform:rotate(22deg)}
.story-art-code{position:absolute;bottom:4px;right:0;font:400 9px/1 var(--sans);letter-spacing:.13em}
.story-masthead{background:#191b1c}
.story-body{position:relative;z-index:1}
.story-content{max-width:760px}
.rooms{padding-top:116px}
.rooms-head{margin-bottom:70px}
.rooms-grid{grid-template-columns:repeat(4,minmax(0,1fr));background:#121416;gap:1px;border:1px solid rgba(217,197,177,.18)}
.room-card{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;border:0;min-height:190px;padding:22px 20px;overflow:hidden;background:#151719;transition:background .22s,transform .22s}
.room-card:hover{background:#1c1d1f}
.room-card[aria-pressed="true"]{background:#242225;box-shadow:inset 0 2px 0 #c8a48e}
.room-abstract{position:absolute;display:block;right:0;top:0;width:62%;height:76%;pointer-events:none;opacity:.81}
.room-abstract svg{width:100%;height:100%;color:#bb9d88;transform:rotate(-7deg);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.room-card:hover .room-abstract svg,.room-card[aria-pressed="true"] .room-abstract svg{transform:rotate(8deg) scale(1.06);opacity:1}
.room-number,.room-name,.room-card-symbol{position:relative;z-index:1}
.room-number{grid-column:auto;font-size:9px}
.room-name{font:400 clamp(23px,2.2vw,31px)/1.12 var(--italic);margin-top:auto;text-shadow:0 2px 8px #151719}
.room-card-symbol{font:400 13px/1 var(--serif);color:#c8ad99;position:absolute;left:20px;top:80px}
.room-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:55px;position:relative;border-color:rgba(210,185,164,.28);min-height:430px;background:#17191a;padding:49px clamp(28px,5vw,76px) 32px;align-content:start}
.room-stage::after{content:"";position:absolute;right:18%;top:26%;width:220px;height:220px;border:1px solid rgba(209,178,148,.10);transform:rotate(22deg);pointer-events:none}
.room-stage-top{grid-column:1/3}
.room-stage h3{grid-column:1;position:relative;z-index:1;margin:63px 0 35px;color:#c2a98e;font-size:clamp(30px,3.2vw,43px)}
.room-stage blockquote{grid-column:1/3;position:relative;z-index:1;margin:0 0 54px;max-width:870px;font-size:clamp(32px,3.7vw,55px)}
.room-stage-actions{grid-column:1/3}
.imprint-section{padding:118px 0 116px;border-top:1px solid rgba(227,203,180,.28)}
.imprint-heading{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;gap:35px;margin-bottom:58px}
.imprint-heading h2{font:400 clamp(58px,6.6vw,99px)/1.08 var(--serif);letter-spacing:-.045em;margin:28px 0 23px}
.imprint-heading h2 em{font:italic 400 1em/1 var(--italic);color:var(--accent)}
.imprint-heading p{font:400 14px/1.95 var(--sans);max-width:605px;color:var(--dim)}
.imprint-heading-art{width:100%;color:#aa8c7d;opacity:.8;display:grid;place-items:center}
.imprint-heading-art svg{width:100%;height:auto}
.imprint-wrap{position:relative;border:1px solid rgba(210,188,171,.27);background:#151718}
.imprint-frame{height:clamp(270px,40vw,510px);position:relative;overflow:hidden;touch-action:none;
background:linear-gradient(0deg,rgba(23,24,25,.85),rgba(20,22,24,.91)),
repeating-linear-gradient(90deg,transparent 0 85px,rgba(205,184,163,.08) 85px 86px),
repeating-linear-gradient(0deg,transparent 0 85px,rgba(205,184,163,.06) 85px 86px)}
.imprint-frame::before{content:"";position:absolute;inset:19px;pointer-events:none;border:1px solid rgba(210,179,159,.17)}
.imprint-frame canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:-7px;position:relative;z-index:1}
.imprint-hint{position:absolute;top:26px;left:31px;pointer-events:none;font:400 9px/1.4 var(--sans);letter-spacing:.2em;color:#b4a094;z-index:2}
.imprint-mark{position:absolute;bottom:25px;right:32px;font:400 30px/1 var(--serif);pointer-events:none;color:#ae9080;z-index:2}
.imprint-corner{position:absolute;width:30px;height:30px;pointer-events:none;z-index:2}
.imprint-corner-a{left:19px;bottom:19px;border-left:1px solid #c6ac9b;border-bottom:1px solid #c6ac9b}
.imprint-corner-b{right:19px;top:19px;border-right:1px solid #c6ac9b;border-top:1px solid #c6ac9b}
.imprint-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 30px;min-height:84px;border-top:1px solid var(--line)}
.imprint-controls>span{font:400 9px/1.6 var(--sans);letter-spacing:.14em;color:var(--faint)}
.imprint-controls>div{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.imprint-controls button{background:transparent;border:0;border-bottom:1px solid #876e60;color:#d2b6a1;
font:400 11px/1.6 var(--sans);padding:6px 0;transition:color .15s}
.imprint-controls button:hover{color:#f8e8da}
.closing-note{padding:98px 0 142px;border-top:1px solid rgba(217,188,162,.28);position:relative}
.closing-note::after{content:"✳";position:absolute;top:26px;right:8%;font:400 160px/1 var(--serif);color:rgba(214,183,159,.09);pointer-events:none}
.manifesto-dialog{box-shadow:0 30px 90px #000c}
@media(max-width:1200px){
 .rooms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-artwork{width:48vw;right:-5%}
 .intro h1{font-size:clamp(66px,8.8vw,113px)}
}
@media(max-width:760px){
 .intro{min-height:500px;padding:88px 0 75px}
 .intro h1{font-size:clamp(64px,10vw,85px)}
 .hero-artwork{width:66vw;right:-9%;top:0;opacity:.47}
 .room-stage{grid-template-columns:1fr;min-height:0}
 .room-stage-top,.room-stage blockquote,.room-stage-actions{grid-column:1}
 .room-stage h3{grid-column:1;margin:38px 0 15px}
 .folio-art{height:240px;min-height:240px}
 .folio-art .living-etching{padding:0 14px}
 .imprint-section{padding:85px 0}
 .imprint-heading{grid-template-columns:minmax(0,1fr) 160px;margin-bottom:32px}
 .imprint-heading h2{font-size:clamp(53px,8.5vw,76px)}
 .imprint-controls{padding:18px 23px}
}
@media(max-width:560px){
 .hero-artwork{opacity:.27;width:96%;right:-33%;top:0}
 .hero-art-label{display:none}
 .intro{min-height:0;padding:70px 0 64px}
 .intro h1{font-size:clamp(52px,11vw,70px)}
 .intro-description{font-size:14px;max-width:96%}
 .intro-meta{margin-top:39px}
 .daily-panel .quote-text{padding-top:80px}
 .quote-art-index{top:76px;right:17px}
 .quote-art-index span:first-child{font-size:50px}
 .folio-art{height:178px;min-height:178px;display:flex!important}
 .aside-panel{display:flex!important;flex-direction:column}
 .folio-serial{bottom:11px;font-size:7px}
 .art-caption{padding:12px 0 6px}
 .rooms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .room-card{min-height:152px;padding:18px 13px}
 .room-abstract{height:68%;width:76%}
 .room-card-symbol{top:70px;left:13px}
 .room-name{font-size:clamp(22px,5.8vw,29px)}
 .room-stage{padding:32px 22px 26px}
 .imprint-heading{grid-template-columns:1fr;gap:4px}
 .imprint-heading-art{display:none}
 .imprint-heading h2{font-size:clamp(55px,11vw,69px)}
 .imprint-heading p{font-size:13px}
 .imprint-frame{height:350px}
 .imprint-controls{align-items:flex-start;flex-direction:column;gap:12px;padding:18px}
 .imprint-controls>div{gap:20px}
 .imprint-controls button{font-size:11px}
}
@media(max-width:360px){
 .room-card{min-height:145px}
 .room-name{font-size:22px}
 .hero-artwork{opacity:.20}
}
@media(prefers-reduced-motion:reduce){
 .room-abstract svg{transform:none!important;transition:none!important}
 .hero-engraving{filter:none}
}

/* Reader-requested ambient atmosphere: off by default, subtle while active. */
.ambient-sound{border:1px solid rgba(199,172,150,.3);background:transparent;color:#d6bcab;
font:400 11px/1.5 var(--sans);width:100%;display:flex;align-items:center;gap:13px;
margin-top:29px;padding:13px 16px;text-align:left;transition:border-color .2s,background .2s}
.ambient-sound:hover{background:rgba(188,159,133,.05);border-color:rgba(212,181,158,.65)}
.ambient-sound[aria-pressed="true"]{border-color:#c6a991;background:rgba(193,157,130,.10)}
.sound-icon{font:400 27px/1 var(--serif);color:var(--accent);transform:translateY(-1px)}
.sound-wave{margin-left:auto;font:400 15px/1 var(--serif);letter-spacing:.06em;color:#a28c7c}
.ambient-sound[aria-pressed="true"] .sound-wave{color:#dec0a8}
.ambient-sound:disabled{opacity:.55;cursor:default}
@media(max-width:560px){.ambient-sound{max-width:360px;margin-top:17px}}

/* The promise of the next issue is part of the cover, not generic site navigation. */
.header-verse{display:inline-flex;align-items:center;gap:16px;color:#d1b8a4;font-family:var(--serif);font-size:clamp(11px,1vw,15px);letter-spacing:.13em;font-weight:400;text-align:center}
.header-star{font:400 16px/1 var(--serif);color:var(--accent)}
.midnight-stamp{position:relative;z-index:3;margin-top:37px;padding:20px 24px 20px 22px;border:1px solid rgba(201,170,145,.31);max-width:665px;display:flex;align-items:center;gap:17px;background:rgba(15,17,18,.66);backdrop-filter:blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.midnight-stamp::after{content:"";height:1px;width:50px;position:absolute;top:-1px;left:24px;background:#d2b09a}
.midnight-glyph{flex:0 0 auto;color:#bfa089;font:400 41px/1 var(--serif)}
.midnight-copy{display:flex;flex-direction:column;gap:8px}
.midnight-copy>span{font:400 10px/1.5 var(--sans);letter-spacing:.15em;color:#bca18d}
.midnight-copy strong{font:400 clamp(14px,1.35vw,18px)/1.6 var(--italic);letter-spacing:0;color:#e5d5c9}
.midnight-time{font:400 clamp(19px,2vw,27px)/1 var(--serif);color:#c9aa92;margin-left:auto;letter-spacing:.03em;white-space:nowrap}
.room-card[data-room="decadence"]{background:linear-gradient(149deg,#231b1e,#171719 70%)}
.room-card[data-room="decadence"][aria-pressed="true"]{background:linear-gradient(145deg,#34242a,#201c21 75%)}
.room-card[data-room="decadence"] .room-number{color:#d1a69d}
@media(max-width:1050px){.header-verse{font-size:11px;letter-spacing:.06em}}
@media(max-width:760px){.header-verse{font-size:11px}.midnight-stamp{max-width:600px}}
@media(max-width:560px){.header-verse{display:none}.midnight-stamp{padding:14px 13px 15px;gap:10px;margin-top:29px;backdrop-filter:none}.midnight-copy>span{font-size:8px}.midnight-copy strong{font-size:14px}.midnight-glyph{font-size:31px}.midnight-time{font-size:17px}}
@media(max-width:360px){.midnight-time{font-size:15px}.midnight-copy strong{font-size:13px}}