/* S1 Long Exposure II — white base, H2 slit-scan hero, bookshelf work, diagonal band, plain index with stop-motion. */
:root { --bg: #FFFFFF; --ink: #141516; --ink-2: #8B9095; --line: rgba(20,21,22,.12); --panel: #F2F3F3; --red: #D8452F; --grn: #5DBB63; --acc: #D8452F; --text: "Geist", Arial, sans-serif; --serif: "Instrument Serif", Georgia, serif; color-scheme: light; }
body.s1 { background: #fff; color: var(--ink); }
.s1 .k-top { mix-blend-mode: difference; color: #fff; background: none; } .s1 .k-top .mono { color: #fff; } .s1 .k-prog { background: var(--red); }
.s1 .loader { background: #fff; } .ld-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; } .ld-t { position: absolute; top: calc(50% + 14px); left: var(--gl); } .ld-big { position: absolute; bottom: calc(50% + 10px); left: var(--gl); font-family: var(--serif); font-size: clamp(40px, 6vw, 90px); line-height: 1; }
/* hero (H2) */
.x-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ink); cursor: ew-resize; } .x-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-title { position: absolute; z-index: 3; left: var(--gl); top: 78px; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6.6vw, 120px); line-height: .92; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.18); } .x-title em { font-style: italic; }
.x-meta { position: absolute; z-index: 3; left: var(--gl); top: calc(78px + clamp(110px, 13vw, 230px)); display: grid; grid-template-columns: repeat(3, auto); gap: 4px 24px; } .x-meta span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.x-vert { position: absolute; z-index: 3; right: var(--gr); top: 90px; writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(50px, 7vh, 90px); letter-spacing: .3em; color: #fff; }
.x-line { position: absolute; z-index: 3; height: 2px; width: 8vw; }
.x-ctype { position: absolute; z-index: 3; left: var(--gl); bottom: 34px; color: #fff; font-size: clamp(22px, 2vw, 32px); line-height: 1.08; } .x-ctype p { margin: 0; } .x-ctype .c2 { padding-left: .95em; } .x-ctype .c3 { display: flex; gap: 1.4em; align-items: baseline; } .x-ctype .by { font-family: var(--serif); font-style: italic; font-size: .6em; } .x-ctype .name { font-family: var(--serif); font-style: italic; }
.x-read { position: absolute; z-index: 3; right: var(--gr); bottom: 34px; text-align: right; color: #fff; display: grid; gap: 3px; } .x-read span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; } .x-read b { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.x-narr { position: absolute; z-index: 3; left: 50%; bottom: 34px; translate: -50% 0; width: min(380px, 32vw); margin: 0; text-align: center; color: #fff; font-family: var(--serif); font-size: 17px; line-height: 1.3; }
/* shelf — thin, mixed, gradient books (personal-curation style); the active one turns to face you */
.s1-work { padding-top: clamp(80px, 8vw, 120px); } .s1-work .q-lab { margin-bottom: 22px; }
.s1-shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: min(44svh, 420px); padding: 0 6px 10px; }
.s1-board { position: absolute; left: -16px; right: -16px; bottom: 0; height: 10px; background: linear-gradient(#ECEBE7, #DAD9D4); }
.s1-sp { position: relative; flex: 0 0 var(--w); width: var(--w); height: var(--h); padding: 0; border: 0; cursor: pointer; font: inherit; color: var(--t); background: none; perspective: 700px; rotate: var(--lean); transform-origin: 50% 100%; transition: flex-basis .55s var(--out), width .55s var(--out), height .55s var(--out), rotate .5s var(--out), translate .4s var(--out); }
.s1-sp .sp, .s1-sp .face { backface-visibility: hidden; box-shadow: inset -2px 0 0 rgba(0,0,0,.14), inset 2px 0 0 rgba(255,255,255,.2), 0 10px 18px -14px rgba(0,0,0,.45); }
.s1-sp .sp { background: linear-gradient(180deg, var(--b), var(--a) 72%); transform-origin: 0 50%; transition: transform .38s cubic-bezier(.6, 0, .9, .4), opacity .2s .25s; }
.s1-sp:not(.on):hover { translate: 0 -10px; }
.s1-sp .sp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0; }
.s1-sp .sp b { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; overflow: hidden; max-height: 76%; font-weight: 400; }
.s1-sp .no, .s1-sp .yr { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; opacity: .8; } .s1-sp .yr { writing-mode: vertical-rl; rotate: 180deg; max-height: 30%; overflow: hidden; white-space: nowrap; }
.s1-sp.caps .sp b { font-family: var(--text); font-weight: 600; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; }
.s1-sp.serif .sp b { font-family: var(--serif); font-size: clamp(16px, 1.4vw, 22px); }
.s1-sp.serif2 .sp b { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(15px, 1.3vw, 20px); }
.s1-sp.mono .sp b { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.s1-sp.bold .sp b { font-family: var(--text); font-weight: 800; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.s1-sp .face { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 9% 9% 8%; background: linear-gradient(160deg, var(--b), var(--a)); transform-origin: 100% 50%; transform: rotateY(92deg); opacity: 0; transition: transform .5s .3s var(--out), opacity .1s .3s; }
.s1-sp .win { display: grid; place-items: center; min-height: 0; padding: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); } .s1-sp .win img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.s1-sp .ft { font-family: var(--serif); font-size: 15px; text-align: center; }
.s1-sp.on { flex-basis: min(24vw, 300px); width: min(24vw, 300px); height: 100%; rotate: 0deg; translate: 0 0; } .s1-sp.on .sp { transform: rotateY(-92deg); opacity: 0; } .s1-sp.on .face { transform: none; opacity: 1; }
.s1-reader { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; height: min(64svh, 640px); perspective: 1800px; padding: 8px; background: #EFEEEA; border-radius: 3px; box-shadow: 0 24px 40px -34px rgba(0,0,0,.4); }
.s1-pg { position: relative; padding: clamp(16px, 2vw, 30px); display: grid; align-content: start; gap: 8px; min-height: 0; overflow: hidden; background: var(--grain), #FAF9F6; }
.s1-pg.l { box-shadow: inset -26px 0 30px -26px rgba(0,0,0,.18); } .s1-pg.r { grid-template-rows: minmax(0, 1fr) auto; padding: clamp(14px, 1.6vw, 24px); box-shadow: inset 26px 0 30px -26px rgba(0,0,0,.14); transform-origin: left; }
.s1-reader.turn .s1-pg.r { animation: s1T .6s var(--out); } .s1-reader.turn .s1-pg.l > * { animation: s1F .6s var(--out) both; } @keyframes s1T { from { transform: rotateY(-70deg); opacity: .3; } } @keyframes s1F { from { opacity: 0; transform: translateY(8px); } }
.s1-gut { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background: rgba(0,0,0,.12); }
.s1-lab { max-width: 340px; rotate: -1.5deg; margin-bottom: 4px; }
.s1-pg h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 48px); line-height: .95; } .s1-pg .nm { margin: 0; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 18px; color: var(--ink-2); } .s1-pg p { margin: 0; color: #55595D; font-size: 13px; max-width: 46ch; line-height: 1.5; }
.s1-pg dl { display: grid; grid-template-columns: 70px 1fr; gap: 4px 12px; margin: 4px 0; font-size: 12px; } .s1-pg dt { font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; } .s1-pg dd { margin: 0; } .s1-pg a { justify-self: start; border-bottom: 1px solid; font-size: 13px; }
.s1-pg.r .k-shot { height: 100%; padding: 0; background: transparent; }
.s1-hint { display: flex; justify-content: space-between; margin-top: 10px; }
/* diagonal band (N3) with hover */
.s1-band { position: relative; height: 80svh; overflow: hidden; margin-top: 10svh; background: var(--grain), #EDECE8; color: #161616; cursor: crosshair; }
.s1-circ { position: absolute; left: 50%; top: 50%; height: 118%; translate: -50% -50%; pointer-events: none; } .s1-circ circle { fill: none; stroke: #C9C8C2; stroke-width: 1.5; }
.s1-band .cm { position: absolute; width: 26px; height: 26px; } .s1-band .cm::before, .s1-band .cm::after { content: ""; position: absolute; background: #161616; } .s1-band .cm::before { width: 26px; height: 1px; top: 50%; } .s1-band .cm::after { width: 1px; height: 26px; left: 50%; } .s1-band .cm.a { left: 10px; top: 10px; } .s1-band .cm.b { right: 10px; top: 10px; } .s1-band .cm.c { left: 10px; bottom: 10px; } .s1-band .cm.d { right: 10px; bottom: 10px; }
.s1-band .bd { width: 16px; height: 16px; transition: translate .5s var(--out); }
.s1-band h2 { position: absolute; left: 50%; top: 50%; margin: 0; translate: -50% -50%; rotate: var(--a, -24deg); font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(36px, 5vw, 86px); line-height: 1; white-space: nowrap; } .s1-band h2 > span { display: block; } .s1-band h2 > span + span { padding-left: 1.2em; }
.s1-band h2 i { display: inline-block; font-style: normal; transition: transform .6s var(--out), color .4s; transition-delay: calc(var(--i) * 40ms); } .s1-band:hover h2 i { transform: translateY(-.12em); } .s1-band h2 i:hover { color: #E2668C; font-style: italic; transform: translateY(-.2em) !important; }
.s1-band .bar { position: absolute; height: 3.2vw; min-height: 26px; background: rgba(22,22,22,.11); rotate: var(--a, -24deg); transition: transform 1s var(--out); } .s1-band .bar.a { left: 8%; right: 20%; top: 36%; } .s1-band .bar.b { left: 26%; right: 4%; top: 58%; }
.s1-band:hover .bar.a { transform: translateX(-6%) scaleX(1.12); } .s1-band:hover .bar.b { transform: translateX(6%) scaleX(1.1); }
.s1-band .sm { position: absolute; left: 58%; top: 18%; margin: 0; rotate: var(--a, -24deg); font-family: "Newsreader", Georgia, serif; font-size: 20px; line-height: 1.05; color: #161616; transition: translate .8s var(--out); } .s1-band:hover .sm { translate: 0 -14px; }
.s1-band::after { content: ""; position: absolute; left: var(--mx, -999px); top: var(--my, -999px); width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; background: radial-gradient(circle, rgba(226,102,140,.12), transparent 70%); pointer-events: none; }
.s1-bh { position: absolute; left: calc(var(--gl) + 20px); bottom: 26px; color: var(--ink-2); }
/* index: plain list + stop-motion */
.s1-idx ol { list-style: none; margin: 0; padding: 0; } .s1-idx a { display: grid; grid-template-columns: 50px minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) 60px; gap: var(--gap); align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); transition: padding .35s var(--out); }
.s1-idx li:last-child a { border-bottom: 1px solid var(--line); } .s1-idx b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); } .s1-idx a > span:nth-child(3) { color: var(--ink-2); font-size: 14px; } .s1-idx a:hover { padding-left: 14px; } .s1-idx a:hover b { font-style: italic; }
.s1-sm { position: fixed; left: 0; top: 0; z-index: 130; width: 260px; padding: 8px 8px 6px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transform: rotate(var(--rr, 0deg)) translateX(var(--dx, 0)); transition: opacity .2s; } .s1-sm.on { opacity: 1; }
.s1-sm img { display: block; width: 100%; height: 180px; object-fit: contain; background: var(--panel); } .s1-sm .mono { display: block; margin-top: 6px; }
/* profile + rest on white (R2 layout) */
.s1 .q-vlab i { background: var(--ink); } .s1 .q-ntx .lead { font-family: "Newsreader", Georgia, serif; } .s1 .q-col { border-color: var(--red); } .s1 .q-col.big { font-family: var(--serif); } .s1 .q-cside { border-color: var(--red); } .s1 .q-fp path { stroke: var(--ink); } .s1 .q-mini { background: var(--red); } .s1 .q-st h3 { font-family: var(--serif); }
@media (max-width: 900px) { .x-narr, .x-meta { display: none; } .s1-shelf { overflow-x: auto; } .s1-reader { grid-template-columns: 1fr; height: auto; } .s1-gut { display: none; } .s1-idx a { grid-template-columns: 40px 1fr 60px; } .s1-idx a > span:nth-child(3), .s1-idx a > span:nth-child(4) { display: none; } }
/* preloader: thin slices of the nine projects rise from the shutter line */
.ld-slits { position: absolute; left: 0; right: 0; bottom: 50%; height: 44svh; }
.ld-slits i { position: absolute; left: var(--x); bottom: 0; width: 1.1vw; min-width: 8px; height: 100%; background-size: cover; background-position: center; transform-origin: bottom; transform: scaleY(0); animation: ldS 2.2s calc(.15s + var(--i) * .16s) var(--out) forwards; }
.ld-slits i::after { content: ""; position: absolute; inset: 0; box-shadow: inset 1px 0 0 rgba(255,255,255,.6), inset -1px 0 0 rgba(255,255,255,.6); }
.ld-slits .mono { position: absolute; left: 0; bottom: calc(100% + 6px); font-size: 9px; opacity: 0; animation: ldN .4s calc(.9s + var(--i) * .16s) forwards; }
@keyframes ldS { 0% { transform: scaleY(0); width: 1px; } 55% { transform: scaleY(1); width: 1.1vw; } 80% { width: 2.2vw; } 100% { transform: scaleY(1); width: 1.4vw; } } @keyframes ldN { to { opacity: 1; } }
.s1 .ld-big { z-index: 2; mix-blend-mode: difference; color: #fff; }
.s1 .o-dot { background: #E2668C; }

/* preloader — the long-exposure process on a graphic horizon */
.s1 .loader { background: #141516; }
.s1 .loader #ldc { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-src { position: absolute; left: var(--gl); bottom: 28px; width: 240px; height: 160px; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 20px 40px -20px rgba(0,0,0,.5); } .ld-src canvas { display: block; width: 100%; height: 100%; }
.ld-src i { position: absolute; top: -6px; bottom: -6px; border-left: 1px solid #D8452F; border-right: 1px solid #D8452F; background: rgba(216,69,47,.12); } .ld-src .mono { position: absolute; left: 0; top: calc(100% + 10px); color: rgba(255,255,255,.8); }
.ld-rd { position: absolute; right: var(--gr); bottom: 28px; display: grid; gap: 4px; text-align: right; } .ld-rd .mono { color: #fff; }
.s1 .ld-big { position: absolute; left: var(--gl); top: 70px; bottom: auto; z-index: 2; mix-blend-mode: difference; color: #fff; }

/* reader button */
.s1-btn { justify-self: start; display: inline-flex; align-items: center; gap: 14px; margin-top: 6px; padding: 12px 18px 12px 20px; background: var(--ink); color: #fff; font-family: var(--text); font-size: 14px; border-radius: 999px; transition: background .3s, color .3s, gap .3s var(--out); border: 0 !important; }
.s1-btn i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .4s var(--out); } .s1-btn:hover { background: var(--pc); color: var(--pi); gap: 22px; } .s1-btn:hover i { transform: rotate(-45deg); }
/* CV: readable secondary text */
.s1 .q-lg b { font-family: var(--text); font-weight: 500; font-size: 14px; } .s1 .q-lg em { font-family: var(--text); font-style: normal; font-size: 13px; color: #5E6368; letter-spacing: 0; }
/* index: readable type + colour on hover */
.s1-idx b { font-family: "Newsreader", Georgia, serif !important; font-weight: 400; font-size: clamp(22px, 1.9vw, 30px) !important; letter-spacing: -.01em; }
.s1-idx a { position: relative; padding: 14px 12px !important; transition: background .3s, color .3s, padding .35s var(--out); }
.s1-idx a:hover { background: color-mix(in srgb, var(--pc) 88%, #fff); color: var(--pi); padding-left: 22px !important; } .s1-idx a:hover b { font-style: italic; } .s1-idx a:hover > span, .s1-idx a:hover .mono { color: var(--pi) !important; opacity: .85; }
/* contact */
.s1-cg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5vw; padding-bottom: 60px; align-items: start; }
.s1-cl h2 { margin: 0 0 14px; font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(54px, 6vw, 104px); line-height: .95; letter-spacing: -.02em; } .s1-cl > p { margin: 0 0 26px; max-width: 46ch; color: #55595D; font-size: 15px; line-height: 1.55; }
.s1-mail { display: inline-flex; gap: 14px; align-items: baseline; font-family: "Newsreader", Georgia, serif; font-size: clamp(28px, 2.8vw, 44px); border-bottom: 1px solid var(--ink); padding-bottom: 4px; transition: color .3s; } .s1-mail i { font-style: normal; font-size: .6em; transition: transform .4s var(--out); } .s1-mail:hover { color: var(--red); } .s1-mail:hover i { transform: translate(4px, -4px); }
.s1-cl #copy-email { display: block; margin: 14px 0 34px; border: 1px solid var(--line); padding: 8px 12px; background: none; }
.s1-cl dl { display: grid; grid-template-columns: 110px 1fr; gap: 0; margin: 0; font-size: 15px; } .s1-cl dt, .s1-cl dd { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; } .s1-cl dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--ink-2); padding-top: 15px; } .s1-cl dd a { border-bottom: 1px solid; }
.s1-cr { display: grid; gap: 10px; } .s1-cr .q-map { aspect-ratio: 4 / 3; }
/* diagonal band: same white as the page, lines only */
.s1-band { background: #fff !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s1-band .bar { background: none !important; border-top: 1px solid #161616; border-bottom: 1px solid #161616; box-sizing: border-box; }
.s1-band .cm::before, .s1-band .cm::after { background: #9A9C9E; }
@media (max-width: 900px) { .s1-cg { grid-template-columns: 1fr; } }

/* real 3D book: the spine is the side of a box; the flip turns the box to show its front cover */
.s1-shelf { --cw: min(24vw, 300px); }
.s1-sp { overflow: visible !important; background: none !important; perspective: 1200px; perspective-origin: 50% 35%; }
.s1-sp .bk { position: absolute; left: 50%; bottom: 0; width: var(--cw); height: 100%; margin-left: calc(var(--cw) / -2); transform-style: preserve-3d; transform: rotateY(90deg); transition: transform .9s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.s1-sp.on .bk { transform: rotateY(0deg); }
.s1-sp .bk > span { position: absolute; top: 0; height: 100%; backface-visibility: hidden; }
.s1-sp .sp { left: 50% !important; right: auto !important; width: var(--w) !important; margin-left: calc(var(--w) / -2); transform: rotateY(-90deg) translateZ(calc(var(--cw) / 2)) !important; opacity: 1 !important; transition: none !important; }
.s1-sp .face { left: 0 !important; width: 100%; transform: translateZ(calc(var(--w) / 2)) !important; opacity: 1 !important; transition: none !important; }
.s1-sp .pg { left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); transform: rotateY(90deg) translateZ(calc(var(--cw) / 2)); background: repeating-linear-gradient(90deg, #F6F3EC 0 2px, #E4E0D6 2px 3px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.s1-sp .tp { left: 0; width: 100%; height: var(--w) !important; top: calc(var(--w) / -2) !important; transform: rotateX(90deg); background: linear-gradient(90deg, var(--a), #F2EFE8 12%, #E6E2D8); }
.s1-sp .face { box-shadow: inset 3px 0 0 rgba(0,0,0,.12), 0 18px 30px -20px rgba(0,0,0,.45) !important; }

/* ===== spine logos + content-matched type ===== */
.s1-sp .lg { display: grid; place-items: center; width: calc(var(--w) - 12px); height: calc(var(--w) - 12px); max-width: 44px; max-height: 44px; overflow: hidden; border-radius: 2px; } .s1-sp .lg img { width: 100%; height: 100%; object-fit: cover; }
.s1-sp .lg.txt { font-family: var(--serif); font-size: 16px; line-height: 1; border: 1px solid currentColor; opacity: .85; }
.s1-sp.scaps .sp b { font-family: "Newsreader", Georgia, serif; font-size: 14px; letter-spacing: .34em; text-transform: uppercase; }
.s1-sp .no { margin-top: 2px; }
/* ===== cover: no frame, tracing paper ===== */
.s1-sp .face { padding: 0 !important; grid-template-rows: 1fr !important; overflow: hidden; }
.s1-sp .win { background: none !important; box-shadow: none !important; padding: 10% !important; }
.s1-sp .win img { box-shadow: 0 10px 20px -12px rgba(0,0,0,.5); }
.s1-sp .ft { display: none; }
.s1-sp .vel { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; display: grid; align-content: end; gap: 4px; padding: 16px 16px 18px; background: linear-gradient(rgba(250,250,247,.52), rgba(250,250,247,.66)); backdrop-filter: blur(5px) saturate(.9); -webkit-backdrop-filter: blur(5px); border-top: 1px solid rgba(255,255,255,.85); box-shadow: 0 -8px 18px -12px rgba(0,0,0,.25); color: #1C1D1E; text-align: left; transition: transform .7s var(--out); }
.s1-sp .vel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(rgba(255,255,255,.7), transparent); }
.s1-sp .vel b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; } .s1-sp .vel > span:not(.mono) { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 13px; color: #4A4D50; } .s1-sp .vel .mono { font-size: 9px; color: #5E6368; }
.s1-sp.on:hover .vel { transform: translateY(72%); }
/* ===== reader: tidy pages, stop-motion contents ===== */
.s1-reader { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; }
.s1-pg.l { align-content: start !important; padding: clamp(24px, 3vw, 48px) !important; gap: 0 !important; grid-template-rows: auto auto auto auto 1fr auto auto; }
.s1-pg.l .s1-lab { margin-bottom: 26px; } .s1-pg.l > .mono { margin-bottom: 10px; } .s1-pg.l h3 { margin-bottom: 10px; } .s1-pg.l .nm { margin-bottom: 16px; } .s1-pg.l p { margin-bottom: 26px; } .s1-pg.l dl { align-self: end; margin: 0 0 26px; }
.s1-pg.r { display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; gap: 12px; padding: clamp(24px, 3vw, 48px) !important; }
.s1-sm2 { min-height: 0; display: grid; place-items: center; } .s1-sm2 img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 16px 30px -20px rgba(0,0,0,.4); }
.s1-rc { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
/* ===== golden-ratio type scale (φ = 1.618): 10 · 16 · 26 · 42 · 68 · 110 ===== */
:root { --g-1: 10px; --g0: 16px; --g1: 26px; --g2: 42px; --g3: clamp(46px, 4.7vw, 68px); --g4: clamp(68px, 7.6vw, 110px); }
body.s1 { font-size: var(--g0); } .s1 .mono { font-size: var(--g-1); }
.s1 .x-title { font-size: var(--g4); } .s1 .x-vert { font-size: var(--g3); } .s1 .x-ctype { font-size: var(--g1); } .s1 .x-read b { font-size: var(--g1); } .s1 .x-narr { font-size: var(--g0); }
.s1 .q-lab h2 { font-size: var(--g1); } .s1 .k-top { font-size: 13px; }
.s1-pg h3, .s1-pg.l h3 { font-size: var(--g3) !important; } .s1-pg .nm { font-size: var(--g1) !important; } .s1-pg p, .s1-pg.l p { font-size: var(--g0) !important; } .s1-pg dl, .s1-pg.l dl { font-size: 13px !important; } .s1-btn { font-size: var(--g0); }
.s1-band h2 { font-size: var(--g3) !important; } .s1-band .sm { font-size: var(--g1); }
.s1 .q-st h3 { font-size: var(--g1); } .s1 .q-st p { font-size: var(--g0); }
.s1 .q-ntx .lead { font-size: var(--g1); line-height: 1.38; } .s1 .q-ntx > p { font-size: var(--g0); } .s1 .q-lg b { font-size: var(--g0); } .s1 .q-lg em { font-size: 13px; } .s1 .q-lg h3 { font-size: var(--g-1); }
.s1-idx b { font-size: var(--g1) !important; } .s1-idx a > span:nth-child(3) { font-size: var(--g0); }
.s1-cl h2 { font-size: var(--g4); } .s1-cl > p { font-size: var(--g0); } .s1-mail { font-size: var(--g2); } .s1-cl dl { font-size: var(--g0); }
.s1 .kp-title h1 { font-size: var(--g4); } .s1 .kp-title p { font-size: var(--g1); } .s1 .kp-lead { font-size: var(--g1); }
.s1-sp .bk { transform: translateZ(calc(var(--cw) / -2)) rotateY(90deg); } .s1-sp.on .bk { transform: translateZ(calc(var(--w) / -2)) rotateY(0deg); }
.s1-sp.bold .sp b { font-size: 15px !important; letter-spacing: .06em !important; }

/* reader left page — table-of-contents typography: small label, italic name, roman line; long text indented */
.s1-pg.l { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 26px !important; text-align: center; padding: clamp(26px, 3.4vw, 54px) !important; }
.s1-pg.l .toc { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: var(--g1); line-height: 1.12; color: var(--ink) !important; max-width: 22em; }
.s1-pg.l .toc.t1 { font-size: var(--g2); line-height: 1.05; } .s1-pg.l .toc em { font-style: italic; }
.s1-pg.l .toc small { font-family: "Newsreader", Georgia, serif; font-size: var(--g-1); letter-spacing: .02em; vertical-align: .55em; margin-right: .3em; color: var(--ink-2); }
.s1-pg.l .ind { margin: 0 !important; max-width: 34em; text-align: justify; hyphens: auto; text-indent: 2.6em; font-family: "Newsreader", Georgia, serif; font-size: var(--g0) !important; line-height: 1.5; color: #3A3D40 !important; }
.s1-pg.l .tocs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; max-width: 34em; } .s1-pg.l .tocs .toc { font-size: var(--g0); line-height: 1.25; }
.s1-pg.l .s1-btn { align-self: center; margin-top: 0; }
.s1-pg.l p.toc { font-size: var(--g1) !important; color: var(--ink) !important; } .s1-pg.l p.toc.t1 { font-size: var(--g2) !important; } .s1-pg.l .tocs p.toc { font-size: var(--g0) !important; } .s1-pg.l p.ind { font-size: var(--g0) !important; }
/* vertical title (NO difference blend — user rejected cyan-on-red) */
.s1 .x-vert { display: flex; gap: 14px; align-items: flex-start; writing-mode: vertical-rl; letter-spacing: 0; mix-blend-mode: difference; color: #fff; top: 86px; }
.s1 .x-vert b { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 300; font-size: var(--g3); line-height: 1; letter-spacing: -.01em; }
.s1 .x-vert .mono { color: #fff; letter-spacing: .14em; font-size: var(--g-1); padding-top: 6px; }
.s1 .x-meta { top: calc(78px + var(--g4) * 1.84 + 26px); }
.s1 .x-meta { mix-blend-mode: difference; } .s1 .x-meta span { color: #fff; }

/* ===== books: plain spines, full cover, closed box ===== */
.s1-sp .lg, .s1-sp .vel { display: none !important; }
.s1-sp .win { padding: 9% !important; }
.s1-sp .bkf { left: 0; width: 100%; transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(160deg, var(--a), var(--b)); }
.s1-sp .face, .s1-sp .sp, .s1-sp .pg, .s1-sp .bkf { outline: 1px solid transparent; }
.s1-sp .sp { width: calc(var(--w) + 1px) !important; margin-left: calc(var(--w) / -2 - .5px); } .s1-sp .face { width: calc(100% + 1px) !important; left: -.5px !important; }
.s1-sp .pg { width: calc(var(--w) + 1px); margin-left: calc(var(--w) / -2 - .5px); }
/* ===== reader right page: bento grid, equal frames ===== */
.s1-pg.r { grid-template-rows: minmax(0, 1fr) auto !important; }
.s1-bento { display: grid; gap: 10px; min-height: 0; height: 100%; }
.s1-bento.n1 { grid-template: 1fr / 1fr; } .s1-bento.n2 { grid-template: 1fr / 1fr 1fr; } .s1-bento.n3 { grid-template: 1fr 1fr / 1.4fr 1fr; } .s1-bento.n3 figure:first-child { grid-row: 1 / 3; } .s1-bento.n4 { grid-template: 1fr 1fr / 1fr 1fr; }
.s1-bento figure { margin: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #E8E6E0; border-radius: 2px; } .s1-bento img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.s1-pg.r.flipin { animation: s1T .55s var(--out); }
.s1-dots { display: flex; gap: 5px; align-items: center; } .s1-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.18); } .s1-dots i.on { background: var(--ink); }
/* ===== index hover: gradient block ===== */
.s1-idx a:hover { background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #fff) 70%, color-mix(in srgb, var(--pc) 15%, #fff)) !important; }
/* keep the shelf slot in step with the 3D turn so books never cut into each other */
.s1-sp { transition: flex-basis .9s cubic-bezier(.2, .7, .2, 1), width .9s cubic-bezier(.2, .7, .2, 1), height .9s cubic-bezier(.2, .7, .2, 1), rotate .5s var(--out), translate .4s var(--out) !important; }
.s1-sp.on { z-index: 3; } .s1-sp .bk { transition: transform .9s cubic-bezier(.2, .7, .2, 1) !important; }

/* ===== preloader title card ===== */
.s1 .loader { background: #0B1B38; color: #fff; overflow: hidden; }
.ld-lines i { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,var(--o)) 20%, rgba(255,255,255,var(--o)) 80%, transparent); transform-origin: var(--from); transform: scaleX(0); animation: ldLn 1.6s var(--d) var(--out) forwards; }
@keyframes ldLn { to { transform: scaleX(1); } }
.ld-hz { position: absolute; left: 0; right: 0; top: 50%; height: calc(2px + var(--k, 0) * 38svh); translate: 0 -50%; background: linear-gradient(90deg, #2B4C9A, #E8706A 35%, #F5B66F 50%, #E8706A 65%, #2B4C9A); filter: blur(calc(var(--k, 0) * 60px)); opacity: calc(.35 + var(--k, 0) * .5); }
.ld-card { position: relative; z-index: 2; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; }
.ld-card p { margin: 0; overflow: hidden; } .ld-card p > span { display: inline-flex; gap: 1.2em; align-items: baseline; transform: translateY(110%); animation: ldUp 1s var(--out) forwards; }
.ld-card .c1 span { animation-delay: .25s; } .ld-card .c2 { padding-left: .95em; } .ld-card .c2 span { animation-delay: .45s; } .ld-card .c3 span { animation-delay: .65s; }
.ld-card .by { font-family: var(--serif); font-size: .6em; } .ld-card .name { font-family: var(--serif); }
@keyframes ldUp { to { transform: none; } }
.s1 .loader .ld-t { position: absolute; left: 50%; top: auto; bottom: 30px; translate: -50% 0; color: rgba(255,255,255,.7); }
.ld-lines { position: absolute; inset: 0; pointer-events: none; } .s1 .loader { display: grid; place-items: center; }
/* preloader on white */
.s1 .loader { background: #fff !important; color: var(--ink) !important; }
.ld-lines i { background: linear-gradient(90deg, transparent, rgba(20,21,22,calc(var(--o) * .9)) 20%, rgba(20,21,22,calc(var(--o) * .9)) 80%, transparent) !important; }
.ld-hz { opacity: calc(.25 + var(--k, 0) * .4) !important; }
.s1 .loader .ld-t { color: var(--ink-2) !important; }

/* ===== long exposure in the books ===== */
.s1-sp .sp .stk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.s1-sp .sp::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--b) 62%, transparent), color-mix(in srgb, var(--a) 74%, transparent)); }
.s1-sp .sp > span, .s1-sp .sp > b { position: relative; z-index: 2; }
.s1-sp .sp::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 18%, rgba(255,255,255,.18) 50%, transparent 82%, rgba(0,0,0,.2)); }
.s1-sp .dev { position: relative; display: inline-block; max-width: 100%; max-height: 100%; } .s1-sp .dev img { display: block; } .s1-sp .dev canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; }
.s1-sp .win { display: grid !important; place-items: center; } .s1-sp .win .dev { height: auto; } .s1-sp .win img { max-height: calc(var(--h-cover, 100%)); }
.s1-shelf::before { content: ""; position: absolute; left: -16px; right: -16px; top: 58%; height: 26px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(232,112,106,.18), rgba(245,182,111,.28), rgba(43,76,154,.16), transparent) 0 0 / 200% 100%; filter: blur(6px); animation: s1Hz 9s linear infinite; }
@keyframes s1Hz { to { background-position: -200% 0; } }
.s1-bento img { animation: s1Sm .8s var(--out) both; } .s1-bento figure:nth-child(2) img { animation-delay: .06s; } .s1-bento figure:nth-child(3) img { animation-delay: .12s; } .s1-bento figure:nth-child(4) img { animation-delay: .18s; }
@keyframes s1Sm { from { transform: scaleX(1.6); filter: blur(10px) saturate(1.3); opacity: .35; transform-origin: 30% 50%; } 60% { filter: blur(2px); } }

/* ===== long exposure in the diagonal band ===== */
.s1-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(2px); }
.s1-circ .orb { fill: none; stroke: url(#none); stroke: #E8706A; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 86; animation: s1Orb 7s linear infinite; filter: drop-shadow(0 0 6px rgba(232,112,106,.6)); opacity: .8; } .s1-circ .orb.b { stroke: #2B4C9A; animation-duration: 9s; animation-direction: reverse; }
@keyframes s1Orb { to { stroke-dashoffset: -100; } }
.s1-band .bar { background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(20,21,22,.07) 5px 6px), linear-gradient(90deg, transparent, rgba(232,112,106,.22) 40%, rgba(245,182,111,.3) 50%, rgba(43,76,154,.18) 60%, transparent) 0 0 / 260% 100% !important; animation: s1Bar 6s linear infinite; }
.s1-band .bar.b { animation-duration: 8s; animation-direction: reverse; } @keyframes s1Bar { to { background-position: 0 0, -260% 0; } }
.s1-band h2 i:hover { text-shadow: -.18em 0 0 rgba(226,102,140,.28), -.36em 0 0 rgba(226,102,140,.16), -.54em 0 0 rgba(226,102,140,.08), -.72em 0 0 rgba(226,102,140,.04); }
.s1-band:hover h2 i { text-shadow: -.12em 0 0 rgba(20,21,22,.08), -.24em 0 0 rgba(20,21,22,.04); }
/* index preview: box follows the photo, no grey fill */
.s1-sm { width: auto !important; padding: 6px 6px 5px !important; } .s1-sm img { width: auto !important; height: auto !important; max-width: 320px; max-height: 230px; background: none !important; object-fit: contain; }

/* ===== smooth intro exit ===== */
.s1 .loader { transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), transform 1.3s cubic-bezier(.4, 0, .2, 1) !important; }
.s1 .loader.is-done { opacity: 0; transform: none !important; }
.s1 .loader.ld-out .ld-card p > span { transition: transform .9s cubic-bezier(.6, 0, .2, 1), opacity .7s; transform: translateY(-60%) !important; opacity: 0; animation: none; }
.s1 .loader.ld-out .ld-card .c2 span { transition-delay: .06s; } .s1 .loader.ld-out .ld-card .c3 span { transition-delay: .12s; }
.s1 .loader.ld-out .ld-lines i { transition: transform .8s cubic-bezier(.6, 0, .2, 1); transform: scaleX(0) !important; animation: none; }
.s1 .loader.ld-out .ld-hz { transition: height 1.1s cubic-bezier(.4, 0, .2, 1), opacity 1.1s; height: 120svh !important; opacity: 0 !important; }
.s1 .loader.ld-out .ld-t { opacity: 0; transition: opacity .4s; }
.s1 .x-hero > * { transition: opacity 1.2s .35s, transform 1.4s .35s cubic-bezier(.2, .7, .2, 1); } body.s1:not(.s1-in) .x-hero > * { opacity: 0; transform: scale(1.03); }
/* ===== books: plain colour spines, scale instead of flip, no blur/long exposure ===== */
.s1-sp .sp .stk { display: none !important; } .s1-sp .sp::before { background: linear-gradient(180deg, var(--b), var(--a) 72%) !important; }
.s1-sp { perspective: none !important; }
.s1-sp .bk { transform: none !important; left: 0 !important; width: 100% !important; margin-left: 0 !important; transform-style: flat !important; transition: none !important; }
.s1-sp .bk > span { backface-visibility: visible !important; }
.s1-sp .sp { left: 0 !important; width: 100% !important; margin-left: 0 !important; transform: none !important; opacity: 1 !important; transition: opacity .3s !important; }
.s1-sp.on .sp { opacity: 0 !important; }
.s1-sp .face { left: 0 !important; width: 100% !important; transform: scale(.94) !important; transform-origin: 50% 100%; opacity: 0 !important; transition: opacity .45s .2s, transform .7s .15s cubic-bezier(.2, .7, .2, 1) !important; }
.s1-sp.on .face { transform: none !important; opacity: 1 !important; }
.s1-sp .pg, .s1-sp .tp, .s1-sp .bkf, .s1-sp .dev canvas { display: none !important; }
.s1-sp { transition: flex-basis .7s cubic-bezier(.2, .7, .2, 1), width .7s cubic-bezier(.2, .7, .2, 1), height .7s cubic-bezier(.2, .7, .2, 1), rotate .5s var(--out), translate .4s var(--out) !important; }
.s1-bento img { animation: s1Fd .45s ease both !important; } @keyframes s1Fd { from { opacity: 0; } }
.s1-shelf::before { display: none; }
/* softer reader button */
.s1-btn { background: #E9E6DF !important; color: #2A2B2C !important; box-shadow: inset 0 0 0 1px rgba(20,21,22,.08); }
.s1-btn i { background: #fff !important; color: #2A2B2C !important; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.s1-btn:hover { background: color-mix(in srgb, var(--pc) 32%, #F4F2EC) !important; color: #1E1F20 !important; }

/* ===== no glitches: calm transitions ===== */
.s1-reader.turn .s1-pg.r { animation: none !important; } .s1-reader.turn .s1-pg.l > * { animation: s1Fade .45s ease both !important; } @keyframes s1Fade { from { opacity: 0; } }
.s1-pg.r.flipin { animation: none !important; }
.s1-sf { position: relative; } .s1-sf img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; opacity: 0; transition: opacity .35s ease; animation: none !important; box-shadow: none !important; } .s1-sf img.on { opacity: 1; }
.s1-sf { background: none !important; }
.s1 .x-hero > canvas { transform: none !important; transition: opacity 1.2s .35s !important; }
/* no colour-inverting blend on hero type: plain white with a soft shadow */
.s1 .x-vert, .s1 .x-meta { mix-blend-mode: normal !important; color: #fff !important; text-shadow: 0 1px 14px rgba(0,0,0,.28); }
.s1 .x-vert .mono, .s1 .x-meta span { color: rgba(255,255,255,.88) !important; }

/* ===== intro: viewfinder + slit scan (replaces the gradient blur) ===== */
.ld-hz { display: none !important; }
.ld-vf { position: relative; z-index: 2; padding: 46px 64px; --s: clamp(0, calc((var(--k, 0) - .12) * 2.2), 1); }
.ld-vf > b { position: absolute; width: 22px; height: 22px; border: 0 solid var(--ink); opacity: 0; animation: vfIn .9s .1s cubic-bezier(.2, .7, .2, 1) forwards; }
.ld-vf > b:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; --tx: 40%; --ty: 40%; } .ld-vf > b:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; --tx: -40%; --ty: 40%; }
.ld-vf > b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; --tx: 40%; --ty: -40%; } .ld-vf > b:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; --tx: -40%; --ty: -40%; }
@keyframes vfIn { from { opacity: 0; translate: calc(var(--tx) * 6) calc(var(--ty) * 3); } to { opacity: 1; translate: 0 0; } }
.ld-scan { position: absolute; top: -10px; bottom: -10px; left: calc(var(--s) * 100%); width: 1px; background: #D8452F; box-shadow: 0 0 0 .5px rgba(216,69,47,.3); opacity: calc(1 - var(--s) * var(--s)); }
.ld-vf .ld-card { clip-path: inset(0 calc((1 - var(--s)) * 100%) 0 0); }
.ld-vf .ld-card p > span { animation-duration: 1.4s !important; }
.s1 .loader.ld-out .ld-vf > b { transition: translate .9s cubic-bezier(.6, 0, .2, 1), opacity .7s; opacity: 0; } .s1 .loader.ld-out .ld-vf > b:nth-child(odd) { translate: -40px 0; } .s1 .loader.ld-out .ld-vf > b:nth-child(even) { translate: 40px 0; }

/* no white flash: new layer fades in OVER the old one, which stays opaque underneath */
.s1-sp .sp, .s1-sp.on .sp { opacity: 1 !important; transition: none !important; z-index: 1; } .s1-sp .face { z-index: 2; }
.s1-sp:not(.on) .face { transition: opacity .3s, transform .5s cubic-bezier(.2, .7, .2, 1) !important; }
.s1-sf img { transition: opacity .3s ease; z-index: 1; } .s1-sf img.top { z-index: 2; } .s1-sf img:not(.on) { transition: none; }
.s1-reader.turn .s1-pg.l > * { animation: none !important; }
.s1-pg.l > * { max-width: 100% !important; } .s1-pg.l p.toc.t1 { font-size: clamp(30px, 2.6vw, 42px) !important; overflow-wrap: anywhere; }
/* glass reader button */
.s1-btn { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28) 55%, rgba(255,255,255,.5)) !important; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); color: #1E1F20 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,21,22,.06), 0 0 0 1px rgba(255,255,255,.6), 0 10px 26px -14px rgba(20,21,22,.35) !important; }
.s1-btn::before { content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-18deg); transition: left .8s var(--out); pointer-events: none; }
.s1-btn:hover::before { left: 120%; }
.s1-btn i { background: rgba(255,255,255,.85) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 8px -3px rgba(0,0,0,.2) !important; }
.s1-btn:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 22%, rgba(255,255,255,.75)), color-mix(in srgb, var(--pc) 14%, rgba(255,255,255,.3)) 55%, rgba(255,255,255,.5)) !important; }

/* ===== intro: colourful light trails, no wipe ===== */
.ld-scan { display: none !important; } .ld-vf .ld-card { clip-path: none !important; }
.ld-lines i { height: var(--hh) !important; top: var(--y); background: linear-gradient(90deg, transparent, var(--c) 18%, color-mix(in srgb, var(--c) 70%, #fff) 50%, var(--c) 82%, transparent) !important; opacity: .9; border-radius: 99px; animation: ldLn 1.4s var(--d) cubic-bezier(.2, .7, .2, 1) forwards, ldDrift var(--sp) calc(var(--d) + 1.4s) ease-in-out infinite alternate !important; }
@keyframes ldDrift { from { translate: 0 0; } to { translate: calc(var(--hh) * 6) 0; } }
.ld-vf > b { border-color: #D8452F !important; }
.ld-vf { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* thinner intro lines */
.ld-lines i { height: calc(var(--hh) * .3 + .5px) !important; }
/* stop-motion: one fixed frame, every photo fills it (centred), hard cut */
.s1-bento.n1 { place-items: center; } .s1-sf { width: 100%; height: 100%; aspect-ratio: auto; overflow: hidden; border-radius: 2px; }
.s1-sf img { object-fit: cover !important; object-position: 50% 50% !important; transition: none !important; }

/* "open" link: serif slip + long-exposure streak in the project colour */
.s1-open { position: relative; align-self: center; display: inline-flex; align-items: baseline; gap: 12px; padding: 8px 4px 14px; font-family: "Newsreader", Georgia, serif; color: var(--ink); }
.s1-open small { font-family: var(--mono); font-size: var(--g-1); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.s1-open em { font-size: var(--g1); font-style: italic; }
.s1-open b { font-weight: 400; font-size: var(--g1); transition: transform .6s var(--out); }
.s1-open .stk { position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,.55) 1px 2px), linear-gradient(90deg, transparent, var(--pc) 12%, color-mix(in srgb, var(--pc) 55%, #fff) 50%, var(--pc) 88%, transparent); transform: scaleX(.35); transform-origin: left; opacity: .85; transition: transform .8s cubic-bezier(.2, .7, .2, 1), height .5s; border-radius: 3px; }
.s1-open:hover .stk { transform: scaleX(1); height: 8px; } .s1-open:hover b { transform: translateX(10px); }
/* ===== intro v3: smaller type, plain lines drawn full width left→right ===== */
.ld-vf { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 30px 44px !important; }
.ld-card { font-size: clamp(18px, 1.9vw, 28px) !important; line-height: 1.14 !important; }
.ld-vf > b { width: 14px !important; height: 14px !important; border-color: var(--ink) !important; }
.ld-lines i { left: 0 !important; right: 0 !important; height: 1px !important; background: var(--ink) !important; opacity: calc(.12 + var(--o, .2)) !important; border-radius: 0 !important; transform-origin: left !important; transform: scaleX(0); animation: ldLn 1.1s var(--d) cubic-bezier(.65, 0, .25, 1) forwards !important; }
.ld-lines i:nth-child(3n) { opacity: .5 !important; } .ld-lines i:nth-child(4n+1) { opacity: .14 !important; }
/* opened book = full-bleed cover image */
.s1-sp .win { padding: 0 !important; width: 100%; height: 100%; } .s1-sp .win .dev, .s1-sp .win img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; object-position: 50% 50%; box-shadow: none !important; display: block; }