/* ══════════════════════════════════════════════════════════════════════════ Motion — how things arrive, and how they answer the hand. The timings are the reference's own, read out of designhouse.co.kr's GSAP calls rather than guessed at: a line of text rises 110% of its height out of a mask over 1s (0.7s on a phone), lines 80ms apart (50ms), on a curve that waits and then commits — cubic-bezier(.38,.005,.215,1). The header drops in from above on expo.out. A picture under the pointer leans toward it by up to 6°. On a phone the history frames fold toward you as they reach the middle of the screen, 35° at the edges, squared so the middle stays flat. Nothing here runs under prefers-reduced-motion; motion.js leaves every element in its resting state and none of the pending states below apply. ══════════════════════════════════════════════════════════════════════════ */ /* Held back until the lines have been measured, so nothing is seen at rest and then snatched away to be revealed. */ .motion-pre #main,.motion-pre .masthead{opacity:0} /* ── Reveal: resting-before-arrival states ─────────────────────────────── */ .rv-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em} .rv-inner{display:inline-block;white-space:nowrap} .rv-inner.rv-whole{display:block;white-space:normal} .rv-pending[data-reveal=lines] .rv-inner{transform:translateY(110%)} /* Not split yet (its page was hidden when it was found): keep it out of sight until it is. */ .rv-pending.rv-unsplit{opacity:0} .rv-pending[data-reveal=fade]{opacity:0} /* Not clip-path: Chrome's IntersectionObserver counts an element's own clip-path, so a picture clipped to nothing never reports that it has come into view. It waits transparent instead, and the wipe's first frame does the hiding from then on. */ .rv-pending[data-reveal=image]{opacity:0} /* ── Pointer tilt ──────────────────────────────────────────────────────── */ /* The featured photographs used to lean the same way whichever side the cursor came from (rotateY(-4deg) rotate(-1.1deg) on :hover). They follow the pointer now, so the per-frame transform must not be smoothed a second time by the old 800ms transition. */ @media(hover:hover) and (pointer:fine){ .history-cycle .photo-button:hover,.history-grid .photo-button:hover{transform:none} .history-cycle .history-item{perspective:none} .is-tilting{transition:scale 600ms var(--ease-out),opacity 560ms var(--ease-out)!important;will-change:transform} /* The lift follows :hover, not the tilt. The tilt takes half a second to settle after the pointer leaves, and a lift tied to it held the old picture up, then dropped it — the jolt you saw when moving from one picture to the next. */ .gallery .photo-button:hover{scale:1.015} .history-cycle .photo-button:hover{scale:1.012} /* The featured frames fold with the scroll, frame by frame; the old 800ms transform transition would drag every fold half a second behind the wheel. */ .history-cycle .photo-button{transition:scale 600ms var(--ease-out),opacity 560ms var(--ease-out)} } /* ── Direction-aware underline ─────────────────────────────────────────── */ /* The rule under a link grows from the side the pointer came in on and leaves toward the side it went out by. */ .ink-link .link-label::after{transform-origin:var(--ink-origin,left) 50%} /* ── Arrows that point where they go ───────────────────────────────────── */ @media(hover:hover) and (pointer:fine){ .back-link svg{transition:translate 520ms var(--ease-out)} .back-link:hover svg{translate:-4px 0} .cover-label svg{transition:translate 620ms var(--ease-out)} .chapter-link:hover .cover-label svg{translate:3px -3px} } /* ── Header ────────────────────────────────────────────────────────────── */ .menu-toggle{display:none} .masthead .header-link[href="#history"]{justify-self:end} /* ── Site menu (phone) ─────────────────────────────────────────────────── */ .site-menu{position:fixed;inset:0;z-index:40;background:var(--color-paper);display:flex;flex-direction:column; padding:calc(64px + 28px) var(--gutter) max(28px,env(safe-area-inset-bottom));overflow-y:auto} .site-menu[hidden]{display:none} .site-menu__list{list-style:none;margin:0;padding:0} .site-menu__list li{position:relative;overflow:hidden} .site-menu__hr{display:block;height:1px;background:var(--color-ink);transform-origin:left center} .site-menu__list a{display:flex;align-items:center;min-height:92px;font:400 46px/1 var(--font-display);color:var(--color-ink)} .site-menu__list a[aria-current=page]{color:var(--color-accent)} .site-menu__list li:last-child::after{content:'';display:block;height:1px;background:var(--color-ink)} .site-menu__foot{display:flex;flex-direction:column;gap:14px;margin-top:34px;font-size:15px} .site-menu__foot a{display:inline-flex;align-items:center;min-height:32px;width:fit-content} .site-menu__foot .mono{font-size:11px;color:var(--color-muted);letter-spacing:.04em} body.menu-open{overflow:hidden} body.menu-open .masthead{position:relative;z-index:41} /* ── Intro ─────────────────────────────────────────────────────────────── */ .intro{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:var(--color-paper); font:400 clamp(24px,4.4vw,62px)/1 var(--font-display);color:var(--color-ink);cursor:default} .intro-on #intro{display:grid} .intro__row{display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:.42em} .intro__static{white-space:nowrap} .intro__dot{width:.3em;height:.3em;border-radius:50%;background:var(--color-accent)} /* The word column is one line tall and shows the lines above and below it; the list travels up through it and the line in the slot is the one that is lit. */ .intro__words{position:relative;height:1.2em} .intro__list{list-style:none;margin:0;padding:0;will-change:transform} .intro__list li{height:1.2em;line-height:1.2em;white-space:nowrap;color:var(--color-ink);opacity:.26;transition:opacity 420ms var(--ease-out)} .intro__list li.is-active{opacity:1} .intro .rv-line{padding-bottom:.1em;margin-bottom:-.1em} /* Its opening frame, so the words are not seen standing before they rise. */ .intro .rv-inner{transform:translateY(110%)} .intro__dot{transform:scale(0)} /* ══════════════════════════════════════════════════════════════════════════ Phone composition, after the reference's mobile pages. ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:900px){ /* Header: mark on the left, a menu on the right, the two page links move into the menu. */ .masthead{grid-template-columns:1fr auto} .masthead .header-link{display:none} .masthead .brand{justify-self:start;justify-content:flex-start} .menu-toggle{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;justify-self:end;color:var(--color-ink)} .menu-toggle span{grid-area:1/1;display:block;width:26px;height:1.5px;background:currentColor; transition:transform 520ms var(--ease-out),translate 520ms var(--ease-out)} .menu-toggle span:first-child{translate:0 -4px} .menu-toggle span:last-child{translate:0 4px} .menu-toggle[aria-expanded=true] span:first-child{translate:0 0;transform:rotate(45deg)} .menu-toggle[aria-expanded=true] span:last-child{translate:0 0;transform:rotate(-45deg)} /* The home page hides the small mark because the large one is in the middle; with the menu open the mark comes back so the header reads as a header. */ body.menu-open[data-view=home] .brand{visibility:visible;opacity:1} /* Projects: a centred title with a line under it, one card at a time, a band behind the card, and a hint about what the hand can do. */ #projects .view-heading{flex-direction:column;align-items:center;justify-content:center;gap:10px; padding:22px var(--gutter) 30px;text-align:center} #projects .view-heading h1{font-size:44px} .projects-sub{display:block;margin:0;font-size:14px;color:var(--color-muted)} .chapter-index{display:flex!important;grid-template-columns:none!important;gap:14px!important;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain; padding:0 11vw 6px!important;margin:0; background:linear-gradient(to bottom,transparent 13%,var(--color-surface) 13%,var(--color-surface) 71%,transparent 71%)} .chapter-index::-webkit-scrollbar{display:none} .chapter-link{flex:0 0 78vw!important;scroll-snap-align:center;display:flex!important;flex-direction:column;gap:0!important; background:var(--color-paper);padding:12px 12px 0;transition:opacity 300ms linear} /* The picture is absolutely placed; without a positioned frame it measured itself against the whole card and spilled past the 4:5 window. */ .cover-media{position:relative!important;inset:auto!important;aspect-ratio:4/5!important;width:100%;overflow:hidden} .cover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cover-label{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;min-height:58px!important; padding:0!important;margin-top:14px;border-top:1px solid var(--color-ink)!important; font:500 13px/1 var(--font-body)!important;letter-spacing:.14em;text-transform:uppercase} .cover-label .cover-num{justify-self:start;font:12px/1 var(--font-mono);letter-spacing:0;text-transform:none} .cover-label>span:not(.cover-num){justify-self:center} .cover-label svg{justify-self:end;width:30px!important;height:30px;padding:6px;border:1px solid currentColor;border-radius:50%} .projects-hint{display:block;margin:22px 0 0;text-align:center;font-size:13px;color:var(--color-muted)} .projects-back{display:flex;margin:14px auto 0} /* History, featured: the scale comes back as a column on the left, the photograph sits to the right of it, and the year and date go underneath. */ .history-view[data-mode=featured] .history-index{display:flex!important;position:absolute; left:var(--gutter);top:calc(50% + 70px);translate:0 -50%;height:36vh;width:24px;padding:0;gap:0;z-index:2} .history-view[data-mode=featured] #history-timeline.scrubber{width:24px} .scrubber .year-mark{padding-left:0;font-size:0} .scrubber .year-mark::before{width:13px} .history-view[data-mode=featured] .history-stream{padding:0 var(--gutter) 0 62px} .history-cycle{gap:64px;padding-bottom:64px} .history-cycle .history-item{flex-direction:column;align-items:flex-end;justify-content:flex-start;padding:0;gap:16px;perspective:none} .history-cycle .photo-button{transition:none;transform-origin:50% 50%} .history-caption{display:flex;align-self:stretch;align-items:baseline;gap:12px;margin:0} .history-caption .cap-year{font:17px/1 var(--font-body);letter-spacing:.02em} .history-caption .cap-date{font:11px/1 var(--font-mono);color:var(--color-muted)} .history-cycle .history-outro{align-self:stretch} /* Chapter gallery on a phone folds the same way as the history. */ .gallery[data-mode=vertical] .photo-button{transition:none} } .history-caption{display:none} @media(max-width:900px){.history-caption{display:flex}} .projects-sub,.projects-hint{display:none} @media(max-width:900px){.projects-sub,.projects-hint{display:block}} .cover-num{font:11px/1 var(--font-mono);color:var(--color-muted);margin-right:.7em;vertical-align:.5em} @media(min-width:901px){.cover-label .cover-num{display:inline}} @media(prefers-reduced-motion:reduce){ .rv-pending[data-reveal=lines] .rv-inner{transform:none} .rv-pending[data-reveal=fade]{opacity:1} .rv-pending[data-reveal=image]{opacity:1} .intro-on #intro{display:none} } /* ── Footprints ──────────────────────────────────────────────────────────── Walking prints are white on a `difference` layer: dark on paper, light on the black logo and across the map. They land at .62 and fade out. A press is red, on a normal layer, and fades more slowly — an afterimage of the stamp. */ @media(hover:hover) and (pointer:fine){ .foot-trail{mix-blend-mode:difference} .foot-trail.foot-stamps{mix-blend-mode:normal;z-index:91} .foot-trail .foot-print{background-color:#fff;opacity:.62;transition:opacity 1600ms linear} .foot-trail .foot-print.is-settled{opacity:0} .foot-stamps .foot-print.is-press{background-color:var(--color-accent);opacity:.9; transition:opacity 3200ms cubic-bezier(.65,0,.9,.45)} .foot-stamps .foot-print.is-press.is-settled{opacity:0} .foot-trail .is-leaving{opacity:0!important;transition:opacity 700ms linear!important} } /* ── Captions ────────────────────────────────────────────────────────────── Every caption is set in the face the header uses for About and History. They had drifted into three others — a monospace for dates, uppercase Pretendard for the mode switch and the card labels — and it showed. */ .history-grid figcaption{font:15px/1 var(--font-display);letter-spacing:0;color:var(--color-muted)} .history-contact figcaption{font:13px/1 var(--font-display);letter-spacing:0} .history-caption .cap-year{font:21px/1 var(--font-display);letter-spacing:0} .history-caption .cap-date{font:15px/1 var(--font-display);color:var(--color-muted)} .zoom-meta,.zoom-meta.mono{font:17px/1 var(--font-display)!important;letter-spacing:0} .scrubber .year-mark{font:12px/1 var(--font-display);letter-spacing:0} .cover-num{font:14px/1 var(--font-display);letter-spacing:0;vertical-align:.35em} .projects-sub{font:17px/1.2 var(--font-display)} .projects-hint{font:15px/1.2 var(--font-display)} .history-modes button{font:18px/1 var(--font-display);letter-spacing:0;text-transform:none} .site-menu__foot{font:19px/1.2 var(--font-display)} .site-menu__foot .mono{font:15px/1 var(--font-display);letter-spacing:0} @media(max-width:900px){ .history-modes button{font-size:17px;letter-spacing:0} .scrubber .year-mark{font-size:0} .cover-label{font:400 25px/1 var(--font-display)!important;letter-spacing:0;text-transform:none} .cover-label .cover-num{font:15px/1 var(--font-display);vertical-align:0} } /* ══════════════════════════════════════════════════════════════════════════ Featured history, after the reference's timeline. The stream used to start under a header, a title row and a row of years, so every photograph was cut off 156px down the screen and the page read as a box with pictures in it. Now the stream is the whole window: the header, the years and the mode switch float over it in white on `difference` — black on paper, inverted where a photograph passes under — so a picture rising to the top runs straight under the logo instead of stopping short of it. The years sit small under the logo. Grid and Contact keep the ordinary header. ══════════════════════════════════════════════════════════════════════════ */ body[data-view=history]:has(#history[data-mode=featured]) .masthead{ position:fixed;top:0;left:0;right:0;z-index:30;background:transparent; mix-blend-mode:difference;color:#fff} body[data-view=history]:has(#history[data-mode=featured]) .masthead .brand img{filter:invert(1)} body[data-view=history]:has(#history[data-mode=featured]).menu-open .masthead{mix-blend-mode:normal;color:var(--color-ink);background:var(--color-paper)} body[data-view=history]:has(#history[data-mode=featured]).menu-open .masthead .brand img{filter:none} #history[data-mode=featured]{display:block;position:relative;height:100%} #history[data-mode=featured] .history-stream{position:absolute;inset:0;margin:0;padding:0 var(--gutter)} #history[data-mode=featured] .history-heading, #history[data-mode=featured] .history-years{mix-blend-mode:difference;color:#fff;z-index:31} #history[data-mode=featured] .history-heading{position:absolute;left:0;right:0;top:80px;padding:12px var(--gutter) 0;pointer-events:none} #history[data-mode=featured] .history-heading>*{pointer-events:auto} /* 62px: clear of the logo link's 44px tap area, which ends at 62. */ #history[data-mode=featured] .history-years{position:absolute;left:50%;top:62px;transform:translateX(-50%);gap:18px;padding:0} #history[data-mode=featured] .history-years button{font:15px/1 var(--font-display);min-height:30px;min-width:30px;padding:0} /* Under difference a grey reads as a pale grey; white at half strength reads as a mid one. */ #history[data-mode=featured] .history-modes button,#history[data-mode=featured] .history-years button{color:#fff;opacity:.5} #history[data-mode=featured] .history-modes button[aria-pressed=true],#history[data-mode=featured] .history-years button[aria-current=true]{opacity:1} #history[data-mode=featured] .history-index{top:0;bottom:24px;justify-content:center} #history[data-mode=featured] #history-timeline.scrubber{flex:none;height:38vh} #history[data-mode=featured] #history-pause{position:absolute;left:0;bottom:0} #history[data-mode=featured] .history-current-year{z-index:31} #history[data-mode=featured] .history-cycle{gap:56px;padding-bottom:56px} @media(max-width:900px){ body[data-view=history]:has(#history[data-mode=featured]) .menu-toggle{color:#fff} /* Below the 58px header and clear of the menu button's tap area. */ #history[data-mode=featured] .history-heading{top:60px;padding:0 var(--gutter)} /* On a phone the page title gives way to the photographs, as in the reference; it is still there for a screen reader. */ #history[data-mode=featured] #history-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #history[data-mode=featured] .history-modes{margin-left:auto;gap:12px} #history[data-mode=featured] .history-modes button{font-size:15px;min-height:34px} #history[data-mode=featured] .history-years{left:calc(var(--gutter) - 6px);transform:none;top:60px;gap:2px} #history[data-mode=featured] .history-years button{font-size:14px;min-height:38px;min-width:40px;padding:0 3px} #history[data-mode=featured] .history-index{top:50%;translate:0 -50%;bottom:auto} #history[data-mode=featured] .history-stream{padding:0 var(--gutter) 0 62px} } /* ══════════════════════════════════════════════════════════════════════════ Phone pass, 24 September. ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:900px){ /* Home: a smaller mark, and the ribbon runs edge to edge and down to the bottom, frames touching, as it does on the desk. */ .hero-logo{width:min(150px,40vw)!important;max-height:13dvh!important} .home-view{padding-bottom:0!important;gap:0!important} .rail-track,.rail-cycle{gap:0!important} /* Three sizes that do not compete: the mark small, the menu smaller, the page title the largest thing in the header band. */ .masthead .brand img{width:44px!important} .menu-toggle span{width:20px} .view-heading h1,.chapter-heading h1,.history-heading h1{font-size:32px!important} /* Projects: one screen, no scrolling. The card is sized from the height that is left, so it fits a short phone as well as a tall one. */ /* :not([hidden]) — an id outranks the global [hidden] rule, and without it the hidden page was drawn under Home and pushed the whole screen up by the header's height. */ #projects{--card:min(78vw,calc((100dvh - 300px) * .8 + 24px));--card-h:calc((var(--card) - 24px) * 1.25 + 84px)} #projects:not([hidden]){display:flex!important;flex-direction:column;overflow:hidden!important;padding-bottom:0!important} #projects .view-heading{padding:14px var(--gutter) 14px!important;flex:none} #projects .view-heading h1{font-size:40px!important} .chapter-index{flex:1 1 auto;align-items:center;padding:0 calc((100vw - var(--card)) / 2)!important; background:linear-gradient(var(--color-surface),var(--color-surface)) center / 100% calc(var(--card-h) * .58) no-repeat!important} .chapter-link{flex:0 0 var(--card)!important} .projects-hint{flex:none;margin:10px 0 max(18px,env(safe-area-inset-bottom))!important;font-size:14px!important;letter-spacing:.02em} .projects-back{display:none!important} /* The arrow on its own, thin, without the ring. */ .cover-label svg{border:0!important;padding:0!important;width:18px!important;height:18px!important;stroke-width:1.25} /* Timeline, featured. */ #history[data-mode=featured] .history-index, .history-view[data-mode=featured] .history-index, #history[data-mode=featured] #history-timeline.scrubber{height:62vh!important} .history-cycle .history-item{align-items:center!important;gap:10px!important} .history-caption{justify-content:center;text-align:center;align-self:stretch; font:13px/1 var(--font-display);color:var(--color-muted);letter-spacing:.03em} .history-cycle{gap:44px!important;padding-bottom:44px!important} #history[data-mode=featured] .history-years{gap:0!important} #history[data-mode=featured] .history-years button{min-width:36px!important} #history[data-mode=featured] .history-modes{gap:10px!important} /* Grid and Index: the switch and the years closer together. */ .history-view:not([data-mode=featured]) .history-heading{padding-bottom:2px!important} .history-view:not([data-mode=featured]) .history-years{padding-bottom:6px!important} } /* The scale runs most of the height, on the desk too. */ @media(min-width:901px){#history[data-mode=featured] #history-timeline.scrubber{height:64vh}} /* About: the mark was the largest thing on the page and crowded the facts beside it. */ .about-logo{max-width:180px!important} @media(min-width:1600px){.about-logo{max-width:210px!important}} @media(max-width:1100px){.about-logo{max-width:150px!important}} .about-intro h2{margin-bottom:26px!important} /* ── Sheets: Grid and Index ──────────────────────────────────────────────── Each frame rises into place from the moment the sheet is built, in reading order. This replaced a per-frame wipe that waited for each one to scroll into view: 209 frames were shown, hidden a frame later, then wiped in one by one, which read as pictures blinking out and hanging in mid-air. `backwards` hands the frame back to the stylesheet when it lands, so the hover dim keeps working. */ @keyframes sheet-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}} .history-contact .history-item{animation:sheet-in 640ms cubic-bezier(.215,.61,.355,1) backwards; animation-delay:calc(min(var(--i,0),180) * 5ms + 140ms)} .history-grid .history-item{animation:sheet-in 820ms cubic-bezier(.215,.61,.355,1) backwards; animation-delay:calc(min(var(--i,0),20) * 45ms + 140ms)} /* The enlargement on hover eased in over 380ms but snapped back; both ways now. */ .history-contact .photo-button{transition:transform 420ms cubic-bezier(.215,.61,.355,1),rotate 420ms cubic-bezier(.215,.61,.355,1)!important} /* Polaroids develop: the picture comes up out of the dark slot a beat after its print lands. */ @keyframes develop{from{opacity:0}45%{opacity:.4}to{opacity:1}} .history-contact .photo-button img{animation:develop 1500ms cubic-bezier(.33,0,.2,1) backwards; animation-delay:calc(min(var(--i,0),180) * 5ms + 420ms)} @media(prefers-reduced-motion:reduce){.history-contact .history-item,.history-grid .history-item,.history-contact .photo-button img{animation:none}} /* The passage between pages: the opening's paper and word wheel, over everything but the footprints. */ .passage{z-index:85} .passage.is-on{display:grid} /* ── Text face ───────────────────────────────────────────────────────────── −3% tracking. Set on the body, so everything in the text face takes it; the display face is put back to 0 wherever it is used, since Instrument Serif is already drawn tight. */ body{letter-spacing:-.03em} :where(h1,h2,.header-link,.intro,.cover-label,.project-link,.history-years button,.history-modes button,.chapter-nav, .site-menu__list,.site-menu__foot,.history-outro,.history-caption,.zoom-meta,.illustrated-map figcaption>span:first-child, .scrubber,.history-grid figcaption,.history-contact figcaption,.projects-hint,.cover-num,.history-current-year){letter-spacing:0} /* ── Grid hover ──────────────────────────────────────────────────────────── No more dimming the others — it made the sheet hard to look at. The one under the pointer comes forward a little instead. */ .history-grid:has(.photo-button:hover) .history-item:not(:has(.photo-button:hover)), .history-grid:has(.photo-button:focus-visible) .history-item:not(:has(.photo-button:focus-visible)){opacity:1!important} .history-grid .photo-button{transition:scale 520ms var(--ease-out),transform 520ms var(--ease-out)} .history-grid .photo-button:is(:hover,:focus-visible){scale:1.07!important;z-index:2} /* ── Colophon on one screen ──────────────────────────────────────────────── Four sections side by side under the title, all of it in view at once, no scroll and no fade at the fold. The phone keeps its single column. */ @media(min-width:901px){ .colophon-view{overflow:hidden!important} .colophon-view::after{display:none!important} .colophon-view>.view-heading{width:auto!important;max-width:none!important;margin:0!important; padding:12px var(--gutter) 28px!important;justify-self:auto!important} #colophon .colophon-content{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px; width:auto!important;max-width:none!important;margin:0!important;padding:0 var(--gutter)!important;overflow:visible!important} #colophon .colophon-block{display:block!important;margin:0!important;padding:16px 0 0!important;border-top:1px solid var(--color-rule)} #colophon .colophon-block h2{font-size:24px!important;line-height:1.1;margin:0 0 16px!important;padding:0!important} #colophon .colophon-block p{font-size:13px!important;line-height:1.62!important;max-width:none!important;margin:0 0 10px!important} #colophon .colophon-imprint{margin-top:18px!important} } /* ── Index ───────────────────────────────────────────────────────────────── Every frame at once needs no year tabs and no page title; the years are rows of their own inside the sheet. */ .history-view[data-mode=contact] .history-years, .history-view[data-mode=contact] #history-title{display:none!important} .history-view[data-mode=contact] .history-modes{margin-left:auto} .history-contact .sheet-year{grid-column:1/-1;margin:22px 0 2px;font:13px/1 var(--font-display);color:var(--color-muted);letter-spacing:.02em} .history-contact .sheet-year:first-child{margin-top:0} /* ── Home mark ───────────────────────────────────────────────────────────── The mark rises out of its own line, as "Come in!" does beneath it. */ .home-center h1{overflow:hidden;padding-bottom:2px} /* Waits transparent, not pushed below its clip: pushed out of its own clip the mark never reported coming into view, the same trap as the clipped photographs. */ .rv-pending[data-reveal=mask]{opacity:0} /* ── Opening ─────────────────────────────────────────────────────────────── Paper with the mark in two halves on it, and the photographs stacked above the paper so they can fly on down into the ribbon after it has lifted away. */ .opening{position:fixed;inset:0;z-index:80;cursor:default} .opening__bg{position:absolute;inset:0;background:var(--color-paper);display:grid;place-items:center} .opening__logo{display:flex;flex-direction:column;align-items:center;translate:0 calc(var(--lift,0px) * -1)} /* Cut across at 104 of the mark's 428 units, in the gap between the name and DJDB. */ .opening__half{display:block;overflow:hidden;width:var(--L);height:calc(var(--L) * 104 / 982)} .opening__half.is-bottom{height:calc(var(--L) * 324 / 982)} .opening__half img{display:block;width:var(--L);max-width:none;height:auto;transform:translateY(115%)} .opening__half.is-bottom img{margin-top:calc(var(--L) * -104 / 982)} /* Each part carries only its own line. Both are the whole mark underneath, and as the lower part rose its box let the name through as well, so the name was seen twice. */ .opening__half.is-top img{clip-path:inset(0 0 75.7% 0)} .opening__half.is-bottom img{clip-path:inset(24.3% 0 0 0)} .opening__stack{position:absolute;inset:0;pointer-events:none} .opening__stack img{position:absolute;left:50%;top:50%;translate:-50% -50%;object-fit:cover;max-width:none; clip-path:inset(50% 50% 50% 50%);will-change:transform,clip-path} /* Held off the page until the paper is up, so Home is never seen before its opening. */ .intro-on #main,.intro-on .masthead{opacity:0} /* ── Featured, wide screen: the years beside the scale ─────────────────────── The year buttons left the top of the picture, where they sat over the photographs, and hang beside the scale instead, each level with its own mark; the mark keeps its hairline and gives up its two-digit label to them. The running year and the pause button swap corners: the year under the scale it belongs to, the pause bottom right. The scale is centred in the column that ends 24px above the foot. The nav is given a width: its buttons are all positioned, and a box 0px wide never reports coming into view, so its fade-in waited forever and the years never appeared. */ @media(min-width:901px){ #history[data-mode=featured] .history-years{left:calc(var(--gutter) + 22px);top:calc((100% - 24px) / 2); height:var(--scale-h);translate:0 -50%;transform:none;display:block;gap:0;width:64px} /* On a short window the scale gives way, so it never runs up into the title or down into the running year. */ #history[data-mode=featured]{--scale-h:min(64vh,calc(100vh - 320px))} #history[data-mode=featured] #history-timeline.scrubber{height:var(--scale-h)} #history[data-mode=featured] .history-years button{position:absolute;left:0;top:var(--at,0);translate:0 -50%; font-size:14px;min-height:28px;min-width:0;padding:0 4px;white-space:nowrap} #history[data-mode=featured] .scrubber .year-mark{font-size:0} #history[data-mode=featured] .history-current-year{left:var(--gutter);right:auto} #history[data-mode=featured] #history-pause{left:auto;right:var(--gutter);bottom:26px;position:fixed} } /* Hangul for the one Korean line on the site, the address under the map: only its 16 syllables, cut from Pretendard Variable (OFL), so it is 10KB instead of a megabyte. */ @font-face{font-family:'Pretendard';src:url('fonts/pretendard-ko-address.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+AC00-D7A3} /* ── About: the address in Korean, under the map ───────────────────────────── The only Korean on the page, so it is set in Pretendard, light and grey, as a note under the drawing rather than a line of the record. */ .map-address-ko{margin:12px 0 0;font:300 13px/1.5 'Pretendard','Apple SD Gothic Neo',sans-serif; letter-spacing:-.01em;color:var(--color-muted);word-break:keep-all} /* ── Phone, featured: fewer things at the top ─────────────────────────────── On a phone the year buttons shared the top of the screen with the modes, over the photograph passing under the header and half across the mark: a crowded, broken line. The scale on the left and the date under every photograph already say where you are, and the scale scrubs, so the buttons step aside here. Grid keeps them. */ @media(max-width:900px){ #history[data-mode=featured] .history-years{display:none} } /* ── The scale's lens (motion.js "The scale answers the pointer") ─────────── The ticks swell with transform only (a step right and a stretch from the left end), so their own width and opacity transitions are untouched; while the lens is on, the opacity is written frame by frame and its 500ms transition would only drag it. */ .scrubber .tick,.scrubber .scrub-cursor{transform-origin:0 50%} .scrubber.is-lensing .tick{transition:width 500ms var(--ease-out)} .scrub-dot{position:absolute;left:-12px;top:0;width:7px;height:7px;border-radius:50%; background:var(--color-accent);opacity:0;pointer-events:none;will-change:transform,opacity} @media(max-width:900px){.scrub-dot{left:-9px;width:6px;height:6px}} @media(prefers-reduced-motion:reduce){.scrub-dot{display:none}} /* ── Phone only (the wide layout is not touched) ──────────────────────────── The ribbon's frames on Home took their width from aspect-ratio alone; Safari on the iPhone does not give a