/* ========================================================================== khushin.com — base system A record, not a portfolio. Ruled paper, graphite, one ember for live data. Structure is a logbook: a narrow monospace rail carries dates and labels, a wide measure carries prose. The asymmetry is the layout, not decoration — nothing here is centered by default. ========================================================================== */ /* ---------- faces ---------- */ @font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-var.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-italic-var.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Fragment Mono'; src: url('/fonts/fragment-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- tokens ---------- */ :root { /* Deliberately neutral, and deliberately NOT Garden's parchment. This site is the umbrella, not the product; borrowing Garden's earth palette made it read as an extension of Garden. The page carries no colour of its own — the only colour anywhere is inside the product screenshots, which is what makes them land when they arrive. */ --paper: #f5f4f2; --paper-2: #eceae7; --paper-raise: #fbfbfa; --paper-deep: #e2e0dc; --ink: #16161a; --ink-2: #55565c; --ink-3: #8c8d93; --hairline: #dedcd8; --hairline-2: #c4c2bd; /* There is no accent hue. Emphasis is weight, scale and the italic; "live" is solid ink against hairline. A second colour would be one more thing the page is saying, and it does not need to say it. */ --ember: #16161a; /* Lifts are tokens rather than per-component @media blocks, so the whole palette has exactly two definitions (below) instead of five. */ --lift-flat: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -22px rgba(0, 0, 0, 0.22); --lift-device: 0 1px 2px rgba(23, 21, 15, 0.05), 0 12px 28px -14px rgba(23, 21, 15, 0.28); --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace; --rail: 11rem; --measure: 40rem; --gutter: clamp(1.25rem, 5vw, 4.5rem); --r: 3px; /* Two timing systems, kept separate on purpose: structural things move slowly and with weight, in-place things snap. */ --ease-structural: cubic-bezier(0.22, 0.61, 0.30, 1); --ease-inplace: cubic-bezier(0.34, 0.9, 0.36, 1); --t-structural: 720ms; --t-inplace: 180ms; } /* ---------- night ---------- Two ways in, and they are not the same thing: the OS preference is the default, and [data-theme] on is KP's explicit override written by the masthead switch. The override has to beat the media query in both directions, so light is a real state rather than "the absence of dark" — otherwise a viewer on a dark-set laptop can never choose paper. The token values are written twice, and that duplication is deliberate: CSS cannot share one declaration block between a media query and a selector, and the alternative — a wrapper class toggled by JS — would leave the page without dark mode until the script runs. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; } } :root[data-theme='dark'] { color-scheme: dark; } /* Not an inversion — a dark neutral ground the same screenshots sit on. */ :root[data-theme='dark'] { --paper: #121214; --paper-2: #1a1a1d; --paper-raise: #202024; --paper-deep: #0c0c0e; --ink: #eceae6; --ink-2: #9a9aa1; --ink-3: #6b6c73; --hairline: #2a2a2e; --hairline-2: #3a3a40; --ember: #eceae6; --lift-flat: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -22px rgba(0, 0, 0, 0.7); --lift-device: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 34px -16px rgba(0, 0, 0, 0.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --paper: #121214; --paper-2: #1a1a1d; --paper-raise: #202024; --paper-deep: #0c0c0e; --ink: #eceae6; --ink-2: #9a9aa1; --ink-3: #6b6c73; --hairline: #2a2a2e; --hairline-2: #3a3a40; --ember: #eceae6; --lift-flat: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -22px rgba(0, 0, 0, 0.7); --lift-device: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 34px -16px rgba(0, 0, 0, 0.7); } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* The masthead is sticky, so a deep link would otherwise drop its target underneath it. Every page has anchors — this belongs in base, not in one page's stylesheet. */ [id] { scroll-margin-top: 5rem; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.62; font-weight: 400; letter-spacing: -0.004em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } ::selection { background: var(--ember); color: var(--paper); } :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 1px; } /* ---------- type voices ---------- */ .display { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.021em; text-wrap: balance; } /* NORTH law 3: display type stays modest. h1 caps at 4.2rem, and it means it. */ .display--1 { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 4.2rem); } .display--2 { font-size: clamp(2rem, 1.2rem + 2.7vw, 3rem); } .display--3 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem); } .display em { font-style: italic; /* the one delicate hand in the system */ } .lede { font-size: clamp(1.14rem, 1rem + 0.6vw, 1.4rem); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.011em; text-wrap: pretty; } .prose p + p { margin-top: 1.15em; } .prose { text-wrap: pretty; } /* The mono label with a hairline lead-in. Used in the rail and above sections — this is what makes the page read as a logbook. */ .label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; font-feature-settings: 'tnum' 1; } .num { font-family: var(--serif); font-feature-settings: 'tnum' 1; letter-spacing: -0.02em; } .mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; } /* ---------- layout ---------- */ .sheet { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); } /* The rail/measure grid. Content is pinned to a left axis; the rail holds dates and labels. Deliberately not symmetric and never centered. */ .ruled { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .ruled > .rail { grid-column: 1; } .ruled > .body { grid-column: 2; max-width: var(--measure); } .ruled > .body--wide { grid-column: 2; max-width: none; } .ruled > .full { grid-column: 1 / -1; } @media (max-width: 800px) { .ruled { grid-template-columns: 1fr; gap: 0.75rem 0; } .ruled > .rail, .ruled > .body, .ruled > .body--wide { grid-column: 1; } .ruled > .body { max-width: none; } } /* Sections breathe unevenly on purpose — a tall section then a tight one. Uniform 96px padding everywhere is the third slop-tell. */ .band { padding-block: clamp(4rem, 9vw, 8rem); } .band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .band--tall { padding-block: clamp(6rem, 14vw, 12rem); } .band--ruled { border-top: 1px solid var(--hairline); } .rule { height: 1px; background: var(--hairline); border: 0; margin: 0; } /* ---------- links ---------- */ /* Not a slab button. A hairline that fills with ember on approach. */ .link { display: inline-flex; align-items: center; gap: 0.55em; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 500; box-shadow: inset 0 -1px 0 var(--hairline-2); transition: box-shadow var(--t-inplace) var(--ease-inplace), color var(--t-inplace) var(--ease-inplace); } .link:hover { box-shadow: inset 0 -2px 0 var(--ink); } .link .arrow { transition: transform var(--t-inplace) var(--ease-inplace); font-family: var(--mono); font-size: 0.85em; } .link:hover .arrow { transform: translateX(3px); } /* The single emphasised action on a page. Still not a pill — a ruled block that inverts. */ .action { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.78em 1.35em; min-height: 44px; text-decoration: none; font-weight: 500; font-size: 0.95rem; letter-spacing: -0.005em; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--r); transition: background var(--t-inplace) var(--ease-inplace), border-color var(--t-inplace) var(--ease-inplace), color var(--t-inplace) var(--ease-inplace); } /* --ember resolves to --ink by design (there is no accent), so the old "fill with ember" hover was a no-op — the button changed to the colour it already was. It inverts instead: the ruled block empties out and the ink moves from the ground to the type, which is a state change you can see. */ .action:hover, .action:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--ink); } .action .arrow { transition: transform var(--t-inplace) var(--ease-inplace); font-family: var(--mono); font-size: 0.85em; } .action:hover .arrow { transform: translateY(2px); } .action[href^='#slope']:hover .arrow { transform: translateY(3px); } .action--quiet { color: var(--ink); background: transparent; border-color: var(--hairline-2); } .action--quiet:hover, .action--quiet:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* ---------- masthead ---------- */ .masthead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t-inplace) var(--ease-inplace); } .masthead[data-stuck='true'] { border-bottom-color: var(--hairline); } .masthead__in { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 0.95rem; } /* The identity is "Khushin" and nothing longer. */ .wordmark { font-family: var(--serif); font-size: 1.32rem; letter-spacing: -0.017em; text-decoration: none; color: var(--ink); line-height: 1; } .masthead__end { display: flex; align-items: center; gap: 0.25rem; } /* ---------- the day/night switch ---------- Not a pill with a shadow. It is the same object the rest of the page is made of: a hairline track, ruled, with a solid-ink knob that slides. The two glyphs sit inside the track and the knob passes over them, so the control reads as one piece of paper rather than a widget dropped on top. It is a real