@layer reset, tokens, base, layout, components, pages, motion, utilities;  @font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/host-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/host-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: "Host Grotesk Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 104.3%; ascent-override: 97%; descent-override: 31%; line-gap-override: 0%; } @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } img { height: auto; } button, input, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ol, ul { list-style: none; } table { border-collapse: collapse; } } @layer tokens { :root {  --color-lime: #F2EFE8;  --color-plaster: #E6E0D3; --color-paper: #FBF9F4; --color-ink: #1D1E22; --color-muted: #5F5C56; --color-rule: #D3CBBB; --color-albero: #E3A33B;  --color-albero-deep: #835410;  --color-slate: #7D82A3;  --color-night: #171A2A; --color-night-2: #22263A;  --surface: var(--color-lime); --surface-alt: var(--color-plaster); --surface-dark: var(--color-night); --text: var(--color-ink); --text-muted: var(--color-muted); --on-dark: #EDEBE6; --on-dark-muted: rgba(237, 235, 230, .72); --sun: var(--color-albero); --sun-text: var(--color-albero-deep); --shadow: var(--color-slate); --night-dot: #8C92B8; --rule: var(--color-rule); --rule-dark: rgba(237, 235, 230, .2); --focus: var(--color-ink); --sun-hover: #EDB65A;  --data-blue: #5B8BD9;  --danger: #BF4B2B;  --field-border: #8C8475;  --photo-backdrop: #2B2A26;  --veg: #6F8A5B;  --veg-line: #48603D;  --mat-plaster: #EDE7DA;  --mat-timber: #C99A5B; --mat-glass: #CFE0F5; --mat-hatch: #A5623C;  --shadow-1: 0 1px 2px rgba(125, 130, 163, .18), 0 6px 16px -8px rgba(125, 130, 163, .30); --shadow-2: 0 2px 4px rgba(125, 130, 163, .20), 0 20px 40px -18px rgba(125, 130, 163, .38);  --font: "Host Grotesk", "Host Grotesk Fallback", "Helvetica Neue", Arial, sans-serif; --display: clamp(3.4rem, 11.2vw, 10rem);  --h1: clamp(2.75rem, 7.6vw, 7.5rem);  --h2: clamp(2.25rem, 5.4vw, 5.5rem);  --h3: clamp(1.375rem, 2vw, 1.875rem);  --lead: clamp(1.125rem, 1.35vw, 1.375rem);  --body: 1.0625rem;  --small: .9375rem;  --label: .8125rem;  --meta: .875rem;   --wrap: 1320px; --gutter: clamp(1.25rem, 4vw, 3rem); --section: clamp(5rem, 9vw, 9rem); --header-h: 4.25rem; --radius-s: 2px; --radius: .25rem; --radius-l: .5rem;  --ease: cubic-bezier(.2, .7, .1, 1); --d-hover: .4s; --d-appear: .7s; --d-reveal: .9s; } } @layer base { html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--surface); color: var(--text); font-family: var(--font); font-size: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: clip; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-s); } ::selection { background: var(--sun); color: var(--color-ink); } h1, h2, h3 { font-weight: 600; text-wrap: balance; } p { text-wrap: pretty; } code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: color-mix(in srgb, var(--rule) 45%, transparent); padding: .05em .3em; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @layer layout { .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--flush-top { padding-top: 0; } .section--alt { background: var(--surface-alt); } .section--dark { background: var(--surface-dark); color: var(--on-dark); --focus: var(--sun); --rule: var(--rule-dark); } .section__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section__head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: end; } .section__head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; } @media (max-width: 899px) { .section__head--split { grid-template-columns: 1fr; } } .section__title { font-size: var(--h2); line-height: .98; letter-spacing: -.035em; font-weight: 600; max-width: 14em; } .section__intro { font-size: var(--lead); line-height: 1.5; color: var(--text-muted); max-width: 36em; } .section--dark .section__intro { color: var(--on-dark-muted); } .section__foot { margin-top: clamp(2rem, 4vw, 3rem); } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .eyebrow a { text-decoration: underline; text-underline-offset: 3px; } .section--dark .eyebrow, .eyebrow--light { color: var(--on-dark-muted); } .source { margin-top: 2rem; font-size: var(--small); color: var(--text-muted); } .source a { text-decoration: underline; text-underline-offset: 3px; } .actions { display: flex; flex-wrap: wrap; gap: .75rem; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; } .split__text { display: grid; gap: 1.5rem; align-content: center; } .split__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } @media (max-width: 809px) { .split { grid-template-columns: 1fr; } .split__img { aspect-ratio: 4 / 3; } } .bleed { overflow: hidden; } .bleed__img { width: 100%; height: min(78svh, 56vw); min-height: 18rem; object-fit: cover; } } @layer components { .skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 300; background: var(--text); color: var(--surface); padding: .75rem 1rem; } .skip:focus { top: 1rem; }  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--radius); font-weight: 600; white-space: nowrap; transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease), transform .2s var(--ease); } .btn:active { transform: scale(.97); } .btn--solid { background: var(--color-ink); color: var(--color-paper); } .btn--solid:hover { box-shadow: inset 0 -4px 0 var(--sun); } .section--dark .btn--solid { background: var(--color-paper); color: var(--color-ink); } .btn--line { box-shadow: inset 0 0 0 1.5px currentColor; } .btn--line:hover { background: var(--text); color: var(--surface); box-shadow: none; } .btn--line-light { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); color: #fff; } .btn--line-light:hover { background: #fff; color: var(--color-ink); } .btn--sun { background: var(--sun); color: var(--color-ink); } .btn--sun:hover { background: var(--sun-hover); } .btn--sun:focus-visible { outline-color: var(--on-dark); } .btn--small { min-height: 2.5rem; padding-inline: 1.1rem; font-size: var(--small); } .btn--big { min-height: 3.5rem; padding-inline: 1.75rem; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn.is-loading { opacity: .7; cursor: progress; } .link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: transparent; transition: text-decoration-color var(--d-hover) var(--ease); } .link:hover { text-decoration-color: currentColor; } .link--big { font-size: var(--lead); } .arrow { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-hover) var(--ease); } a:hover > .arrow, a:hover .arrow { transform: translateX(4px); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; font-size: var(--small); font-weight: 500; box-shadow: inset 0 0 0 1px var(--rule); transition: background var(--d-hover), box-shadow var(--d-hover), color var(--d-hover); } .chip:hover { box-shadow: inset 0 0 0 1.5px var(--text); } .chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; } .chip--small { min-height: 2.1rem; font-size: var(--label); } .ticks { display: grid; gap: .7rem; } .ticks li { position: relative; padding-left: 1.6rem; } .ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; background: var(--sun); box-shadow: .18rem .18rem 0 var(--shadow); } .ticks--num { counter-reset: n; } .ticks--num li { counter-increment: n; padding-left: 2.2rem; } .ticks--num li::before { content: counter(n); width: auto; height: auto; top: 0; background: none; box-shadow: none; font-weight: 700; color: var(--sun-text); }  .site-header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--text); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); transition: transform .45s var(--ease), background .3s, color .3s, box-shadow .3s; } .site-header.is-hidden { transform: translateY(-100%); } .site-header--over:not(.is-solid) { background: transparent; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); color: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; --focus: var(--sun); } .site-header--over:not(.is-solid) .site-header__nav a, .site-header--over:not(.is-solid) .site-header__lang, .site-header--over:not(.is-solid) .site-header__live { color: rgba(255, 255, 255, .88); } .site-header--over:not(.is-solid) .site-header__cta { background: #fff; color: var(--color-ink); } .site-header--over:not(.is-solid) .brand__mark { stroke: #fff; } .site-header__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; white-space: nowrap; } .brand__mark { width: 1.6rem; height: 1.6rem; flex: none; fill: var(--color-paper); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .brand__mark .brand__shadow { fill: var(--shadow); stroke: none; } .site-header__nav { display: flex; gap: 1.4rem; margin-left: auto; font-size: var(--small); font-weight: 500; } .site-header__nav a { color: var(--text-muted); transition: color var(--d-hover); padding-block: .5rem; } .site-header__nav a:hover, .site-header__nav a[aria-current="page"] { color: var(--text); } .site-header--over:not(.is-solid) .site-header__nav a:hover, .site-header--over:not(.is-solid) .site-header__nav a[aria-current="page"] { color: #fff; } .site-header__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: .55em; } .site-header__live { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--label); color: var(--text-muted); white-space: nowrap; } .site-header__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--live-sun, var(--sun)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live-sun, var(--sun)) 30%, transparent); flex: none; } .site-header__lang { display: flex; gap: .15rem; font-size: var(--small); color: var(--text-muted); } .site-header__lang a { padding: .5rem .35rem; } .site-header__lang a[aria-current="true"] { color: inherit; font-weight: 700; } .site-header--over:not(.is-solid) .site-header__lang a[aria-current="true"] { color: #fff; } .menu-button { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .25rem 0 .5rem; font-weight: 600; font-size: var(--small); } .menu-button i { position: relative; width: 1.4rem; height: 10px; } .menu-button i::before, .menu-button i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); } .menu-button i::before { top: 0; } .menu-button i::after { top: 8px; } .menu-open .menu-button i::before { top: 4px; transform: rotate(45deg); } .menu-open .menu-button i::after { top: 4px; transform: rotate(-45deg); } @media (max-width: 1279px) { .site-header__live { display: none; } }  .site-header--over:not(.is-solid) .site-header__live { display: none; } .site-header--quiet .site-header__live { display: none; } @media (max-width: 1023px) { .site-header__nav { display: none; } .site-header__lang { margin-left: auto; } .menu-button { display: inline-flex; } } @media (max-width: 599px) { .site-header__cta { display: none; } .site-header__bar { gap: .75rem; } } .menu-open .site-header { background: var(--color-night); color: var(--on-dark); box-shadow: none; --focus: var(--sun); } .menu-open .site-header .site-header__lang { color: var(--on-dark-muted); } .menu { position: fixed; inset: 0; z-index: 90; background: var(--color-night); color: var(--on-dark); padding-top: calc(var(--header-h) + 1.5rem); overflow-y: auto; --focus: var(--sun); } .menu__inner { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; min-height: 100%; align-content: space-between; } .menu__list { display: grid; gap: .2rem; } .menu__list a { display: block; font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; padding-block: .1rem; } .menu__list a[aria-current="page"] { color: var(--sun); } .menu__foot { display: grid; gap: 1.25rem; justify-items: start; color: var(--on-dark-muted); font-size: var(--small); } .menu-open { overflow: hidden; }  .sunbadge { display: inline-flex; align-items: center; gap: .75rem; padding: .55rem 1rem .55rem .55rem; border-radius: var(--radius-l); background: rgba(20, 22, 34, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: var(--meta); line-height: 1.3; transition: background var(--d-hover); } .sunbadge:hover { background: rgba(20, 22, 34, .66); } .sunbadge__box { width: 2.6rem; height: 2.6rem; flex: none; color: #fff; } .sunbadge__text { display: grid; } .sunbadge__text b { font-size: var(--small); } .sunbadge__text span { color: rgba(255, 255, 255, .86); } .sunbadge--light { background: var(--color-paper); color: var(--text); box-shadow: inset 0 0 0 1px var(--rule); backdrop-filter: none; } .sunbadge--light .sunbadge__box { color: var(--color-ink); } .sunbadge--light .sunbadge__text span { color: var(--text-muted); } .sunbadge--light:hover { background: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--text); } .live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--live-sun, var(--sun)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live-sun, var(--sun)) 30%, transparent); }  .ticker { display: flex; overflow: hidden; border-bottom: 1px solid var(--rule); padding-block: clamp(1.1rem, 2.4vw, 1.75rem); } .ticker__track { display: flex; flex: none; gap: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(2.5rem, 5vw, 4.5rem); animation: ticker 38s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker li { display: inline-flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); font-size: clamp(1.375rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; color: var(--text-muted); white-space: nowrap; } .ticker li::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); } @keyframes ticker { to { transform: translateX(-100%); } }  .readout { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(1.25rem, 2.5vw, 2.25rem); row-gap: .25rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); } .readout div { display: grid; gap: .15rem; } .readout dt { font-size: var(--label); opacity: .8; } .readout__time dt { margin-bottom: .35rem; } .readout dd { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; } .readout__time { grid-column: 1 / -1; margin-bottom: .4rem; gap: .45rem !important; } .readout__time dd { font-size: clamp(3.25rem, 6.5vw, 5.75rem); line-height: 1.05; font-weight: 600; letter-spacing: -.05em; } .timeline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding-top: 1rem; color: var(--text-muted); transition: color .4s; font-size: var(--label); white-space: nowrap; } .timeline__track { position: relative; height: 2.25rem; margin-inline: .35rem; } .timeline__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; opacity: .5; } .timeline__tick { position: absolute; font-style: normal; top: calc(50% - 4px); width: 1px; height: 8px; background: currentColor; opacity: .6; } .timeline__tick--major { top: calc(50% - 7px); height: 14px; opacity: 1; } .timeline__tick--major::after { content: attr(data-h); position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: .75rem; } .timeline__now { position: absolute; top: calc(50% - 12px); width: 2px; height: 24px; margin-left: -1px; background: var(--text); } .timeline__now::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: inherit; } .timeline__sun { position: absolute; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sun) 30%, transparent); transition: background .3s, box-shadow .3s; } .timeline__sun.is-down { background: var(--night-dot); box-shadow: 0 0 0 5px color-mix(in srgb, var(--night-dot) 25%, transparent); } .sunstudy__note { font-size: var(--meta); } @media (max-width: 599px) { .sunstudy__note { font-size: var(--small); } }  .study__controls { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem clamp(1.5rem, 3vw, 3rem); align-items: end; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--color-paper); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .presets { display: flex; flex-wrap: wrap; gap: .5rem; } .preset { min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; font-size: var(--small); font-weight: 500; box-shadow: inset 0 0 0 1px var(--rule); transition: background var(--d-hover), box-shadow var(--d-hover); } .preset:hover { box-shadow: inset 0 0 0 1.5px var(--text); } .preset[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; } .slider { display: grid; gap: .6rem; } .slider__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font-size: var(--small); color: var(--text-muted); } .slider__label b { color: var(--text); font-weight: 600; } .slider input { width: 100%; height: 2rem; accent-color: var(--sun-text); cursor: pointer; } @media (max-width: 1099px) { .study__controls { grid-template-columns: 1fr 1fr; } .presets { grid-column: 1 / -1; } } @media (max-width: 639px) { .study__controls { grid-template-columns: 1fr; } } .study__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .study__fig { display: grid; gap: .9rem; } .study__fig figcaption { font-size: var(--small); color: var(--text-muted); } .plan, .path { width: 100%; height: auto; } .plan { background: var(--color-paper); border: 1px solid var(--rule); border-radius: var(--radius); aspect-ratio: 38 / 34; } .path { overflow: visible; aspect-ratio: 1; } .facts { border-top: 1.5px solid var(--text); } .facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--rule); } .facts dt { color: var(--text-muted); font-size: var(--small); } .facts dd { font-weight: 600; text-align: right; } .facts__hl dt { color: var(--text); font-weight: 500; display: flex; align-items: center; gap: .55rem; } .facts__hl dt::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--sun); flex: none; box-shadow: 0 0 0 1.5px var(--color-ink); } .facts__hl--blue dt::before { border-radius: var(--radius-s); background: var(--data-blue); } .facts__hl dd { font-size: 1.375rem; letter-spacing: -.02em; } .study__note { margin-top: 1.4rem; font-size: var(--small); line-height: 1.6; color: var(--text-muted); } @media (max-width: 1099px) { .study__grid { grid-template-columns: 1fr 1fr; } .study__data { grid-column: 1 / -1; } } @media (max-width: 639px) { .study__grid { grid-template-columns: 1fr; } .path { max-width: 22rem; justify-self: center; } } [data-sunstudy].is-static .sunstudy__static, [data-sunstudy]:not(.is-live) .sunstudy__static { display: block; width: 100%; height: auto; }  .acc { border-top: 1px solid var(--rule); } .acc:last-child { border-bottom: 1px solid var(--rule); } .acc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: 1.35rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.1875rem; letter-spacing: -.01em; } .acc__head::-webkit-details-marker { display: none; } .acc--service .acc__head { grid-template-columns: 2.5rem minmax(0, 1fr) auto; font-size: var(--h3); letter-spacing: -.02em; padding-block: 1.5rem; } .acc__n { font-size: var(--label); font-weight: 700; color: var(--sun-text); letter-spacing: .06em; } .acc__icon { position: relative; width: 1.25rem; height: 1.25rem; flex: none; } .acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: currentColor; transition: transform var(--d-hover) var(--ease); } .acc__icon::after { transform: rotate(90deg); } .acc[open] .acc__icon::after { transform: rotate(0deg); } .acc__head:hover .acc__q { color: var(--sun-text); } .section--dark .acc__head:hover .acc__q { color: var(--sun); } .acc__body { display: grid; gap: 1rem; justify-items: start; padding: 0 3rem 1.6rem 0; color: var(--text-muted); max-width: 44em; } .acc--service .acc__body { padding-left: 2.5rem; } @supports (interpolate-size: allow-keywords) { .acc { interpolate-size: allow-keywords; } .acc::details-content { height: 0; overflow: clip; transition: height var(--d-hover) var(--ease), content-visibility var(--d-hover) allow-discrete; } .acc[open]::details-content { height: auto; } }  .pcard__link { display: grid; gap: 1rem; } .pcard__media { overflow: hidden; border-radius: var(--radius); background: var(--surface-alt); } .pcard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); } .pcard__link:hover .pcard__img { transform: scale(1.03); } .pcard__meta { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 1rem; row-gap: .45rem; } .pcard__n { font-size: var(--label); font-weight: 700; color: var(--sun-text); } .pcard__title { font-size: var(--h3); line-height: 1.1; letter-spacing: -.02em; } .pcard__place { grid-column: 2; grid-row: 2; color: var(--text-muted); font-size: var(--small); } .pcard__year { grid-column: 3; grid-row: 1; color: var(--text-muted); font-size: var(--small); } .pcard__meta .arrow { grid-column: 4; grid-row: 1; align-self: center; }  .rows { border-top: 1.5px solid var(--text); } .row { border-bottom: 1px solid var(--rule); } .row__link { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 14rem) minmax(0, 11rem) 1.5rem; align-items: baseline; gap: 1rem 1.5rem; padding-block: 1.35rem; transition: padding var(--d-hover) var(--ease), background var(--d-hover); } .row__link:hover { padding-left: .75rem; } .row__link:not([href]) .arrow { visibility: hidden; }  .row__link:not([href]):hover { padding-left: 0; } .row__year { color: var(--text-muted); font-size: var(--small); } .row__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; } .row__outlet, .row__result { color: var(--text-muted); font-size: var(--small); } .row .arrow { align-self: center; } @media (max-width: 809px) { .row__link { grid-template-columns: 1fr auto; gap: .2rem 1rem; } .row__year { grid-row: 1; } .row__title { grid-column: 1; } .row__outlet, .row__result { grid-column: 1; } .row .arrow { grid-column: 2; grid-row: 1 / span 3; } } .cursor-preview { position: fixed; left: 0; top: 0; z-index: 80; width: clamp(14rem, 20vw, 20rem); pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); } .cursor-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); translate: 1.5rem -50%; scale: .92; transition: scale .35s var(--ease); box-shadow: var(--shadow-2); } .cursor-preview.is-on { opacity: 1; } .cursor-preview.is-on img { scale: 1; } .cursor-preview__label { position: absolute; left: 0; top: 0; translate: -50% -50%; padding: .45rem .8rem; border-radius: 999px; background: var(--sun); color: var(--color-ink); font-size: var(--label); font-weight: 700; }  .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .post-card__link { display: grid; gap: .8rem; } .post-card__media { overflow: hidden; border-radius: var(--radius); } .post-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); } .post-card__link:hover .post-card__img { transform: scale(1.03); } .post-card__meta { font-size: var(--meta); color: var(--text-muted); font-weight: 500; } .post-card__title { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.015em; } .post-card__link:hover .post-card__title { color: var(--sun-text); } .post-card__excerpt { color: var(--text-muted); font-size: var(--small); } @media (max-width: 899px) { .posts { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .posts { grid-template-columns: 1fr; } }  .fees { display: grid; } .fee { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr) minmax(0, 3fr); gap: 1rem 2rem; align-items: baseline; padding-block: 1.6rem; border-top: 1px solid var(--rule); } .fee:last-child { border-bottom: 1px solid var(--rule); } .fee__name { font-size: var(--h3); letter-spacing: -.02em; line-height: 1.15; } .section--dark .fee__name, .section--dark .fee__name .line, .section--dark .fee__name .line__in { color: var(--on-dark); } .fee__text { color: var(--on-dark-muted); } .fee__time { color: var(--on-dark-muted); font-size: var(--small); } .fee__price { font-size: var(--h3); font-weight: 600; color: var(--sun); text-align: right; letter-spacing: -.02em; } .fee--anchor { border-top: 2px solid var(--sun); } .fee__badge { display: inline-block; margin-left: .6rem; padding: .15em .6em; border-radius: 999px; background: var(--sun); color: var(--color-ink); font-size: var(--label); font-weight: 700; letter-spacing: .02em; vertical-align: middle; } @media (max-width: 899px) { .fee { grid-template-columns: 1fr auto; } .fee__text { grid-column: 1 / -1; grid-row: 2; } .fee__time { grid-row: 3; } .fee__price { grid-row: 1; grid-column: 2; } }  .form { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--color-night-2); border-radius: var(--radius-l); color: var(--on-dark); } .field { display: grid; gap: .45rem; font-size: var(--small); color: var(--on-dark-muted); border: 0; min-width: 0; } .field input:not([type="radio"]), .field textarea { width: 100%; min-height: 3.1rem; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid rgba(237, 235, 230, .32); background: transparent; color: var(--on-dark); font-size: 1rem; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; } .field.is-bad input, .field.is-bad textarea { border-color: var(--danger); } .field__error { display: none; font-size: var(--small); font-weight: 500; color: var(--danger); } .field--light .field__error, .form--light .field__error { color: var(--danger); } .field.is-bad .field__error { display: block; } .form__errorsummary { padding: .85rem 1.1rem; border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); font-size: var(--small); font-weight: 500; } .field legend { margin-bottom: .5rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 559px) { .field-row { grid-template-columns: 1fr; } } .choices { display: flex; flex-wrap: wrap; gap: .5rem; } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(237, 235, 230, .35); color: var(--on-dark); cursor: pointer; transition: background var(--d-hover), color var(--d-hover); } .choice input:checked + span { background: var(--sun); color: var(--color-ink); box-shadow: none; } .choice input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; } .choice input:checked + span::before { content: "\2713"; margin-right: .4rem; font-weight: 700; } .form .btn { margin-top: .4rem; white-space: normal; text-align: center; } .form-done { padding: 1rem 1.1rem; border-left: 3px solid var(--sun); background: rgba(227, 163, 59, .12); font-size: var(--small); } .form--light { background: var(--color-paper); color: var(--text); border: 1px solid var(--rule); --focus: var(--color-ink); } .form--light .field { color: var(--text-muted); } .form--light .field input:not([type="radio"]), .form--light .field textarea { border-color: var(--field-border); color: var(--text); background: var(--color-paper); } .form--light .field input:focus-visible, .form--light .field textarea:focus-visible { outline-color: var(--color-ink); } .form--light .choice span { box-shadow: inset 0 0 0 1px var(--field-border); color: var(--text); } .form--light .choice input:focus-visible + span { outline-color: var(--color-ink); } .field--light input { border-color: var(--field-border) !important; background: var(--color-paper) !important; color: var(--text) !important; } .compass { position: relative; width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text); flex: none; display: inline-block; } .compass::after { content: ""; position: absolute; left: calc(50% - 1px); top: 1px; width: 2px; height: calc(50% - 1px); background: var(--sun-text); transform-origin: 50% 100%; transform: rotate(var(--az, 0deg)); }  .cta-band__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; } .cta-band__title { font-size: var(--h2); line-height: .98; letter-spacing: -.035em; } .cta-band__side { display: grid; gap: 1.5rem; color: var(--on-dark-muted); font-size: var(--lead); } @media (max-width: 899px) { .cta-band__grid { grid-template-columns: 1fr; } }  .page-head { padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 8rem)); padding-bottom: clamp(3rem, 6vw, 5rem); } .page-head__grid { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); } .page-head__title { font-size: var(--h1); line-height: .95; letter-spacing: -.04em; max-width: 11em; } .page-head__intro { font-size: var(--lead); color: var(--text-muted); max-width: 38em; }  .site-footer { background: var(--surface); border-top: 1px solid var(--rule); overflow: hidden; } .site-footer__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); font-size: var(--small); color: var(--text-muted); } .site-footer__col { display: grid; gap: .9rem; align-content: start; } .site-footer__col--lead { gap: 1.5rem; justify-items: start; } .site-footer__say { font-size: var(--h3); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; color: var(--text); max-width: 14em; } .site-footer__h { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .site-footer__links { display: grid; gap: .35rem; } .site-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .site-footer__live { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--meta); } .site-footer__social { display: flex; gap: 1rem; font-weight: 600; color: var(--text); } .site-footer__social a { display: inline-flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; } .mini-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; } .mini-form .field input { min-height: 3.25rem; } .mini-form .form-done { grid-column: 1 / -1; color: var(--text); } .site-footer__mark { --cast-x: .05em; --cast-y: .04em; font-size: 13.6vw; line-height: .9; font-weight: 700; letter-spacing: -.055em; white-space: nowrap; text-align: center; color: var(--color-ink); padding: .04em 0 .16em; text-shadow: var(--cast-x) var(--cast-y) 0 var(--shadow); user-select: none; transition: text-shadow 1s var(--ease); } .site-footer__mark.is-night { text-shadow: none; color: var(--color-night-2); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--rule); font-size: var(--meta); color: var(--text-muted); } .site-footer__legalese { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } .site-footer__legal a { display: inline-block; padding-block: .35rem; } @media (max-width: 1023px) { .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .site-footer__top { grid-template-columns: 1fr; } } } @layer pages {  .hero { padding:0; height: 100svh; min-height: 40rem; max-height: 72rem; } .hero__frame { position: relative; height: 100%; border-radius:0; overflow: hidden; color: #fff; background: var(--photo-backdrop); --focus: var(--sun); } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18, 18, 24, .78) 0%, rgba(18, 18, 24, .48) 17%, rgba(18, 18, 24, 0) 38%), linear-gradient(to top, rgba(18, 18, 24, .9) 0%, rgba(18, 18, 24, .66) 40%, rgba(18, 18, 24, .12) 70%, rgba(18, 18, 24, 0) 82%); } .hero__inner { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--header-h) + 1rem); padding-bottom: clamp(1.25rem, 3vh, 2.25rem); padding-inline: calc(var(--gutter) - .75rem); max-width: none; } .hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .hero__kicker { font-size: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); padding-top: .8rem; } .hero__bottom { align-self: end; display: grid; gap: clamp(.9rem, 2vh, 1.5rem); } .hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.25rem 2rem; } .hero__lead { font-size: var(--lead); line-height: 1.4; max-width: 25em; color: rgba(255, 255, 255, .94); } .hero__title { font-size: var(--display); line-height: .92; letter-spacing: -.05em; font-weight: 600; padding-bottom: .16em; } .hero__title .line { padding-bottom: .3em; margin-bottom: -.3em; } .hero__base { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem 3rem; padding-top: clamp(1.25rem, 3vh, 2.25rem); border-top: 1px solid rgba(255, 255, 255, .32); } .hero__proof { display: grid; gap: .5rem; padding-bottom: .5em; font-size: var(--small); color: rgba(255, 255, 255, .92); } .hero__proof li { display: grid; grid-template-columns: 6.5rem auto; gap: 1rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .22); } .hero__proof li:first-child { border-top: 0; padding-top: 0; } .hero__proof b { color: color-mix(in srgb, var(--sun) 80%, #fff); font-weight: 700; }  @media (min-width: 900px) { .hero__title { white-space: nowrap; } } @media (max-width: 1199px) { .hero__base { flex-direction: column; align-items: stretch; } .hero__proof { display: flex; flex-wrap: wrap; gap: .4rem 2rem; } .hero__proof li { display: block; border: 0; padding: 0; } } @media (max-width: 899px) { .hero { padding:0; min-height: 36rem; } .hero__shade { background: linear-gradient(to bottom, rgba(18, 18, 24, .74) 0%, rgba(18, 18, 24, .3) 16%, rgba(18, 18, 24, 0) 30%), linear-gradient(to top, rgba(18, 18, 24, .9) 0%, rgba(18, 18, 24, .72) 48%, rgba(18, 18, 24, .25) 72%, rgba(18, 18, 24, 0) 88%); } .hero__inner { padding-inline: 1.75rem; } .hero__base { padding-top: 2rem; } .hero__title { margin-left: 0; font-size: clamp(3.2rem, 15vw, 7rem); line-height: .9; } .hero__proof { gap: .35rem 1.25rem; font-size: var(--meta); } .hero__kicker { display: none; } .hero__top { justify-content: flex-start; } } @media (max-width: 599px) { .hero__actions .btn { flex: 1 1 auto; } .hero__proof li:nth-child(2) { display: none; } }  .today { position: relative; --night: 0; --golden: 0; background: color-mix(in srgb, color-mix(in srgb, var(--surface) calc(100% - var(--golden) * 14%), var(--sun)) calc(100% - var(--night) * 100%), var(--color-night)); } .js .today { height: 260vh; } .today__stage { position: relative; min-height: 100svh; display: grid; padding-top: calc(var(--header-h) + 1rem); padding-bottom: clamp(1rem, 2.5vh, 1.75rem); overflow: hidden; } .js .today__stage { position: sticky; top: 0; height: 100svh; } .today__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "copy draw" "read draw" "time time"; column-gap: clamp(1.5rem, 4vw, 4rem); min-height: 0; height: 100%; } .today__live, .sunstudy-day { display: contents; } .today__copy { grid-area: copy; align-self: end; display: grid; gap: 1.1rem; justify-items: start; padding-bottom: 1.5rem; transition: color .4s; } .today__title { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1; letter-spacing: -.035em; } .today__lead { font-size: var(--lead); color: var(--text-muted); max-width: 26em; transition: color .4s; } .sunstudy-day__drawing, .today__live > .sunstudy__static { grid-area: draw; min-height: 0; display: grid; align-items: center; } .today__live > .sunstudy__static { width: 100%; height: 100%; object-fit: contain; } .sunstudy-day__axo { width: 100%; height: 100%; max-height: calc(100svh - var(--header-h) - 7rem); } .today .readout { grid-area: read; } .today .timeline { grid-area: time; } .today.is-dark { color: var(--on-dark); --focus: var(--sun); } .today.is-dark .today__lead, .today.is-dark .eyebrow { color: var(--on-dark-muted); } .today.is-dark .timeline { color: var(--on-dark-muted); } .today.is-dark .timeline__now { background: var(--on-dark); } .today.is-dark .btn--line:hover { background: var(--on-dark); color: var(--color-night); } .today--first .today__stage { padding-top: calc(var(--header-h) + 1rem); } @media (max-width: 899px) { .today__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "copy" "draw" "read" "time"; } .today__copy { gap: .6rem; padding-bottom: .5rem; } .today__copy .btn, .today__lead { display: none; } .today__title { font-size: clamp(1.625rem, 6.5vw, 2.25rem); } .sunstudy-day__axo { max-height: none; } .today .readout { grid-template-columns: auto repeat(3, auto); align-items: end; padding-top: .75rem; column-gap: 1rem; } .today .readout__time { grid-column: auto; margin: 0; } .today .readout__time dd { font-size: 2.25rem; } .today .readout dd { font-size: 1rem; } } @media (max-width: 899px) and (min-height: 760px) { .today__lead { display: block; } } @media (max-width: 479px) { .today .readout { grid-template-columns: repeat(3, auto); } .today .readout__time { grid-column: 1 / -1; margin-bottom: .7rem; } .today .readout__time dd { font-size: 2.75rem; } .timeline { gap: .6rem; } .timeline__track { margin-inline: .5rem; } .timeline__tick--major:not(.timeline__tick--key)::after { content: none; } }  .intro__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(1.5rem, 3vw, 3rem); } .intro__grid .eyebrow { align-self: start; padding-top: .6rem; } .intro__text { font-size: clamp(1.625rem, 3.3vw, 3.25rem); line-height: 1.12; letter-spacing: -.028em; font-weight: 500; } .figures { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); } .figure { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .75rem; padding-top: 1.5rem; border-top: 1.5px solid var(--text); } .figure dd { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; } .figure dt { font-size: var(--small); color: var(--text-muted); max-width: 16em; } .figures--small { grid-column: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; } .figures--small .figure dd { font-size: clamp(2rem, 3.4vw, 3rem); } @media (max-width: 899px) { .intro__grid { grid-template-columns: 1fr; } .figures { grid-column: auto; grid-template-columns: 1fr 1fr; } } @media (max-width: 479px) { .figures--small { grid-template-columns: 1fr 1fr; } }  .features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 2.5vw, 2.5rem); } .features .pcard { grid-column: span 6; } .features .pcard:nth-child(1) { grid-column: 1 / -1; } .features .pcard:nth-child(1) .pcard__media { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; } .features .pcard:nth-child(1) .pcard__img { aspect-ratio: auto; height: min(88svh, 58vw); } .features .pcard:nth-child(1) .pcard__title { font-size: var(--h2); letter-spacing: -.035em; line-height: 1; } .features .pcard:nth-child(2) { grid-column: 1 / span 7; } .features .pcard:nth-child(3) { grid-column: 9 / -1; align-self: end; } .features .pcard:nth-child(3) .pcard__img { aspect-ratio: 4 / 5; } .features .pcard:nth-child(4) { grid-column: 3 / span 8; } .features .pcard:nth-child(4) .pcard__img { aspect-ratio: 16 / 9; } @media (max-width: 809px) { .features .pcard:nth-child(n) { grid-column: 1 / -1; } .features .pcard:nth-child(1) .pcard__img { height: 70svh; } .features .pcard:nth-child(3) .pcard__img { aspect-ratio: 4 / 3; } }  .services-home__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .services-home__sticky { position: sticky; top: calc(var(--header-h) + 2rem); } .services-home__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } .services-home__list .section__title { margin-bottom: clamp(2rem, 4vw, 3rem); } @media (max-width: 899px) { .services-home__grid { grid-template-columns: 1fr; } .services-home__media { order: 2; } .services-home__img { aspect-ratio: 16 / 10; } }  .stepcards { display: grid; gap: 1.25rem; } .stepcard { position: sticky; top: calc(var(--header-h) + 1rem + var(--k) * 1.1rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(30rem, 64svh); background: var(--color-paper); border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden; } .stepcard__body { display: grid; align-content: space-between; gap: 1.25rem; padding: clamp(1.5rem, 3.5vw, 3rem); } .stepcard__n { font-size: var(--label); font-weight: 700; color: var(--sun-text); letter-spacing: .06em; } .stepcard__name { font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.035em; max-width: 12em; } .stepcard__text { color: var(--text-muted); max-width: 32em; font-size: var(--lead); } .stepcard__bar { position: relative; height: .6rem; background: color-mix(in srgb, var(--rule) 60%, transparent); border-radius: 2px; } .stepcard__bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--from) / 48 * 100%); width: max(.5rem, calc(var(--len) / 48 * 100%)); background: var(--sun); border-radius: 2px; } .stepcard__time { font-weight: 600; } .stepcard__media { position: relative; } .stepcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 809px) { .stepcard { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; } .stepcard__media { height: 14rem; order: -1; } }  .quotes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } .quote { display: grid; gap: 1.5rem; align-content: space-between; padding-top: 1.25rem; border-top: 1.5px solid var(--text); } .quote__text { font-size: 1.3125rem; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; } .quote__text p::before { content: "“"; color: var(--sun-text); } .quote__text p::after { content: "”"; color: var(--sun-text); } .quote__who { display: flex; align-items: center; gap: .9rem; font-size: var(--small); color: var(--text-muted); } .quote__who span { display: grid; gap: .1rem; } .quote__who b { color: var(--text); } .quote__img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; object-position: 50% 25%; flex: none; } @media (max-width: 899px) { .quotes__list { grid-template-columns: 1fr; } }  .faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(2rem, 6vw, 6rem); } .faq__head { display: grid; gap: 1.25rem; align-content: start; } @media (max-width: 899px) { .faq__grid { grid-template-columns: 1fr; } }  .contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .contact__copy { display: grid; gap: 1.5rem; } .contact__where { color: var(--on-dark-muted); font-size: var(--small); line-height: 1.8; } .contact__where a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }  .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .toolbar__status { color: var(--text-muted); font-size: var(--small); margin-right: auto; } .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 2.5vw, 2.5rem); } .work-grid .pcard:nth-child(even) { margin-top: clamp(0rem, 8vw, 8rem); } .work-grid .pcard[hidden] { display: none; } .rows--work .row[hidden] { display: none; } @media (max-width: 699px) { .work-grid { grid-template-columns: 1fr; } .work-grid .pcard:nth-child(even) { margin-top: 0; } }  .phero { position: relative; height: 92svh; min-height: 32rem; color: #fff; overflow: hidden; background: var(--photo-backdrop); --focus: var(--sun); } .phero__media, .phero__img { position: absolute; inset: 0; width: 100%; height: 100%; } .phero__img { object-fit: cover; } .phero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18, 18, 24, .5), rgba(18, 18, 24, 0) 25%), linear-gradient(to top, rgba(18, 18, 24, .82), rgba(18, 18, 24, .5) 45%, rgba(18, 18, 24, 0) 78%); } .phero__inner, .next__inner { padding-inline: max(var(--gutter), 1.6rem); } .phero__inner { position: relative; height: 100%; display: grid; align-content: end; gap: 1rem; padding-bottom: clamp(2rem, 5vw, 4rem); } .phero__title { font-size: var(--h1); line-height: 1; letter-spacing: -.045em; max-width: 12em; } .phero__place { font-size: var(--lead); color: rgba(255, 255, 255, .92); } .pintro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; } .pfacts { position: sticky; top: calc(var(--header-h) + 2rem); border-top: 1.5px solid var(--text); } .pfacts div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); } .pfacts dt { color: var(--text-muted); font-size: var(--small); } .pfacts dd { font-weight: 600; display: inline-flex; gap: .5rem; align-items: center; text-align: right; } .pintro__text { display: grid; gap: 2rem; } .pintro__lead { font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.18; letter-spacing: -.025em; font-weight: 500; } .prose { display: grid; gap: 1.2rem; font-size: 1.125rem; line-height: 1.65; max-width: 40em; color: color-mix(in srgb, var(--text) 88%, var(--surface)); } .prose h2 { font-size: var(--h3); line-height: 1.15; letter-spacing: -.02em; margin-top: 1.25rem; color: var(--text); } @media (max-width: 899px) { .pintro__grid { grid-template-columns: 1fr; } .pfacts { position: static; } } .gallery { padding-bottom: var(--section); } .gallery__list { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 2vw, 2rem); } .gshot { grid-column: span 6; display: grid; gap: .75rem; align-content: start; } .gshot__media { overflow: hidden; border-radius: var(--radius); } .gshot__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .gshot__cap { font-size: var(--small); color: var(--text-muted); } .gshot[data-layout="full"] { grid-column: 1 / -1; } .gshot[data-layout="full"] .gshot__media { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; } .gshot[data-layout="full"] .gshot__img { aspect-ratio: auto; height: min(90svh, 62vw); } .gshot[data-layout="full"] .gshot__cap { padding-left: 0; } .gshot[data-layout="wide"] { grid-column: 2 / span 10; } .gshot[data-layout="wide"] .gshot__img { aspect-ratio: 16 / 10; } .gshot[data-layout="half"]:nth-child(even) { margin-top: clamp(0rem, 7vw, 7rem); } @media (max-width: 699px) { .gshot:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } .gshot__img { aspect-ratio: 4 / 3; } } .drawings__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: start; } .solstices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1rem; } .solstice { display: grid; gap: .5rem; } .solstice svg { width: 100%; height: auto; background: var(--color-paper); border: 1px solid var(--rule); border-radius: var(--radius); } .solstice figcaption { font-size: var(--meta); color: var(--text-muted); } .solstice figcaption b { color: var(--text); } .drawings__path { display: grid; gap: .9rem; } .drawings__path figcaption { font-size: var(--small); color: var(--text-muted); } @media (max-width: 899px) { .drawings__grid { grid-template-columns: 1fr; } .drawings__path { max-width: 24rem; } } @media (max-width: 559px) { .solstices { grid-template-columns: 1fr 1fr; } } .pquote__inner { display: grid; gap: 2rem; justify-items: start; } .pquote__text { font-size: clamp(1.625rem, 3.2vw, 3rem); line-height: 1.15; letter-spacing: -.028em; font-weight: 500; max-width: 24em; } .pquote__text p::before { content: "“"; color: var(--sun-text); } .pquote__text p::after { content: "”"; color: var(--sun-text); } .credits-sec { border-top: 1px solid var(--rule); } .credits-sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(2rem, 6vw, 6rem); } .team-mini { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-bottom: 2rem; } .team-mini__item { display: flex; align-items: center; gap: .8rem; } .team-mini__item span { display: grid; font-size: var(--small); color: var(--text-muted); } .team-mini__item b { color: var(--text); } .team-mini__img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; } .credit-list { border-top: 1px solid var(--rule); } .credit-list div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--rule); } .credit-list dt { color: var(--text-muted); font-size: var(--small); } .credit-list dd { font-weight: 600; text-align: right; } @media (max-width: 899px) { .credits-sec__grid { grid-template-columns: 1fr; } } .next__link { position: relative; display: block; height: min(70svh, 44rem); color: #fff; overflow: hidden; background: var(--color-night); --focus: var(--sun); } .next__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform 1.2s var(--ease), opacity var(--d-hover); } .next__link:hover .next__img { transform: scale(1.03); opacity: .75; } .next__inner { position: relative; height: 100%; display: grid; align-content: end; justify-items: start; gap: 1rem; padding-bottom: clamp(2rem, 5vw, 4rem); } .next__title { font-size: var(--h1); line-height: 1; letter-spacing: -.045em; font-weight: 600; } .next__inner .arrow { width: 2.5rem; height: 2.5rem; }  .scale { position: relative; background: var(--color-paper); } .js .scale { height: 460vh; } .scale__stage { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2rem)); padding-bottom: clamp(1rem, 3vh, 2rem); overflow: hidden; } .js .scale__stage { position: sticky; top: 0; height: 100svh; } .scale__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: clamp(.75rem, 2vh, 1.25rem); } .scale__head .section__title { font-size: clamp(2rem, 4.4vw, 4rem); } .scale__ratio { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 650; letter-spacing: -.05em; line-height: .9; color: var(--sun-text); } .scale__frame { position: relative; min-height: 0; margin-inline: var(--gutter); border-block: 1px solid var(--rule); } .drawing { position: absolute; inset: 0; width: 100%; height: 100%; } .drawing .fg { fill: var(--fg, var(--color-ink)); } .drawing .paper { fill: var(--color-paper); } .drawing .sunfill { fill: var(--sun); } .drawing .patio { fill: color-mix(in srgb, var(--sun) 16%, var(--color-paper)); } .drawing .tree { fill: color-mix(in srgb, var(--veg) 30%, var(--color-paper)); stroke: var(--veg-line); stroke-width: 1; vector-effect: non-scaling-stroke; } .drawing .wall { fill: var(--color-ink); } .drawing .thin, .drawing .glass, .drawing .swing, .drawing .dim, .drawing .leader, .drawing .cut, .drawing .furn { vector-effect: non-scaling-stroke; } .drawing .thin { stroke: var(--color-ink); stroke-width: .8; fill: none; } .drawing .glass { stroke: var(--data-blue); stroke-width: 2; } .drawing .swing { fill: none; stroke: var(--color-ink); stroke-width: .8; stroke-dasharray: 4 3; } .drawing .furn { fill: none; stroke: var(--color-ink); stroke-width: 1; } .drawing .dim { stroke: var(--sun-text); stroke-width: 1; } .drawing .leader { stroke: var(--color-ink); stroke-width: .8; } .drawing .cut { stroke: var(--color-ink); stroke-width: 2.5; } .drawing .lbl-site { font: 600 2.6px var(--font); fill: var(--color-muted); letter-spacing: .04em; } .drawing .lbl-room { font: 600 .36px var(--font); fill: var(--color-muted); letter-spacing: .06em; } .drawing .lbl-dim { font: 600 .16px var(--font); fill: var(--sun-text); } .drawing .lbl-small { font: 600 .13px var(--font); fill: var(--color-muted); letter-spacing: .05em; } .drawing .lbl-det { font: 500 .027px var(--font); fill: var(--color-ink); } .drawing .lbl-det--b { font-weight: 700; letter-spacing: .06em; fill: var(--color-muted); } .drawing .ly { stroke: var(--color-ink); stroke-width: .0015; } .drawing .ly--plaster { fill: var(--mat-plaster); } .drawing .ly--brick { fill: url(#hb); } .drawing .ly--wool { fill: url(#hw); } .drawing .ly--render { fill: url(#hp); } .drawing .ly--timber { fill: var(--mat-timber); } .drawing .ly--glass { fill: var(--mat-glass); } .drawing .ly--iron { fill: var(--color-ink); } .drawing .hatch { stroke: var(--mat-hatch); stroke-width: .0018; fill: none; } .drawing .dot { fill: var(--color-muted); } @media (max-width: 599px) { .drawing .lbl-site { font-size: 4px; } .drawing .lbl-room { font-size: .52px; } .drawing .lbl-det { font-size: .036px; } } .scalebar { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; background: color-mix(in srgb, var(--color-paper) 88%, transparent); font-size: var(--label); font-weight: 600; } .scalebar__bar { display: block; height: .5rem; border: 1.5px solid var(--color-ink); border-top: 0; background: linear-gradient(90deg, var(--color-ink) 50%, transparent 50%) bottom / 100% 3px no-repeat; transition: width .15s; } .scale__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 2rem); padding-top: clamp(.9rem, 2.2vh, 1.5rem); } .scale__step { display: grid; gap: .35rem; text-align: left; font-size: var(--small); line-height: 1.45; color: var(--text-muted); padding-top: .8rem; border-top: 2px solid var(--rule); transition: border-color .3s, color .3s; } .scale__step b { color: var(--text); font-size: 1rem; } .scale__step.is-active { color: var(--text); border-color: var(--sun); } @media (max-width: 899px) { .scale__steps { grid-template-columns: 1fr; } .scale__steps li { display: none; } .scale__steps li:has(.is-active) { display: block; } .scale__step { min-height: 6.4em; } .scale__steps:not(:has(.is-active)) li { display: block; } }  .principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } .principle { display: grid; gap: .9rem; align-content: start; padding-top: 1.1rem; border-top: 1.5px solid var(--text); } .principle__n { font-size: var(--label); font-weight: 700; color: var(--sun-text); } .principle__name { font-size: var(--h3); line-height: 1.1; letter-spacing: -.02em; } .principle__text { color: var(--text-muted); } @media (max-width: 899px) { .principles { grid-template-columns: 1fr; } } .team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 4rem) clamp(1.25rem, 2.5vw, 2.5rem); } .person { display: grid; gap: .45rem; align-content: start; } .person__media { overflow: hidden; border-radius: var(--radius); margin-bottom: .6rem; } .person__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .person__name { font-size: 1.375rem; letter-spacing: -.015em; } .person__role { font-size: var(--small); color: var(--sun-text); font-weight: 600; } .person__bio { font-size: var(--small); color: var(--text-muted); max-width: 26em; } @media (max-width: 899px) { .team { grid-template-columns: 1fr 1fr; } } @media (max-width: 479px) { .team { grid-template-columns: 1fr; } }  .svcs { display: grid; gap: clamp(4rem, 8vw, 8rem); } .svc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; scroll-margin-top: calc(var(--header-h) + 2rem); } .svc:nth-child(even) .svc__media { order: 2; } .svc__media { overflow: hidden; border-radius: var(--radius); } .svc__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } .svc__body { display: grid; gap: 1.25rem; align-content: center; } .svc__n { font-size: var(--label); font-weight: 700; color: var(--sun-text); } .svc__name { font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -.035em; } .svc__price { font-size: var(--h3); font-weight: 600; letter-spacing: -.02em; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); } @media (max-width: 809px) { .svc { grid-template-columns: 1fr; } .svc:nth-child(even) .svc__media { order: 0; } }  .steps { display: grid; border-top: 1.5px solid var(--on-dark); } .step { display: grid; grid-template-columns: 2.5rem minmax(0, 3fr) minmax(0, 6fr) minmax(8rem, 2fr); align-items: center; gap: 1rem 1.5rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule-dark); } .step__n { font-weight: 700; color: var(--sun); } .step__name { font-weight: 600; font-size: 1.0625rem; } .step__bar { position: relative; height: .75rem; } .step__bar::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--rule-dark); } .step__bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--from) / 48 * 100%); width: max(.5rem, calc(var(--len) / 48 * 100%)); background: var(--sun); border-radius: 2px; transform-origin: left center; } .step__time { color: var(--on-dark-muted); font-size: var(--small); text-align: right; } @media (max-width: 809px) { .step { grid-template-columns: 2rem 1fr; } .step__bar { grid-column: 2; } .step__time { grid-column: 2; text-align: left; } }  .journal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); } .journal-list .post-card:first-child { grid-column: span 2; grid-row: span 2; } .journal-list .post-card:first-child .post-card__title { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -.03em; line-height: 1.05; } .journal-list .post-card:first-child .post-card__img { aspect-ratio: 16 / 11; } .journal-list .post-card[hidden] { display: none; } @media (max-width: 899px) { .journal-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .journal-list { grid-template-columns: 1fr; } .journal-list .post-card:first-child { grid-column: auto; grid-row: auto; } } .article__head { display: grid; gap: 1.5rem; padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); max-width: calc(62rem + var(--gutter) * 2); margin-inline: auto; } .article__title { font-size: clamp(2.5rem, 6.2vw, 6rem); line-height: .96; letter-spacing: -.04em; } .article__excerpt { font-size: var(--lead); color: var(--text-muted); max-width: 36em; } .article__meta { display: flex; align-items: center; gap: .8rem; font-size: var(--small); color: var(--text-muted); } .article__meta b { color: var(--text); } .article__by { display: flex; flex-wrap: wrap; gap: .1rem 1rem; } .article__by > * { white-space: nowrap; } .article__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; flex: none; } .bleed--post .bleed__img { height: min(80svh, 52vw); } .article__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 5rem) var(--section); align-items: start; } .prose--post { font-size: 1.1875rem; } .pull { margin-block: 1rem; padding-left: 1.5rem; border-left: 3px solid var(--sun); font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; color: var(--text); } .fact { padding: 1.25rem 0; border-block: 1.5px solid var(--text); font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); } .article__aside { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: .8rem; } .mini-project { display: grid; gap: .5rem; font-size: var(--small); color: var(--text-muted); } .mini-project img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); } .mini-project b { color: var(--text); font-size: 1.0625rem; } .mini-project:hover b { color: var(--sun-text); } @media (max-width: 899px) { .article__body { grid-template-columns: 1fr; } .article__aside { position: static; max-width: 22rem; } }  .roles { border-top: 1.5px solid var(--text); } .role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 5fr) auto; gap: .75rem 2rem; align-items: baseline; padding-block: 1.6rem; border-bottom: 1px solid var(--rule); } .role__name { font-size: var(--h3); letter-spacing: -.02em; line-height: 1.15; } .role__meta { font-size: var(--small); color: var(--sun-text); font-weight: 600; } .role__text { color: var(--text-muted); } @media (max-width: 899px) { .role { grid-template-columns: 1fr; } } .contact-page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; } .contact-page__info { display: grid; gap: 2rem; } .contact-page__map { display: grid; gap: .6rem; font-size: var(--small); color: var(--text-muted); } .map { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font); } .contact-page .facts dd a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 899px) { .contact-page { grid-template-columns: 1fr; } } .legal, .help { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; } .legal__nav { position: sticky; top: calc(var(--header-h) + 2rem); font-size: var(--small); } .legal__nav ul { display: grid; gap: .1rem; border-left: 1.5px solid var(--rule); } .legal__nav a { display: block; padding: .45rem 0 .45rem 1rem; color: var(--text-muted); } .legal__nav a:hover { color: var(--text); } .legal__sec { display: grid; gap: 1rem; padding-bottom: 2.5rem; scroll-margin-top: calc(var(--header-h) + 2rem); } .legal__h { font-size: var(--h3); letter-spacing: -.02em; } .help__body { min-width: 0; } .help__h3 { font-size: 1.1875rem; margin: 2rem 0 .75rem; } .code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; padding: 1.25rem; background: var(--color-night); color: var(--on-dark); border-radius: var(--radius); font-size: .875rem; line-height: 1.6; margin-top: 1.5rem; } .code code { background: none; padding: 0; } @media (max-width: 899px) { .legal, .help { grid-template-columns: 1fr; } .legal__nav { position: static; } }  .sg__h { margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem; font-size: var(--h3); letter-spacing: -.02em; scroll-margin-top: calc(var(--header-h) + 2rem); } .sg__h:first-child { margin-top: 0; } .sg__p { color: var(--text-muted); max-width: 44em; margin-bottom: 1.25rem; } .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.5rem; border-top: 1.5px solid var(--text); padding-top: 1.5rem; } .swatch { display: grid; gap: .2rem; font-size: var(--small); } .swatch__chip { height: 5.5rem; margin-bottom: .6rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); } .swatch__hex, .swatch__use { color: var(--text-muted); } .type-rows { border-top: 1.5px solid var(--text); } .type-row { display: grid; grid-template-columns: minmax(10rem, 3fr) 9fr; column-gap: 1.5rem; align-items: center; padding-block: 2.75rem; border-bottom: 1px solid var(--rule); overflow: hidden; } .type-row__meta { display: grid; gap: .15rem; font-size: var(--small); color: var(--text-muted); } .type-row__meta b { color: var(--text); font-size: var(--body); } .type-row__sample { min-width: 0; overflow-wrap: anywhere; } .type-display { font-size: var(--display); line-height: 1.08; letter-spacing: -.05em; font-weight: 600; } .type-h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -.04em; font-weight: 600; } .type-h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; } .type-h3 { font-size: var(--h3); letter-spacing: -.02em; font-weight: 600; } .type-lead { font-size: var(--lead); color: var(--text-muted); } .type-body { font-size: var(--body); } .type-small { font-size: var(--small); } .type-meta { font-size: var(--meta); } .type-label { font-size: var(--label); font-weight: 600; letter-spacing: .06em; } @media (max-width: 809px) { .type-row { grid-template-columns: 1fr; row-gap: .75rem; } .type-display { white-space: normal; } } .sg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sg__item { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface-alt); border-radius: var(--radius); } .sg__item--dark { background: var(--color-night); color: var(--on-dark); --focus: var(--sun); } .sg__label { font-size: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .sg__item--dark .sg__label { color: var(--on-dark-muted); } @media (max-width: 699px) { .sg__grid { grid-template-columns: 1fr; } } .table-wrap { position: relative; overflow-x: auto; border-top: 1.5px solid var(--text); } .sg__table { width: 100%; font-size: var(--small); } .sg__table th, .sg__table td { text-align: left; vertical-align: top; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--rule); } .sg__table thead th { color: var(--text-muted); font-weight: 600; } .sg__table td:first-child, .sg__table tbody th { font-weight: 600; white-space: nowrap; } .sg__demo { margin-top: 1.5rem; padding: 2rem; background: var(--surface-alt); border-radius: var(--radius); overflow: hidden; } .sg__demo-box { width: min(100%, 24rem); padding: 1.5rem; background: var(--color-paper); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .sg__demo-text { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; } .credits { border-top: 1.5px solid var(--text); } .credit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; column-gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--rule); } .credit__name { font-size: var(--body); overflow-wrap: anywhere; } .credit__detail { color: var(--text-muted); font-size: var(--small); } .credit__link { font-size: var(--small); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } @media (max-width: 809px) { .credit { grid-template-columns: 1fr auto; row-gap: .35rem; } .credit__detail { grid-column: 1 / -1; grid-row: 2; } }  .lost { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: calc(var(--header-h) + 2rem) 4rem; } .lost__copy { display: grid; gap: 1.75rem; justify-items: start; } .lost__code { font-size: clamp(5rem, 14vw, 11rem); line-height: 1; font-weight: 700; letter-spacing: -.06em; color: var(--rule); margin-bottom: .75rem; } .lost__title { font-size: var(--h2); line-height: 1; letter-spacing: -.035em; max-width: 14em; } .lost__text { font-size: var(--lead); color: var(--text-muted); } .lost__drawing { width: 100%; } @media (max-width: 809px) { .lost { grid-template-columns: 1fr; } .lost__drawing { order: -1; max-width: 26rem; } } } @layer motion {  .motion-ready [data-appear] { transition: opacity var(--d-appear) var(--ease), transform var(--d-appear) var(--ease), filter var(--d-appear) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); } .motion-ready [data-appear]:not(.is-in) { opacity: 0; transform: translateY(24px); filter: blur(6px); }  .motion-ready [data-lines]:not(.is-split) { visibility: hidden; } [data-lines] .line { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; } [data-lines] .line__in { display: block; transform: translateY(105%); transition: transform var(--d-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); } [data-lines].is-in .line__in { transform: none; }  .motion-ready [data-reveal] { transition: clip-path var(--d-reveal) var(--ease); } .motion-ready [data-reveal]:not(.is-in) { clip-path: inset(100% 0 0 0); } .motion-ready [data-reveal] img { transition: transform 1.3s var(--ease); } .motion-ready [data-reveal]:not(.is-in) img { transform: scale(1.08); }  .motion-ready .steps:not(.is-in) .step__bar i { transform: scaleX(0); } .step__bar i { transition: transform 1.1s var(--ease) calc(var(--from) * 20ms); }  .page-wipe { position: fixed; inset: 0; z-index: 400; background: var(--color-night); pointer-events: none; transform: translateY(-101%); transition: transform .6s var(--ease); } .page-wipe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.25rem; margin: -.625rem; border-radius: 50%; background: var(--sun); } .is-arriving .page-wipe { transform: none; transition: none; } .is-leaving .page-wipe { animation: wipe-in .42s var(--ease) forwards; } @keyframes wipe-in { from { transform: translateY(101%); } to { transform: none; } }  .demo-appear { animation: demo-appear var(--d-appear) var(--ease); } @keyframes demo-appear { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } } .demo-reveal { animation: demo-reveal var(--d-reveal) var(--ease); } @keyframes demo-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } } .demo-lines .sg__demo-text, .demo-page { animation: demo-lines var(--d-reveal) var(--ease); } @keyframes demo-lines { from { transform: translateY(110%); } } .demo-hover { animation: demo-hover 1.2s var(--ease); } @keyframes demo-hover { 50% { transform: scale(1.03); box-shadow: inset 0 -4px 0 var(--sun); } } .demo-sticky, .demo-cursor { animation: demo-appear .5s var(--ease); } } @layer utilities { [hidden] { display: none !important; }  .text-sun { color: var(--sun); }  .focal-40 { object-position: 50% 40%; } .focal-55 { object-position: 50% 55%; } .focal-60 { object-position: 50% 60%; }  .swatch__chip--lime { background: var(--color-lime); } .swatch__chip--plaster { background: var(--color-plaster); } .swatch__chip--paper { background: var(--color-paper); } .swatch__chip--ink { background: var(--color-ink); } .swatch__chip--muted { background: var(--color-muted); } .swatch__chip--albero { background: var(--color-albero); } .swatch__chip--albero-deep { background: var(--color-albero-deep); } .swatch__chip--slate { background: var(--color-slate); } .swatch__chip--night { background: var(--color-night); }  .no-motion .today, .no-motion .scale { height: auto; } .no-motion .today__stage, .no-motion .scale__stage { position: relative; height: auto; } .no-motion .today__stage { min-height: 100svh; } .no-motion .scale__frame { height: 70vh; } .no-motion .ticker__track { animation: none; flex-wrap: wrap; padding-inline: var(--gutter); row-gap: .5rem; } .no-motion .stepcard { position: relative; top: auto; } .no-motion .ticker { flex-wrap: wrap; } .no-motion .ticker > .ticker__track[aria-hidden] { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } }  .nos-list { display: grid; gap: .6rem; margin-top: 1rem; font-size: var(--lead); }  .js .work-grid:has(> template), .js .journal-list:has(> template) { min-height: 150vh; }