/* 
 * READABLE PRODUCTION STYLESHEET
 * Homepage and shared interface
 *
 * This cache-hashed file is generated for the server upload.
 * Make lasting edits in the matching readable CSS file under app/,
 * then rebuild the static export. Do not rename this generated file.
  */

/* ! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */

@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,::backdrop,:after,:before {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :host,:root {
    --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --spacing: .25rem;
    --ease-out: cubic-bezier(0,0,.2,1);
    --ease-in-out: cubic-bezier(.4,0,.2,1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *,::backdrop,:after,:before {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  :host,html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings,normal);
    font-variation-settings: var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b,strong {
    font-weight: bolder;
  }

  code,kbd,pre,samp {
    font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
    font-feature-settings: var(--default-mono-font-feature-settings,normal);
    font-variation-settings: var(--default-mono-font-variation-settings,normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  menu,ol,ul {
    list-style: none;
  }

  audio,canvas,embed,iframe,img,object,svg,video {
    vertical-align: middle;
    display: block;
  }

  img,video {
    max-width: 100%;
    height: auto;
  }

  button,input,optgroup,select,textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple],[size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color:color-mix(in lab,red,red)) {
      ::placeholder {
        color: color-mix(in oklab,currentcolor 50%,transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none!important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .\!relative {
    position: relative!important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .container {
    width: 100%;
  }

  @media (min-width:40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width:48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width:64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width:80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width:96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-30 {
    margin-top: calc(var(--spacing) * 30);
  }

  .mt-60 {
    margin-top: calc(var(--spacing) * 60);
  }

  .mt-70 {
    margin-top: calc(var(--spacing) * 70);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-15 {
    margin-bottom: calc(var(--spacing) * 15);
  }

  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }

  .mb-30 {
    margin-bottom: calc(var(--spacing) * 30);
  }

  .mb-60 {
    margin-bottom: calc(var(--spacing) * 60);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }

  .resize {
    resize: both;
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .bg-transparent {
    background-color: #0000;
  }

  .pt-50 {
    padding-top: calc(var(--spacing) * 50);
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-30 {
    padding-bottom: calc(var(--spacing) * 30);
  }

  .pb-50 {
    padding-bottom: calc(var(--spacing) * 50);
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
  }

  .blur,.filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }

  .transition {
    transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false;
}

@property --tw-brightness {
  syntax: "*";
  inherits: false;
}

@property --tw-contrast {
  syntax: "*";
  inherits: false;
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}

@property --tw-invert {
  syntax: "*";
  inherits: false;
}

@property --tw-opacity {
  syntax: "*";
  inherits: false;
}

@property --tw-saturate {
  syntax: "*";
  inherits: false;
}

@property --tw-sepia {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}

@property --tw-ease {
  syntax: "*";
  inherits: false;
}

/*  SECTION: Foundation and design tokens  */

:root {
  --ink: #eef0f2;
  --ink-soft: rgba(238,240,242,0.62);
  --ink-faint: rgba(238,240,242,0.34);
  --line: rgba(255,255,255,0.14);
  --night: #08090a;
  --night-raised: #111315;
  --silver: #cdd4dc;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/*  SECTION: Reset and document defaults  */

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: radial-gradient(circle at 78% -8%,rgba(119,146,169,.18),transparent 31rem),var(--night);
  color: var(--ink);
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a,button {
  color: inherit;
}

button {
  font: inherit;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

::selection {
  background: #dbe5ee;
  color: #0a0b0c;
}

:focus-visible {
  outline: 1px solid rgba(255,255,255,.9);
  outline-offset: 5px;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

/*  SECTION: Film grain texture  */

.grain {
  inset: 0;
  z-index: 1000;
  opacity: .19;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(circle at 15% 21%,rgba(255,255,255,.22) 0 .35px,transparent .55px),radial-gradient(circle at 82% 63%,rgba(255,255,255,.18) 0 .4px,transparent .6px),radial-gradient(circle at 42% 84%,rgba(0,0,0,.4) 0 .45px,transparent .7px);
  background-size: 5px 7px,7px 5px,6px 8px;
}

/*  SECTION: Persistent site header  */

.grain,.site-header {
  position: fixed;
  pointer-events: none;
}

.site-header {
  z-index: 100;
  top: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  height: 3.65rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: .45rem .55rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.05rem;
  background: rgba(13,15,17,.49);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),0 16px 50px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  opacity: 0;
  transform: translateY(calc(-100% - 1.5rem));
  transition: opacity .55s ease,transform .75s var(--ease-out);
}

.site-header.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.monogram {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: opacity .35s ease;
}

.monogram:hover {
  opacity: .88;
}

.monogram img {
  width: 1.95rem;
  height: 1.95rem;
  display: block;
  transition: opacity .35s ease,transform .45s var(--ease-out);
}

.monogram:hover img {
  opacity: .88;
  transform: scale(.96);
}

/*  SECTION: Desktop navigation and links  */

.desktop-nav {
  display: flex;
  gap: 2.3rem;
  align-items: center;
  font-size: .72rem;
  letter-spacing: .05em;
}

.desktop-nav a,.footer-bottom a,.footer-top a,.header-contact,.utility-links a {
  position: relative;
}

.desktop-nav a:after,.footer-bottom a:after,.footer-top>a:after,.header-contact:after,.utility-links a:after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 100%;
  bottom: -.28rem;
  background: currentColor;
  transition: right .45s var(--ease-out);
}

.desktop-nav a.is-active:after,.desktop-nav a:hover:after,.footer-bottom a:hover:after,.footer-top>a:hover:after,.header-contact:hover:after,.utility-links a:hover:after {
  right: 0;
}

.utility-links a {
  transition: color .3s ease;
}

.utility-links a:hover {
  color: #f0f2f3;
}

.header-contact {
  justify-self: end;
  margin-right: .65rem;
  font-size: .72rem;
  letter-spacing: .05em;
}

.menu-button {
  display: none;
}

.eyebrow {
  margin: 0;
  color: var(--ink-soft);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .17em;
  line-height: 1;
  text-transform: uppercase;
}

/*  SECTION: Homepage hero and entrance sequence  */

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8.8rem clamp(2rem,6vw,7.5rem) 6rem;
  overflow: hidden;
  background: #08090a;
}

.hero-media,.hero-media video,.hero-overlay,.hero-poster,.hero-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  z-index: 0;
  overflow: hidden;
}

.hero-poster {
  display: block;
}

.hero-media video,.hero-poster img {
  object-fit: cover;
  object-position: center center;
}

.hero-poster img {
  filter: saturate(.78) contrast(1.06);
}

.hero-media video {
  opacity: 0;
  filter: saturate(.8) contrast(1.07);
  transform: scale(1.012);
}

.hero-media video.is-ready {
  opacity: 1;
}

.hero-overlay {
  z-index: 1;
  background: rgba(0,0,0,.8);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(68rem,74vw);
}

.hero-copy>.eyebrow,.hero-cta,.hero-intro,.hero-name>span {
  opacity: 0;
  transform: translateY(.9rem);
  animation: hero-copy-reveal 1.05s var(--ease-out) both;
}

.hero-name>span:first-child {
  animation-delay: .16s;
}

.hero-name>span:last-child {
  animation-delay: .36s;
}

.hero-copy>.eyebrow {
  animation-delay: .7s;
}

.hero-intro {
  animation-delay: .86s;
}

.hero-cta {
  animation-name: hero-cta-shell-reveal;
  animation-delay: .955s;
}

@keyframes hero-copy-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-cta-shell-reveal {
  0% {
    opacity: 0;
    transform: translateY(.9rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy h1 {
  max-width: 9ch;
  margin: 1.7rem 0 2.2rem;
  color: rgba(245,247,248,.94);
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-size: clamp(4.8rem,9vw,10rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .78;
}

.hero-copy h1 span {
  display: block;
}

.hero-copy .serif-line {
  margin-left: .58em;
  color: rgba(248,249,249,.99);
}

.hero-intro {
  width: min(42rem,100%);
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(.9rem,1.1vw,1.05rem);
  line-height: 1.55;
}

.hero-intro:before {
  content: none;
}

.hero-cta {
  width: max-content;
  min-height: calc(3.45rem + 2px);
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 3rem;
  padding: .45rem 4.18rem .45rem 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(12,14,16,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17),0 14px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(17px) saturate(130%);
  -webkit-backdrop-filter: blur(17px) saturate(130%);
  color: rgba(255,255,255,.9);
  font-size: .68rem;
  letter-spacing: .04em;
  animation-duration: .18s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}

.hero-cta-label {
  display: block;
  color: transparent;
}

.hero-cta-label:after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  padding: .45rem 4.18rem .45rem 1.15rem;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  pointer-events: none;
  clip-path: inset(0 calc(100% - .48rem) 0 0);
  animation: hero-cta-label-reveal .88s cubic-bezier(.22,1,.36,1) .94s both;
  will-change: clip-path;
}

.hero-cta-disc {
  position: absolute;
  top: .45rem;
  left: .48rem;
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #101214;
  font-style: normal;
  z-index: 1;
  animation: hero-cta-disc-slide .88s cubic-bezier(.22,1,.36,1) .94s both;
  transition: background .3s ease;
  will-change: left;
}

.hero-cta-arrow {
  display: block;
  opacity: 0;
  animation: hero-cta-arrow-reveal .2s ease-out 1.181s both,hero-cta-nudge 1.65s ease-in-out 2.635s infinite;
}

@keyframes hero-cta-disc-slide {
  0% {
    left: .48rem;
  }

  to {
    left: calc(100% - 3.03rem);
  }
}

@keyframes hero-cta-label-reveal {
  0% {
    clip-path: inset(0 calc(100% - .48rem) 0 0);
  }

  to {
    clip-path: inset(0 3.03rem 0 0);
  }
}

@keyframes hero-cta-arrow-reveal {
  to {
    opacity: 1;
  }
}

@keyframes hero-cta-nudge {
  0%,to {
    transform: translateY(-.08rem);
  }

  50% {
    transform: translateY(.18rem);
  }
}

.hero-cta:hover .hero-cta-disc {
  background: #fff;
}

.hero-prism-wrap {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 50%;
  position: relative;
  justify-self: center;
  width: min(34vw,31rem);
  aspect-ratio: .76;
  perspective: 1100px;
}

.hero-prism {
  position: absolute;
  inset: 6% 3% 5% 8%;
  overflow: hidden;
  border-radius: 48% 48% 2.3rem 2.3rem/36% 36% 2.3rem 2.3rem;
  border: 1px solid rgba(255,255,255,.3);
  background: #1b1e20;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 -40px 70px rgba(0,0,0,.35),0 55px 100px rgba(0,0,0,.48);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-out);
}

.hero-prism img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(.82) contrast(1.06);
  transform: scale(1.09);
  transition: opacity 1.15s ease,transform 7s linear;
}

.hero-prism img.is-active {
  opacity: 1;
  transform: scale(1.01);
}

.prism-refraction {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--light-x) var(--light-y),rgba(255,255,255,.3),transparent 22%),linear-gradient(118deg,rgba(255,255,255,.24),transparent 21%,transparent 68%,rgba(180,220,255,.13));
  mix-blend-mode: screen;
  pointer-events: none;
}

.prism-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 1rem;
  background: rgba(7,8,9,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
}

.prism-caption span {
  font-size: .57rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.prism-caption strong {
  max-width: 12rem;
  text-align: right;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.prism-shadow {
  position: absolute;
  inset: 10% -6% -2% 13%;
  border-radius: 50% 50% 2.5rem 2.5rem;
  background: linear-gradient(135deg,rgba(152,182,211,.25),rgba(255,255,255,.025));
  border: 1px solid rgba(180,215,243,.13);
  filter: blur(.1px);
  transform: rotate(5deg) translateZ(-40px);
}

.prism-orbit {
  z-index: -1;
  inset: -2% -13% -1% 1%;
  border: 1px solid rgba(255,255,255,.12);
  transform: rotate(-11deg);
  pointer-events: none;
}

.prism-orbit,.prism-orbit:before {
  position: absolute;
  border-radius: 50%;
}

.prism-orbit:before {
  content: "";
  width: .4rem;
  height: .4rem;
  left: 8%;
  top: 24%;
  background: #e9edf0;
  box-shadow: 0 0 18px rgba(255,255,255,.55);
}

.prism-orbit span {
  position: absolute;
  padding: .25rem .5rem;
  background: var(--night);
  color: var(--ink-faint);
  font-size: .54rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.prism-orbit span:first-child {
  left: 5%;
  top: 64%;
}

.prism-orbit span:last-child {
  right: 4%;
  top: 28%;
}

.hero-controls {
  position: absolute;
  right: clamp(1.5rem,4.5vw,5.5rem);
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.hero-controls button {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: .58rem;
}

.hero-controls button span {
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(.35);
  transition: transform .5s var(--ease-out),color .5s ease;
}

.hero-controls button.is-active {
  color: var(--ink);
}

.hero-controls button.is-active span {
  transform: scaleX(1);
}

.scroll-cue {
  position: absolute;
  left: clamp(1.5rem,4.5vw,5.5rem);
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: var(--ink-soft);
  font-size: .63rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.scroll-cue i {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-style: normal;
  transition: transform .5s var(--ease-out),background .5s ease;
}

.scroll-cue:hover i {
  transform: translateY(.25rem);
  background: rgba(255,255,255,.08);
}

/*  SECTION: Selected Work browser and filters  */

.work-section {
  padding: 4rem clamp(1.5rem,4.5vw,5.5rem) 6rem;
  background: radial-gradient(circle at 9% 33%,rgba(110,133,155,.12),transparent 28rem),#0c0e10;
  border-top: 1px solid rgba(255,255,255,.08);
}

.work-stage {
  height: calc(100svh - 10rem);
  min-height: 38rem;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  scroll-margin-top: 0;
}

.work-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.2rem;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(8rem,.4fr) 1.3fr .6fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 5rem;
}

.profile-copy h2,.section-heading h2 {
  margin: 0;
  font-size: clamp(2.7rem,5.8vw,7rem);
  line-height: .93;
  letter-spacing: -.07em;
  font-weight: 430;
}

.profile-copy h2 em,.section-heading h2 em {
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-weight: 400;
  color: rgba(238,240,242,.62);
}

.section-heading>p:last-child {
  margin: 0;
  max-width: 22rem;
  color: var(--ink-soft);
  font-size: .87rem;
  line-height: 1.55;
}

.filter-bar-shell {
  min-width: 0;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-bar button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  gap: .3rem;
  padding: .72rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: .68rem;
  transition: color .35s ease,background .35s ease,border-color .35s ease;
}

.filter-bar button.is-active,.filter-bar button:hover {
  color: #101214;
  background: #e6eaed;
  border-color: #e6eaed;
}

.filter-bar sup {
  font-size: .47rem;
  position: relative;
  top: .12rem;
}

.work-browser {
  display: grid;
  grid-template-columns: minmax(0,1.28fr) minmax(22rem,.72fr);
  gap: clamp(2rem,4vw,5rem);
  align-items: start;
  min-height: 0;
  height: 100%;
}

/*  SECTION: Project previews  */

.project-visual {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--night-raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11),0 30px 90px rgba(0,0,0,.33);
  cursor: default;
  transition: box-shadow 1s ease;
}

.project-visual:focus-visible {
  outline: 1px solid rgba(255,255,255,.48);
  outline-offset: .35rem;
}

.project-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.42)),radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--project-accent) 42%,transparent),transparent 35%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.project-image-stack,.project-image-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-image-stack img {
  object-fit: cover;
  filter: saturate(.87) contrast(1.03);
}

.project-image-stack img.is-active {
  animation: project-image-in .75s var(--ease-out) both;
}

@keyframes project-image-in {
  0% {
    opacity: 0;
    transform: scale(1.045);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.visual-chrome {
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: .9rem;
  background: rgba(10,11,12,.23);
  backdrop-filter: blur(16px);
  color: rgba(255,255,255,.78);
  font-size: .57rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.view-project-button {
  position: absolute;
  z-index: 4;
  left: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .4rem .42rem .4rem 1.1rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(9,10,11,.35);
  color: #fff;
  backdrop-filter: blur(18px);
  cursor: pointer;
  font-size: .68rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.view-project-button i {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #111;
  font-style: normal;
  transition: transform .5s var(--ease-out);
}

.project-visual:focus-visible .view-project-button i,.view-project-button:hover i {
  transform: rotate(45deg);
}

.icon-arrow-ne {
  position: relative;
  display: block;
  width: .68rem;
  height: .68rem;
  border-top: 1px solid;
  border-right: 1px solid;
}

.icon-arrow-ne:after {
  content: "";
  position: absolute;
  top: -.5px;
  right: -.5px;
  width: .94rem;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.project-list-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow-x: hidden;
}

.project-list-panel:after,.project-list-panel:before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: clamp(9rem,24%,12rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.project-list-panel:before {
  top: 0;
  background: linear-gradient(180deg,#0c0e10 0,rgba(12,14,16,.82) 42%,transparent);
}

.project-list-panel:after {
  bottom: 0;
  background: linear-gradient(180deg,transparent 0,rgba(12,14,16,.82) 58%,#0c0e10);
}

.project-list-panel.has-above:before,.project-list-panel.has-below:after {
  opacity: 1;
}

.project-index {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  padding-right: .25rem;
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}

.project-index:focus-visible {
  outline: 1px solid rgba(255,255,255,.32);
  outline-offset: .35rem;
}

.project-index::-webkit-scrollbar {
  display: none;
}

.project-row {
  width: 100%;
  min-width: 0;
  min-height: 7rem;
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  grid-template-rows: 1fr auto;
  column-gap: 1rem;
  row-gap: .3rem;
  align-items: center;
  padding: 1.15rem .2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: padding .45s var(--ease-out),color .35s ease;
}

.project-row.is-active,.project-row:hover {
  padding-left: .75rem;
}

.project-number {
  grid-row: 1/span 2;
  color: var(--ink-faint);
  font-size: .56rem;
  align-self: start;
  padding-top: .45rem;
}

.project-name {
  align-self: end;
  font-size: clamp(1.35rem,2.1vw,2.25rem);
  letter-spacing: -.055em;
  line-height: 1.05;
}

.project-type {
  align-self: end;
  padding-left: .1rem;
  color: var(--ink-faint);
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-arrow {
  grid-column: 3;
  grid-row: 1/span 2;
  align-self: center;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  transform: rotate(0deg);
  transition: background .35s ease,color .35s ease,transform .5s var(--ease-out);
}

.project-row.is-active .project-arrow,.project-row:hover .project-arrow {
  color: #111;
  background: var(--ink);
  transform: rotate(45deg);
}

.mobile-back-top,.mobile-project-browser {
  display: none;
}

.manifesto {
  min-height: 82vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8rem 2rem;
  background: radial-gradient(circle at 50% 45%,rgba(169,190,209,.14),transparent 30rem),#08090a;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.manifesto:before {
  width: min(36rem,66vw);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 0 70px rgba(161,188,213,.06),0 0 100px rgba(104,136,164,.08);
}

.manifesto:after,.manifesto:before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.manifesto:after {
  width: min(29rem,53vw);
  background: radial-gradient(circle at 38% 30%,rgba(255,255,255,.16),rgba(118,148,175,.035) 36%,transparent 70%);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(3px);
}

.manifesto-word {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(7rem,22vw,26rem);
  font-weight: 500;
  letter-spacing: -.1em;
  color: rgba(255,255,255,.025);
  white-space: nowrap;
}

.manifesto>p {
  position: relative;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-size: clamp(2.8rem,6vw,7rem);
  font-style: italic;
  letter-spacing: -.055em;
  line-height: .9;
}

.manifesto>p span {
  display: block;
  color: rgba(238,240,242,.48);
}

.manifesto-meta {
  position: absolute;
  z-index: 3;
  left: clamp(1.5rem,4.5vw,5.5rem);
  right: clamp(1.5rem,4.5vw,5.5rem);
  bottom: 2.2rem;
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/*  SECTION: Profile  */

.profile-section {
  padding: clamp(6rem,8.33vw,10rem) clamp(1.5rem,4.5vw,5.5rem);
  background: #e6e4df;
  color: #101214;
}

.profile-inner {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(20rem,25rem) minmax(0,1fr);
  column-gap: clamp(4rem,4.5vw,5rem);
  row-gap: 2.3rem;
  align-items: start;
}

.profile-eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: rgba(16,18,20,.48);
}

.portrait-wrap {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  width: 100%;
  max-width: 25rem;
  height: auto;
  min-height: 0;
  aspect-ratio: 2/3;
}

.portrait-wrap>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: saturate(.8) contrast(1.03);
}

.profile-main {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.profile-copy h2 {
  max-width: none;
  font-size: clamp(2.7rem,5vw,6rem);
}

.profile-copy h2 em,.profile-copy h2>span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.profile-copy h2 em {
  color: rgba(16,18,20,.48);
}

.profile-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem,2vw,2rem);
  width: 100%;
  max-width: 60rem;
  margin-top: 4rem;
}

.profile-columns p {
  margin: 0;
  color: rgba(16,18,20,.68);
  font-size: .9rem;
  line-height: 1.7;
}

.profile-columns>div {
  display: grid;
  align-content: start;
  gap: 1.25rem;
}

.profile-columns a {
  color: rgba(16,18,20,.94);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.biography-break {
  display: none;
}

/*  SECTION: Responsive behavior  */

@media (min-width:1800px) {
  .biography-break--all-desktop,.biography-break--wide-desktop {
    display: inline;
  }
}

@media (min-width:1061px) and (max-width:1799px) {
  .biography-break--all-desktop,.biography-break--desktop {
    display: inline;
  }
}

@media (min-width:761px) and (max-width:1060px) {
  .biography-break--all-desktop,.biography-break--compact-desktop {
    display: inline;
  }
}

@media (max-width:760px) {
  .biography-break--mobile {
    display: inline;
  }
}

.profile-signature {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin-top: .2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(16,18,20,.18);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-signature a {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: rgba(16,18,20,.48);
  transition: color .3s ease;
}

.profile-signature a>i {
  display: grid;
  place-items: center;
  font-style: normal;
}

.profile-signature a .icon-arrow-ne {
  width: .52rem;
  height: .52rem;
}

.profile-signature a:hover {
  color: #101214;
}

.profile-section.is-reveal-ready .profile-columns p,.profile-section.is-reveal-ready .profile-copy h2,.profile-section.is-reveal-ready .profile-signature {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .9s ease,transform 1.05s var(--ease-out);
}

.profile-section.is-visible .profile-columns p,.profile-section.is-visible .profile-copy h2,.profile-section.is-visible .profile-signature {
  opacity: 1;
  transform: translateY(0);
}

.profile-section.is-visible .profile-copy h2 {
  transition-delay: .08s;
}

.profile-section.is-visible .profile-columns>div:first-child p:first-child {
  transition-delay: .22s;
}

.profile-section.is-visible .profile-columns>div:first-child p:nth-child(2) {
  transition-delay: .38s;
}

.profile-section.is-visible .profile-columns>div:first-child p:nth-child(3) {
  transition-delay: .54s;
}

.profile-section.is-visible .profile-columns>div:last-child p:first-child {
  transition-delay: .7s;
}

.profile-section.is-visible .profile-columns>div:last-child p:nth-child(2) {
  transition-delay: .86s;
}

.profile-section.is-visible .profile-columns>div:last-child p:nth-child(3) {
  transition-delay: 1.02s;
}

.profile-section.is-visible .profile-signature {
  transition-delay: 1.16s;
}

.contact-section {
  min-height: 90vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8rem 2rem;
  background: #0b0d0f;
}

.contact-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,rgba(115,144,170,.14),transparent 35rem);
}

.contact-orb {
  position: absolute;
  width: min(48vw,42rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 0 80px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.4);
  opacity: .48;
}

.contact-orb:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg,rgba(255,255,255,.3),transparent 31%,rgba(0,0,0,.42));
  backdrop-filter: blur(2px);
}

.contact-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.45) contrast(1.15);
  transform: scale(1.13);
}

.contact-copy {
  position: relative;
  z-index: 2;
  text-align: center;
}

.contact-copy h2 {
  margin: 1.6rem 0 2.6rem;
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-size: clamp(3.6rem,9vw,10rem);
  font-style: italic;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.07em;
}

.contact-copy a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .45rem .5rem .45rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
  font-size: .72rem;
}

.contact-copy a i {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #111;
  font-style: normal;
  transition: transform .5s var(--ease-out);
}

.contact-copy a:hover i {
  transform: rotate(45deg);
}

/*  SECTION: Footer  */

footer {
  padding: 3rem clamp(1.5rem,4.5vw,5.5rem) 2rem;
  background: #08090a;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-top {
  min-height: 4rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: start;
  border-bottom: 1px solid var(--line);
}

.footer-top p {
  margin: .4rem 0 0;
  color: rgba(240,242,243,.48);
  font-size: .63rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.footer-top>a:last-child {
  margin-top: .4rem;
}

.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: rgba(240,242,243,.48);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s ease;
}

.footer-back-top:after {
  content: none;
}

.footer-back-top:hover {
  color: #f0f2f3;
}

.footer-back-top i {
  position: relative;
  width: 1px;
  height: .75rem;
  display: block;
  background: currentColor;
}

.footer-back-top i:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: .4rem;
  height: .4rem;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: translateX(-50%) rotate(45deg);
}

.footer-bottom {
  padding-top: 1.25rem;
  color: rgba(240,242,243,.48);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-bottom,.utility-links {
  display: flex;
  justify-content: center;
}

.utility-links {
  flex-wrap: wrap;
  gap: 1.5rem;
}

/*  SECTION: Mobile menu  */

.mobile-menu {
  position: fixed;
  z-index: 300;
  inset: .75rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.3rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 1.4rem;
  background: rgba(12,14,16,.91);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 30px 100px rgba(0,0,0,.5);
  backdrop-filter: blur(28px) saturate(130%);
}

.mobile-menu-top {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mobile-menu-top button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
}

.mobile-menu nav {
  align-self: center;
  border-top: 1px solid var(--line);
}

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(3rem,14vw,5rem);
  letter-spacing: -.06em;
}

.mobile-menu nav a span {
  color: var(--ink-faint);
  font-size: .58rem;
  letter-spacing: .1em;
}

.mobile-menu-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--ink-faint);
  font-size: .64rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.mobile-menu-footer p {
  margin: 0;
  white-space: pre-line;
}

.mobile-menu-footer .utility-link-button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-left: auto;
  padding: .6rem 0 0;
  text-align: right;
  touch-action: manipulation;
}

@media (max-width:1060px) {
  .hero {
    grid-template-columns: minmax(0,1fr) minmax(20rem,.7fr);
    gap: 2rem;
  }

  .hero-prism-wrap {
    width: min(39vw,28rem);
  }

  .section-heading {
    grid-template-columns: 1fr 2fr;
  }

  .section-heading>p:last-child {
    grid-column: 2;
  }

  .work-browser {
    grid-template-columns: minmax(0,1.1fr) minmax(20rem,.9fr);
    gap: 2rem;
  }

  .project-visual {
    min-height: 30rem;
  }

  .profile-section {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .profile-inner {
    grid-template-columns: minmax(17rem,34vw) minmax(0,1fr);
    column-gap: 2.75rem;
  }

  .portrait-wrap {
    max-width: 100%;
  }

  .profile-columns {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width:760px) {
  .site-header {
    top: .65rem;
    left: .65rem;
    right: .65rem;
    height: 3.4rem;
    grid-template-columns: 1fr auto;
    border-radius: 1rem;
  }

  .monogram {
    width: 2.4rem;
    height: 2.4rem;
  }

  .monogram img {
    width: 1.82rem;
    height: 1.82rem;
  }

  .desktop-nav,.header-contact {
    display: none;
  }

  .menu-button {
    position: absolute;
    top: 50%;
    right: .45rem;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-content: center;
    gap: .32rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    background: rgba(255,255,255,.07);
    cursor: pointer;
    transform: translateY(-50%);
  }

  .menu-button span {
    display: block;
    width: .95rem;
    height: 1px;
    background: var(--ink);
  }

  .hero {
    min-height: 100svh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 7.2rem 1.05rem 6rem;
  }

  .hero-media video,.hero-poster img {
    object-position: 54% center;
  }

  .hero-overlay {
    background: rgba(0,0,0,.8);
  }

  .hero-copy {
    width: 100%;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-copy h1 {
    max-width: 100%;
    margin: 1.5rem 0 1.85rem;
    font-size: clamp(3.65rem,19vw,6.4rem);
    line-height: .79;
  }

  .hero-copy .serif-line {
    margin-left: 0;
  }

  .hero-intro {
    width: min(100%,30rem);
    font-size: .82rem;
  }

  .hero-cta {
    margin-top: 6.4rem;
  }

  .hero-prism-wrap {
    width: min(76vw,25rem);
    margin: 0 auto;
  }

  .prism-orbit {
    inset: -1% -8% -2% 1%;
  }

  .hero-controls {
    right: 1.1rem;
    bottom: 1.25rem;
  }

  .hero-controls button span {
    width: 1.1rem;
  }

  .scroll-cue {
    left: 1.1rem;
    bottom: 1rem;
  }

  .scroll-cue span {
    display: none;
  }

  .work-section {
    padding: 4.8rem 1rem 4.75rem;
  }

  .work-stage {
    height: auto;
    min-height: 0;
    display: block;
  }

  .work-heading {
    margin-bottom: 2.2rem;
  }

  .section-heading {
    display: block;
    margin-bottom: 3.5rem;
  }

  .profile-copy h2,.section-heading h2 {
    margin-top: 1.35rem;
    font-size: clamp(2.8rem,14vw,4.6rem);
  }

  .profile-copy h2 {
    font-size: clamp(2.4rem,12vw,3.4rem);
  }

  .section-heading>p:last-child {
    margin-top: 1.7rem;
    font-size: .82rem;
  }

  .filter-bar-shell {
    position: relative;
    margin-right: -1rem;
    margin-bottom: 1.2rem;
  }

  .filter-bar {
    margin-right: 0;
    margin-bottom: 0;
    padding-right: 1rem;
  }

  .filter-bar-shell:after,.filter-bar-shell:before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: clamp(2.5rem,12vw,3.4rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }

  .filter-bar-shell:before {
    left: 0;
    background: linear-gradient(90deg,#0c0e10 0,rgba(12,14,16,.88) 34%,transparent);
  }

  .filter-bar-shell:after {
    right: 0;
    background: linear-gradient(90deg,transparent 0,rgba(12,14,16,.88) 66%,#0c0e10);
  }

  .filter-bar-shell.has-left:before,.filter-bar-shell.has-right:after {
    opacity: 1;
  }

  .work-browser {
    display: none;
  }

  .mobile-project-browser {
    display: block;
    margin: 0 -1rem;
  }

  .mobile-project-track {
    display: flex;
    gap: .8rem;
    width: 100%;
    overflow-x: auto;
    padding: 0 1rem .9rem;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-project-track::-webkit-scrollbar {
    display: none;
  }

  .mobile-project-card {
    flex: 0 0 calc(100vw - 3.25rem);
    min-width: 0;
    scroll-snap-align: start;
  }

  .mobile-project-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.25rem;
    background: var(--night-raised);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  }

  .mobile-project-preview:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(5,6,7,.08),transparent 46%,rgba(5,6,7,.5));
    pointer-events: none;
  }

  .mobile-project-preview>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88) contrast(1.03);
  }

  .mobile-project-meta {
    position: absolute;
    z-index: 2;
    top: .75rem;
    left: .75rem;
    right: .75rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .78rem .85rem;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: .8rem;
    background: rgba(10,11,12,.24);
    color: rgba(255,255,255,.78);
    backdrop-filter: blur(15px);
    font-size: .52rem;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .mobile-project-preview .view-project-button {
    left: .85rem;
    bottom: .85rem;
  }

  .mobile-project-caption {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .5rem;
    align-items: start;
    min-height: 5rem;
    padding: 1.1rem .15rem .35rem;
    border-bottom: 1px solid var(--line);
  }

  .mobile-project-caption>span {
    padding-top: .38rem;
    color: var(--ink-faint);
    font-size: .55rem;
    font-variant-numeric: tabular-nums;
  }

  .mobile-project-caption h3 {
    margin: 0;
    font-size: clamp(1.65rem,8vw,2.25rem);
    font-weight: 430;
    letter-spacing: -.055em;
    line-height: 1;
  }

  .mobile-swipe-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 1rem 0 0;
    color: var(--ink-faint);
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .icon-arrow-east,.icon-arrow-west {
    position: relative;
    display: block;
    width: 1.35rem;
    height: 1px;
    background: currentColor;
  }

  .icon-arrow-east:after,.icon-arrow-west:after {
    content: "";
    position: absolute;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 1px solid;
    border-right: 1px solid;
  }

  .icon-arrow-east:after {
    right: 0;
    transform: rotate(45deg);
  }

  .icon-arrow-west:after {
    left: 0;
    transform: rotate(-135deg);
  }

  .manifesto {
    min-height: 70svh;
    padding: 6rem 1rem;
  }

  .manifesto:before {
    width: 82vw;
  }

  .manifesto:after {
    width: 65vw;
  }

  .manifesto>p {
    font-size: clamp(2.5rem,13vw,4.2rem);
  }

  .manifesto-meta {
    left: 1rem;
    right: 1rem;
    gap: .5rem;
    overflow: hidden;
    font-size: .5rem;
  }

  .profile-section {
    padding: 4.75rem 1.1rem 3rem;
  }

  .profile-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .portrait-wrap {
    display: none;
  }

  .profile-eyebrow {
    order: 1;
    margin: 0;
  }

  .profile-main {
    order: 2;
  }

  .profile-columns {
    margin-top: 2.5rem;
  }

  .profile-signature {
    order: 3;
    margin-top: 3rem;
  }

  .mobile-back-top {
    position: fixed;
    z-index: 250;
    right: .85rem;
    bottom: .85rem;
    width: 2.85rem;
    height: 2.85rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(12,14,16,.58);
    color: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 10px 34px rgba(0,0,0,.2);
    backdrop-filter: blur(18px) saturate(130%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(.65rem);
    transition: opacity .35s ease,transform .45s var(--ease-out);
  }

  .mobile-back-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .icon-arrow-up {
    position: relative;
    display: block;
    width: 1px;
    height: 1rem;
    background: currentColor;
  }

  .icon-arrow-up:after,.icon-arrow-up:before {
    content: "";
    position: absolute;
    top: 0;
    width: .48rem;
    height: 1px;
    background: currentColor;
  }

  .icon-arrow-up:before {
    right: 0;
    transform: rotate(-45deg);
    transform-origin: right center;
  }

  .icon-arrow-up:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: left center;
  }

  .contact-section {
    min-height: 75svh;
    padding: 6rem 1rem;
  }

  .contact-orb {
    width: 82vw;
  }

  .contact-copy h2 {
    font-size: clamp(3.7rem,19vw,6rem);
  }

  footer {
    padding: 1.5rem 1rem .75rem;
  }

  .footer-top {
    min-height: auto;
    align-items: flex-start;
    padding-bottom: 1.35rem;
  }

  .footer-top p {
    display: none;
  }

  .footer-top>a:last-child {
    margin: 0 0 0 auto;
    white-space: nowrap;
  }

  .footer-bottom {
    display: flex;
    justify-content: center;
    padding-top: .95rem;
    padding-bottom: .35rem;
  }

  .footer-bottom .utility-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: .15rem 1rem;
  }

  .footer-bottom .utility-links a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: .6rem .2rem;
    touch-action: manipulation;
  }
}

@media (max-width:380px) {
  .hero-copy h1 {
    font-size: 3.45rem;
  }

  .hero-prism-wrap {
    width: 72vw;
  }

  .mobile-project-card {
    flex-basis: calc(100vw - 2.8rem);
  }

  .project-type {
    max-width: 12rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,:after,:before {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    scroll-behavior: auto!important;
    transition-duration: .01ms!important;
  }

  .hero-prism {
    transform: none!important;
  }

  .hero-cta {
    transform: none;
  }

  .hero-cta,.hero-cta-label {
    opacity: 1;
    animation: none!important;
  }

  .hero-cta-label {
    clip-path: none;
  }

  .hero-cta-label:after {
    clip-path: none;
    animation: none!important;
  }

  .hero-cta-disc {
    left: calc(100% - 3.03rem);
    animation: none!important;
  }

  .hero-cta-arrow {
    opacity: 1;
    transform: none;
    animation: none!important;
  }
}

.utility-link-button {
  position: relative;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color .3s ease;
}

.utility-link-button:after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 100%;
  bottom: -.28rem;
  background: currentColor;
  transition: right .45s var(--ease-out);
}

.utility-link-button:focus-visible:after,.utility-link-button:hover:after {
  right: 0;
}

.utility-link-button:focus-visible,.utility-link-button:hover {
  color: #f0f2f3;
}

.analytics-consent {
  position: fixed;
  z-index: 1000;
  right: clamp(1rem,2.5vw,2rem);
  bottom: clamp(1rem,2.5vw,2rem);
  width: min(27rem,calc(100vw - 2rem));
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid rgba(8,9,10,.16);
  border-radius: 1rem;
  background: rgba(240,242,243,.97);
  color: #08090a;
  box-shadow: 0 .9rem 2.8rem rgba(0,0,0,.2);
}

.analytics-consent__copy {
  min-width: 0;
}

.analytics-consent h2 {
  margin: 0 0 .35rem;
  font-size: .86rem;
  font-weight: 520;
  letter-spacing: -.01em;
}

.analytics-consent__copy>p {
  margin: 0;
  font-size: .69rem;
  line-height: 1.45;
  opacity: .7;
}

.analytics-consent__actions {
  display: flex;
  gap: .45rem;
}

.analytics-consent__actions button {
  min-width: 4.65rem;
  padding: .56rem .72rem;
  border: 1px solid rgba(8,9,10,.26);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .55rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease,color .25s ease;
}

.analytics-consent--hover-ready .analytics-consent__actions button:hover,.analytics-consent__actions button:focus-visible {
  background: #08090a;
  color: #f0f2f3;
  outline: none;
}

@media (max-width:760px) {
  .case-footer-links .utility-link-button,.footer-bottom .utility-link-button {
    display: none;
  }

  .analytics-consent {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    grid-template-columns: 1fr;
    gap: .85rem;
    padding: .95rem;
  }

  .analytics-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .analytics-consent__actions button {
    width: 100%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .analytics-consent__actions button,.utility-link-button,.utility-link-button:after {
    transition: none;
  }
}