/* ══════════════════════════════════════════════════════════════ NAVIS ARCHIVE — shared series stylesheet Tokens lifted from index.html so archive pages read as the same site. Each series sets --series on for its own accent. ══════════════════════════════════════════════════════════════ */ :root{ --bg:#03070b; --bg2:#071019; --panel:#08111a; --ink:#f3f6f8; --muted:#8f9dab; --quiet:#667482; --line:rgba(189,211,229,.15); --line2:rgba(189,211,229,.28); --blue:#86c9f2; --max:1440px; --serif:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Noto Sans JP",Arial,sans-serif; --series:var(--blue); --r:16px; /* Glass recipe. --bloom scales the bottom glow so a 100-plate grid doesn't turn into a wall of light; each page overrides it. */ --bloom:.34; --glass-edge:inset 0 1px rgba(255,255,255,.09); --glass-lift:0 22px 60px rgba(0,0,0,.5); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); line-height:1.65;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font:inherit} .wrap{width:min(var(--max),calc(100% - 48px));margin:auto} .eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--series)} .micro{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet)} /* ── masthead (mirrors index.html) ───────────────────────────── */ .header{position:fixed;z-index:100;inset:0 0 auto;background:rgba(3,7,11,.78); backdrop-filter:blur(20px);border-bottom:1px solid var(--line)} .nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:13px;min-width:max-content} .mark{width:34px;height:34px;border:1px solid rgba(255,255,255,.75);border-radius:50%;position:relative} .mark:before,.mark:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.38);border-radius:50%} .mark:before{inset:6px} .mark:after{inset:12px;background:rgba(255,255,255,.7);border-color:transparent} .brandtext{font-size:.7rem;line-height:1.45;letter-spacing:.16em} .brandtext small{font-size:.58rem;color:#8494a1} .navlinks{display:flex;gap:28px;font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:#aab6c1} .navlinks a{position:relative} .navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:1px; background:var(--series);transition:.3s} .navlinks a:hover{color:#fff} .navlinks a:hover:after,.navlinks a.on:after{right:0} .navlinks a.on{color:#fff} .navright{display:flex;align-items:center;gap:8px} .langlink{font-size:.66rem;letter-spacing:.12em;color:#6f7c87;padding:8px 5px; background:none;border:0;cursor:pointer} .langlink.active,.langlink:hover{color:#fff} @media(max-width:1080px){.navlinks{display:none}} /* ── series hero ─────────────────────────────────────────────── */ .shero{padding:150px 0 clamp(40px,5vw,70px);border-bottom:1px solid var(--line)} .shero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,410px); gap:clamp(26px,5vw,68px);align-items:center} .shero.solo .shero-in{grid-template-columns:1fr} .shero h1{font-family:var(--serif);font-weight:400; font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:.01em;margin:.32em 0 0} .shero .deck{margin-top:22px;color:var(--muted);font-size:clamp(.86rem,1.2vw,1rem); max-width:56ch;line-height:1.8} .shero .deck em{font-style:normal;color:var(--ink)} .btnrow{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px} .btn{border:1px solid var(--line2);border-radius:999px;padding:12px 24px; font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer; background:none;color:var(--ink);transition:background .25s,border-color .25s} .btn:hover{background:rgba(189,211,229,.08);border-color:var(--series)} .btn.solid{background:var(--ink);color:#03070b;border-color:var(--ink)} .btn.solid:hover{background:#fff} .sstats{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,1fr); margin-top:34px;max-width:560px;overflow:hidden;border-radius:var(--r); border:1px solid color-mix(in srgb,var(--series) 34%,transparent); background:linear-gradient(180deg, color-mix(in srgb,var(--series) 8%,rgba(8,13,21,.92)),rgba(4,8,14,.96)); box-shadow:0 0 0 1px rgba(255,255,255,.025),var(--glass-lift),var(--glass-edge)} .sstats::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(90% 70% at 50% 112%, color-mix(in srgb,var(--series) 26%,transparent),transparent 72%)} .sstats::after{content:"";position:absolute;left:6%;right:6%;top:0;height:1px; background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--series) 70%,transparent),transparent)} .sstat{padding:16px 18px;border-right:1px solid var(--line)} .sstat:last-child{border-right:0} .sstat b{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.8rem);font-weight:400;display:block;line-height:1} .sstat span{display:block;margin-top:7px;font-size:.55rem;letter-spacing:.2em; text-transform:uppercase;color:var(--quiet)} @media(max-width:900px){ .shero{padding:118px 0 40px} .shero-in{grid-template-columns:1fr} .sstats{grid-template-columns:repeat(2,1fr)} .sstat:nth-child(2){border-right:0} .sstat:nth-child(-n+2){border-bottom:1px solid var(--line)} } /* ── signature slot (spine / loop / sequence live here) ──────── */ .sig{width:100%;max-width:410px;justify-self:center;overflow:visible} @media(max-width:900px){.sig{max-width:300px;order:-1}} /* ── controls ────────────────────────────────────────────────── */ .controls{position:sticky;top:74px;z-index:60;background:rgba(3,7,11,.93); backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:13px 0} .controls-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0; mask-image:linear-gradient(90deg,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent)} .chips::-webkit-scrollbar{display:none} .chip{border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted); cursor:pointer;padding:8px 15px;font-size:.6rem;letter-spacing:.14em;white-space:nowrap; text-transform:uppercase;transition:.2s} .chip:hover{color:var(--ink);border-color:var(--line2)} .chip.on{color:#03070b;background:var(--ink);border-color:var(--ink)} .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line); border-radius:999px;padding:8px 15px;min-width:196px} .search input{background:none;border:0;color:var(--ink);font:400 .78rem var(--sans); width:100%;outline:none} .search input::placeholder{color:var(--quiet)} .count{font-size:.6rem;letter-spacing:.14em;color:var(--quiet);white-space:nowrap} /* ── chapter blocks + plate grid ─────────────────────────────── */ .chapter{padding:clamp(40px,5vw,68px) 0 0;scroll-margin-top:140px} .ch-head{position:relative;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; border-top:1px solid color-mix(in srgb,var(--ch,var(--series)) 62%,transparent); padding-top:17px} .ch-head::before{content:"";position:absolute;left:0;right:0;top:0;height:42px; pointer-events:none;background:linear-gradient(180deg, color-mix(in srgb,var(--ch,var(--series)) 17%,transparent),transparent); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 26%,transparent 72%); mask-image:linear-gradient(90deg,#000 0,#000 26%,transparent 72%)} .ch-head .rn{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.9rem); color:var(--ch,var(--series));line-height:1} .ch-head h2{font-family:var(--serif);font-weight:400;margin:0; font-size:clamp(1.3rem,2.9vw,2.3rem);letter-spacing:.005em} .ch-head .rng{font-size:.58rem;letter-spacing:.16em;color:var(--ch,var(--series)); border:1px solid currentColor;border-radius:999px;padding:5px 10px} .ch-head .tag{color:var(--muted);font-size:.78rem;margin-left:auto} /* The page sets --cols-lg inline; breakpoints set --cols directly so they still win. Never set --cols inline — it would outrank the media queries. */ .grid{display:grid;gap:clamp(11px,1.4vw,20px);margin-top:26px; --cols:var(--cols-lg,5);grid-template-columns:repeat(var(--cols),minmax(0,1fr))} .plate{position:relative;isolation:isolate;overflow:hidden;cursor:pointer; border:1px solid color-mix(in srgb,var(--ch,var(--series)) 40%,transparent); border-radius:var(--r);padding:9px 9px 13px; background:linear-gradient(180deg, color-mix(in srgb,var(--ch,var(--series)) 9%,rgba(8,13,21,.92)),rgba(4,8,14,.96)); box-shadow:0 0 0 1px rgba(255,255,255,.025),var(--glass-lift),var(--glass-edge); transition:transform .3s,box-shadow .3s,border-color .3s; -webkit-tap-highlight-color:transparent} .plate::before{content:"";position:absolute;inset:0;z-index:-1; /* bottom bloom */ background:radial-gradient(120% 58% at 50% 108%, color-mix(in srgb,var(--ch,var(--series)) calc(var(--bloom) * 100%),transparent),transparent 70%)} .plate::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px; /* light refraction */ background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--ch,var(--series)) 75%,transparent),transparent)} .plate:hover{transform:translateY(-4px); box-shadow:0 0 0 1px rgba(255,255,255,.05),0 26px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.14), 0 0 32px color-mix(in srgb,var(--ch,var(--series)) 24%,transparent)} .plate:focus-visible{outline:2px solid var(--ch,var(--series));outline-offset:3px} .frame{position:relative;aspect-ratio:var(--ar,2/3);border-radius:calc(var(--r) - 7px); background:#03070b center/cover no-repeat;overflow:hidden; border:1px solid rgba(189,211,229,.07)} .frame::after{content:"";position:absolute;inset:0;z-index:2} /* copy shield */ .frame.lazy{background-image:none} .plate[data-span="2"]{grid-column:span 2} .plate[data-span="3"]{grid-column:span 3} .plate.wide .frame{aspect-ratio:3/2} .pnum{display:block;margin:11px 0 6px;font-size:.58rem;letter-spacing:.16em; color:var(--ch,var(--series))} .ptitle{font-family:var(--serif);font-weight:400;font-size:.95rem;line-height:1.25;margin:0} .psub{margin:5px 0 0;font-size:.66rem;color:var(--quiet);line-height:1.5} .empty{padding:64px 0;color:var(--quiet);font-size:.82rem} @media(max-width:1180px){.grid{--cols:3}} @media(max-width:760px){ /* Search takes the first row, chips get a full-width scroller below — otherwise the chip strip is squeezed to a few clipped characters. */ .controls-in{row-gap:10px} .search{order:1;flex:1;min-width:0} .count{order:2} .chips{order:3;flex:1 0 100%} .grid{--cols:2;gap:10px} .plate{padding:7px 7px 11px} .ptitle{font-size:.84rem}.psub{font-size:.62rem} .ch-head .tag{margin-left:0;width:100%} .plate[data-span]{grid-column:span 2} } /* ── viewer ──────────────────────────────────────────────────── */ .lb{position:fixed;inset:0;z-index:200;background:rgba(2,5,9,.96);backdrop-filter:blur(14px); display:none;align-items:center;justify-content:center;padding:24px} .lb.open{display:flex} .lb-in{display:grid;grid-template-columns:auto minmax(0,370px);gap:clamp(22px,4vw,52px); align-items:center;max-width:940px;width:100%} /* Box is sized from the asset itself and the fill is `contain`, so a plate is never cropped — whatever its orientation. */ .lb-img{box-sizing:content-box;background:#03070b center/contain no-repeat; border:1px solid color-mix(in srgb,var(--lbc,var(--series)) 44%,transparent); border-radius:12px;position:relative;justify-self:end; box-shadow:var(--glass-edge),0 30px 90px rgba(0,0,0,.6), 0 0 46px color-mix(in srgb,var(--lbc,var(--series)) 17%,transparent); width:338px;height:600px;max-width:min(600px,86vw);max-height:min(600px,74vh)} .lb-img::after{content:"";position:absolute;inset:0} /* copy shield */ .lb-meta .rn{font-size:.6rem;letter-spacing:.2em;color:var(--lbc,var(--series))} .lb-meta h3{font-family:var(--serif);font-weight:400;margin:14px 0 0;line-height:1.1; font-size:clamp(1.5rem,3.4vw,2.4rem)} .lb-meta .sub{color:var(--muted);margin-top:11px;font-size:.92rem;line-height:1.6} .lb-meta dl{margin:26px 0 0;border-top:1px solid var(--line)} .lb-meta div{display:flex;justify-content:space-between;gap:16px;padding:10px 0; border-bottom:1px solid var(--line)} .lb-meta dt{color:var(--quiet);letter-spacing:.16em;text-transform:uppercase;font-size:.55rem} .lb-meta dd{margin:0;font-size:.6rem;letter-spacing:.09em;color:var(--muted);text-align:right} .lb-nav{display:flex;gap:10px;margin-top:22px} .lb-nav .btn{padding:11px 19px} .wrapnote{margin:13px 0 0;font-size:.55rem;letter-spacing:.14em;color:var(--quiet);text-transform:uppercase} .lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--muted); font-size:.62rem;letter-spacing:.18em;cursor:pointer;padding:10px} .lb-close:hover{color:var(--ink)} @media(max-width:820px){ .lb-in{grid-template-columns:1fr;justify-items:center;gap:22px;overflow-y:auto;max-height:100%} .lb-img{justify-self:center;max-width:78vw;max-height:52vh} .lb-meta{text-align:center}.lb-meta div{text-align:left} } /* ── footer ──────────────────────────────────────────────────── */ .sfoot{margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--line);padding:42px 0 58px} .sfoot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px} .sfoot-grid p{font-size:.72rem;color:var(--quiet);line-height:1.75;margin:9px 0 0;max-width:44ch} .sfoot a{color:var(--series)} /* ── protection + a11y floor ─────────────────────────────────── */ .frame,.lb-img,.plate{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} img{-webkit-user-drag:none} @media print{.frame,.lb-img{display:none!important}} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important} html{scroll-behavior:auto}} /* ══════════════════════════════════════════════════════════════ MOTION — the vocabulary the brief allows: fade, scan line, number count, glow, data pulse. No bounce, no elastic, no flash. Everything here is suppressed under prefers-reduced-motion. ══════════════════════════════════════════════════════════════ */ /* Scan line — sweeps once as a plate resolves, then never again. */ @keyframes scanIn{ 0% {transform:translateY(-100%);opacity:0} 12% {opacity:1} 88% {opacity:1} 100%{transform:translateY(1200%);opacity:0} } .frame{--scan:color-mix(in srgb,var(--ch,var(--series)) 70%,transparent)} .frame.resolving::before{content:"";position:absolute;z-index:3; left:0;right:0;top:0;height:9%;pointer-events:none; background:linear-gradient(180deg,transparent,var(--scan),transparent); animation:scanIn 1.05s cubic-bezier(.4,0,.2,1) forwards} /* Plates fade up as they enter, staggered by their position in the row. */ @keyframes plateIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* Hidden only when the renderer has confirmed it can reveal them again. Without .reveal-ready on , plates are visible by default — a broken observer, a JS error, or no JS at all can never blank the grid. */ body.reveal-ready .plate{opacity:0} body.reveal-ready .plate.shown{animation:plateIn .55s cubic-bezier(.22,.61,.36,1) forwards} /* Data pulse — the live seam under each chapter rule. */ @keyframes dataPulse{ 0% {transform:translateX(-100%)} 100%{transform:translateX(100%)} } .ch-head::after{content:"";position:absolute;left:0;top:-1px;width:34%;height:1px; background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--ch,var(--series)) 95%,transparent),transparent); animation:dataPulse 5.5s linear infinite;pointer-events:none} /* Signature graphics breathe rather than spin. */ @keyframes sigGlow{0%,100%{opacity:.72}50%{opacity:1}} .sig .tick,.sig .cell,.sig .node circle{animation:sigGlow 4.2s ease-in-out infinite} .sig .tick:hover,.sig .cell:hover{animation:none} @media(prefers-reduced-motion:reduce){ body.reveal-ready .plate{opacity:1;animation:none!important} .frame.resolving::before,.ch-head::after, .sig .tick,.sig .cell,.sig .node circle{animation:none!important} }