/* Generated from design/theme.css.in. Run npm run build. */
@import url("./tokens.css");
@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-regular.ttf') format('truetype'); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/manrope-medium.ttf') format('truetype'); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-semibold.ttf') format('truetype'); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: var(--weight-normal); }
.page { width: var(--page-width); min-height: 100svh; margin: auto; padding: var(--space-30) var(--space-48) var(--space-24); display: flex; flex-direction: column; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.skip { position: absolute; left: 24px; top: -100px; background: var(--paper); padding: var(--space-12); z-index: 5; }
.skip:focus { top: 12px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); min-height: 40px; margin-bottom: var(--space-62); }
.brand { font-size: var(--type-brand); letter-spacing: var(--tracking-brand); text-decoration: none; }
nav { display: flex; flex: 0 0 auto; margin-left: auto; gap: var(--space-28); font-size: var(--type-nav); line-height: var(--leading-nav); }
nav a { display: block; text-decoration: none; text-decoration-thickness: 1px; padding: var(--space-6) 0; }
nav a[aria-current='page'] { text-decoration: underline; }
nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
main { flex: 1; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: var(--space-34); font-size: var(--type-heading); font-weight: var(--weight-normal); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.home h1 { margin-bottom: var(--space-34); font-size: var(--type-home-heading); letter-spacing: var(--tracking-home-heading); line-height: var(--leading-display); }
.art { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.artwork { position: relative; width: 100%; aspect-ratio: var(--home-art-aspect); container-type: size; }
.artwork img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Small independent composited layers; no animated paths, filters or layout. */
.punch-block { position: absolute; width: .390625%; height: 2.55814%; background: var(--paper); opacity: var(--charge-dark); will-change: opacity; animation: emitter-charge var(--period) linear infinite; animation-delay: var(--phase); }
.electron { position: absolute; left: var(--electron-offset); top: var(--electron-offset); width: var(--electron-size); height: var(--electron-size); border-radius: 50%; background: var(--paper); box-shadow: 0 0 var(--electron-glow-blur) var(--electron-glow-spread) var(--electron-glow); opacity: 0; will-change: transform, opacity; animation-timing-function: linear; animation-iteration-count: infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
 .punch-block { animation: none; opacity: var(--reduced-opacity); will-change: auto; }
 .electron { display: none; animation: none; will-change: auto; }
}
.details { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-36); padding: var(--space-30) 0 var(--space-38); }
.intro { max-width: var(--intro-width); margin: 0; font-size: var(--type-intro); line-height: var(--leading-intro); letter-spacing: var(--tracking-intro); }
.details .contact { font-size: var(--type-contact-link); margin-top: var(--space-6); white-space: nowrap; }
footer { display: flex; justify-content: space-between; gap: var(--space-20); margin-top: var(--space-42); padding-top: var(--space-16); border-top: 1px solid var(--rule); font-size: var(--type-footer); line-height: var(--leading-footer); }
footer p { margin: 0; }
/* Fit Home and Contact to usable desktop viewports; smaller screens scroll. */
@media (min-width: 761px) and (min-height: 700px) {
 .page:is(.home, .contact) { height: 100svh; }
 .page:is(.home, .contact) .site-header { flex-shrink: 0; margin-bottom: var(--space-viewport-fit-gap); }
 .home main { min-height: 0; display: grid; grid-template-rows: auto minmax(var(--home-art-min-height), 1fr) auto; container-type: inline-size; }
 .home h1 { font-size: var(--type-home-heading-fit); margin-bottom: var(--space-viewport-fit-gap); }
 .home .art { display: grid; place-items: center; height: 100%; min-height: var(--home-art-min-height); max-height: calc(100cqw / (var(--home-art-aspect))); align-self: center; container-type: size; }
 .home .artwork { width: min(100cqw, calc(100cqh * var(--home-art-aspect))); }
 .home .details { padding: var(--space-viewport-fit-gap) 0 0; }
 .page:is(.home, .contact) footer { flex-shrink: 0; margin-top: var(--space-viewport-fit-gap); }
 .contact main { min-height: min-content; display: grid; grid-template-rows: auto minmax(min-content, 1fr); gap: var(--space-viewport-fit-gap); }
 .contact .contact-heading { margin-bottom: 0; }
 .contact .contact-heading h1 { font-size: var(--type-contact-heading-fit); }
 .contact .contact-name-line { font-size: var(--type-contact-name-fit); }
 .contact .star-sheet { display: grid; grid-template-rows: auto auto auto minmax(min-content, 1fr) auto; }
 .contact .star-sheet .property-row { padding: var(--space-contact-fit-row) var(--space-24); }
 .contact .star-sheet .property-row:nth-child(4) { min-height: 0; align-items: stretch; }
 .contact .star-sheet .property-row:nth-child(4) .study-field { min-height: 0; display: flex; flex-direction: column; }
 .contact .star-sheet .study-field input, .contact .star-sheet .study-field textarea { padding: var(--space-8) var(--space-12); }
 .contact .star-sheet .study-field textarea { flex: 1 1 auto; height: var(--contact-brief-min-height); min-height: var(--contact-brief-min-height); }
 .contact .star-sheet .study-actions { padding: var(--space-contact-fit-row) var(--space-24); }
 .contact .star-sheet .site-button { padding: var(--space-8) var(--space-20); }
}
/* Portfolio: quiet framing lets the product's own identity carry the colour. */
.portfolio h1 { font-size: var(--type-project-heading); letter-spacing: var(--tracking-project-heading); margin-bottom: var(--space-30); }
.project-intro { display: grid; grid-template-columns: var(--portfolio-intro-columns); gap: var(--space-48); align-items: center; margin-bottom: var(--space-38); }
.project-intro h2 { margin: 0; font-size: var(--type-project-title); font-weight: var(--weight-normal); letter-spacing: var(--tracking-project-title); line-height: var(--leading-display); }
.project-summary p { max-width: var(--project-copy-width); margin-bottom: var(--space-20); font-size: var(--type-project-copy); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.project-summary a { font-size: var(--type-project-link); }
.screen-choices { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-24); }
.screen-choices[hidden] { display: none; }
.screen-pair { display: grid; grid-template-columns: var(--portfolio-preview-columns); gap: var(--space-32); align-items: start; }
.portfolio figure { min-width: 0; margin: 0; }
.screenshot-link { display: block; overflow: hidden; border: 1px solid var(--control-ink); background: var(--control-paper); cursor: zoom-in; }
.screenshot-link img { display: block; width: 100%; height: auto; }
.screenshot-link:focus-visible { outline: 2px dashed var(--control-ink); outline-offset: 4px; }
.portfolio figcaption { margin-top: var(--space-12); font-size: var(--type-form-label); }
.project-looks { margin-top: var(--space-62); padding-top: var(--space-32); border-top: 1px solid var(--rule); }
.project-looks h3 { margin: 0 0 var(--space-24); font-size: var(--type-project-heading); font-weight: var(--weight-normal); letter-spacing: var(--tracking-project-heading); }
.look-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-20); }
.portfolio-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-24); padding: var(--space-38) 0 var(--space-12); margin-top: var(--space-48); border-top: 1px solid var(--rule); }
.portfolio-contact h2 { margin: 0; font-size: var(--type-project-heading); font-weight: var(--weight-normal); letter-spacing: var(--tracking-project-heading); }
.portfolio-lightbox { width: min(var(--portfolio-modal-width), calc(100% - var(--space-48))); max-height: calc(100svh - var(--space-48)); padding: 0; border: 2px solid var(--control-ink); background: var(--control-paper); color: var(--control-ink); overflow: auto; overscroll-behavior: contain; }
.portfolio-lightbox::backdrop { background: var(--portfolio-backdrop); }
.preview-heading { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) var(--space-20); background: var(--control-paper); border-bottom: 1px solid var(--control-ink); }
.preview-heading h2 { margin: 0; font-size: var(--type-form); font-weight: var(--weight-normal); }
.preview-heading .site-button { min-width: 0; padding: var(--space-6) var(--space-12); }
.preview-image img { display: block; width: 100%; height: auto; }
.mobile-preview { width: min(var(--portfolio-modal-phone-width), calc(100% - var(--space-48))); }
/* Shared site action: Star's outlined idle state and inverse pressed state. */
.site-button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--button-min-width); padding: var(--space-12) var(--space-20); border: 2px solid var(--control-ink); border-radius: var(--button-radius); background: var(--control-paper); color: var(--control-ink); font: inherit; font-size: var(--type-form); line-height: var(--leading-intro); text-decoration: none; cursor: pointer; }
.site-button:active:not(:disabled), .site-button[aria-pressed='true'] { background: var(--control-ink); color: var(--control-paper); }
.site-button:focus-visible { outline: 2px dashed var(--control-ink); outline-offset: 4px; }
.site-button:disabled { opacity: .45; cursor: not-allowed; }
.site-button--accent { --control-paper: var(--action-green); --control-ink: var(--ink); }
.contact-heading { margin-bottom: var(--space-38); }
.contact-heading h1 { font-size: var(--type-study-heading); margin: 0; }
.contact-name-line { display: block; min-width: 0; height: calc(1em * var(--leading-contact-name)); margin-top: var(--space-8); font-size: var(--type-contact-name); line-height: var(--leading-contact-name); letter-spacing: var(--tracking-body); }
.contact-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translate3d(0, var(--space-6), 0); transition: opacity var(--greeting-duration) ease-out, transform var(--greeting-duration) ease-out; }
.contact-name.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
 .contact-name { transition: none; transform: none; }
}
/* Object properties: monochrome controls, square fields and inverse selections. */
.star-sheet { min-width: 0; border: 2px solid var(--control-ink); background: var(--control-paper); color: var(--control-ink); font-family: var(--font-body); }
.star-sheet .sheet-caption { position: relative; isolation: isolate; display: grid; place-items: center; padding: var(--space-12); border-bottom: 2px solid var(--control-ink); background: var(--ink); font-size: var(--type-form); }
.star-sheet .sheet-title { position: relative; padding: var(--space-6) var(--space-20); border: 1px solid var(--paper); background: var(--paper); color: var(--ink); }
.caption-punches { position: absolute; left: var(--space-12); right: var(--space-12); top: 50%; height: var(--caption-field-height); transform: translateY(-50%); overflow: hidden; background: url('./caption-grid.svg') repeat-x left center; opacity: var(--caption-punch-opacity); pointer-events: none; }
.caption-punch { position: absolute; width: calc(var(--caption-punch-width) * 1px); height: calc(var(--caption-punch-height) * 1px); background: var(--punch-ink); opacity: var(--charge-dark); animation: caption-charge var(--caption-period) linear infinite; will-change: opacity; }
.caption-punch[data-band='orange'] { --punch-ink: var(--orange); }
.caption-punch[data-band='pink'] { --punch-ink: var(--pink); }
.caption-punch[data-band='lime'] { --punch-ink: var(--lime); }
@media (prefers-reduced-motion: reduce) {
 .caption-punch { animation: none; opacity: var(--reduced-opacity); will-change: auto; }
}
.star-sheet .property-row { display: grid; grid-template-columns: var(--property-label-width) minmax(0, 1fr); align-items: start; gap: var(--space-24); padding: var(--space-24); border-bottom: 1px solid var(--control-rule); }
.star-sheet .property-label { padding-top: var(--space-28); font-size: var(--type-form); }
.star-sheet .property-row:nth-child(3) .property-label { padding-top: var(--space-12); }
.star-sheet .study-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); }
.star-sheet .study-field { display: grid; min-width: 0; gap: var(--space-8); font-size: var(--type-form-label); }
.star-sheet .study-field input, .star-sheet .study-field textarea { width: 100%; min-width: 0; padding: var(--space-12); border: 1px solid var(--control-ink); border-radius: 0; background: var(--control-paper); color: var(--control-ink); font: inherit; font-size: var(--type-form); line-height: var(--leading-intro); }
.star-sheet .study-field textarea { resize: vertical; }
.star-sheet .study-field input:focus-visible, .star-sheet .study-field textarea:focus-visible { outline: 2px solid var(--control-ink); outline-offset: 3px; }
.star-sheet .study-platforms { min-width: 0; margin: 0; padding: 0; border: 0; }
.star-sheet .study-platforms legend { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.star-sheet .study-platforms > div { display: inline-flex; flex-wrap: nowrap; gap: 0; }
.star-sheet .study-platforms label { position: relative; cursor: pointer; }
.star-sheet .study-platforms input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-sheet .study-platforms label span { display: block; min-width: var(--platform-choice-width); padding: var(--space-12) var(--space-20); border: 2px solid var(--control-ink); background: var(--control-paper); color: var(--control-ink); text-align: center; font-size: var(--type-form-label); }
.star-sheet .study-platforms label + label span { border-left: 0; }
.star-sheet .study-platforms input:checked + span, .star-sheet .study-platforms label:active span { border-color: var(--control-ink); background: var(--control-ink); color: var(--control-paper); }
.star-sheet .study-platforms input:focus-visible + span { position: relative; outline: 2px dashed var(--control-ink); outline-offset: 4px; z-index: 1; }
.star-sheet .study-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-20); padding: var(--space-24); }
.star-sheet .study-status { margin: 0; font-size: var(--type-form-label); }
.star-sheet .contact-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--verification-width); }
.contact-verification { min-width: 0; height: var(--verification-height); }
.contact-verification.is-compact { height: var(--verification-compact-height); }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.privacy-copy { max-width: var(--intro-width); font-size: var(--type-intro-phone); line-height: var(--leading-body); }
.privacy-copy h1 { font-size: var(--type-study-heading); }
@media (max-width: 760px) {
 .page { padding: var(--space-24) var(--space-24) var(--space-22); }
 .site-header { margin-bottom: var(--space-42); }
 nav { gap: var(--space-20); font-size: var(--type-nav-tablet); }
 .brand { font-size: var(--type-brand-tablet); }
 .home h1 { font-size: var(--type-home-heading-tablet); margin-bottom: var(--space-26); }
 .details { flex-direction: column; gap: var(--space-22); padding: var(--space-26) 0 var(--space-28); }
 .artwork { width: 150%; margin-left: -25%; }
 .project-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
 .project-intro h2 { font-size: var(--type-project-title-tablet); }
 .project-summary p { max-width: var(--project-copy-width-tablet); font-size: var(--type-project-copy-tablet); }
 .screen-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--portfolio-modal-phone-width); }
 .screen-pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
 .screen-mobile { width: min(var(--portfolio-phone-width), 100%); justify-self: center; }
 .look-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .project-looks { margin-top: var(--space-38); }
 .star-sheet .property-row { grid-template-columns: var(--property-label-width-tablet) minmax(0, 1fr); }
 .star-sheet .study-pair { grid-template-columns: minmax(0, 1fr); }
 .star-sheet .study-platforms > div { display: flex; max-width: calc(3 * var(--platform-choice-width)); }
 .star-sheet .study-platforms label { flex: 1; }
 .star-sheet .study-platforms label span { min-width: 0; padding: var(--space-12) var(--space-8); }
 .star-sheet .contact-actions { grid-template-columns: auto minmax(0, 1fr); }
 .contact-verification { grid-column: 1 / -1; }
 footer { margin-top: var(--space-32); }
}
@media (max-width: 440px) {
 .page { padding: var(--space-22) var(--space-20); }
 .star-sheet .property-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); padding: var(--space-20); }
 .star-sheet .property-label, .star-sheet .property-row:nth-child(3) .property-label { padding-top: 0; }
 .star-sheet .study-actions { padding: var(--space-20); }
 .site-header { gap: var(--space-16); }
 .brand { font-size: var(--type-brand-phone); }
 nav { gap: var(--space-15); font-size: var(--type-nav-phone); }
 h1 { font-size: var(--type-heading-phone); }
 .home h1 { font-size: var(--type-home-heading-phone); }
 .artwork { width: 200%; margin-left: -50%; }
 .intro { font-size: var(--type-intro-phone); }
 .portfolio h1 { font-size: var(--type-project-heading-phone); }
 .project-intro h2 { font-size: var(--type-project-title-phone); }
 .project-looks h3, .portfolio-contact h2 { font-size: var(--type-project-heading-phone); }
 .look-grid { gap: var(--space-16); }
 .portfolio-lightbox { width: calc(100% - var(--space-24)); max-height: calc(100svh - var(--space-24)); }
 .preview-heading { padding: var(--space-12); }
 .contact-heading h1 { font-size: var(--type-project-heading); }
 footer { flex-wrap: wrap; gap: var(--space-8) var(--space-20); }
}

@keyframes caption-charge {
 0% { opacity: var(--charge-full); animation-timing-function: ease-out; }
 2.542373% { opacity: var(--charge-dark); animation-timing-function: linear; }
 87.288136% { opacity: var(--charge-steady); animation-timing-function: var(--charge-easing); }
 99.800000% { opacity: var(--charge-ready); animation-timing-function: linear; }
 100% { opacity: var(--charge-full); }
}