@property --h1 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --h2 { syntax: '<number>'; inherits: true; initial-value: 0; }

:root{
  --step-0: 0.8125rem;
  --step-1: 0.9375rem;
  --step-2: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --step-3: clamp(2.4rem, 1.2rem + 5.4vw, 6.5rem);
  --edge: clamp(1.25rem, 4vw, 4rem);
  --slow: 1200ms cubic-bezier(.19,1,.22,1);
  --fade: 900ms cubic-bezier(.19,1,.22,1);
}

html[data-theme="light"]{
  color-scheme: light;
  --ground:#EDE5D8;
  --plane:#F6F1E7;
  --ink:#191310;
  --dim: color-mix(in oklab, var(--ink) 58%, transparent);
  --faint: color-mix(in oklab, var(--ink) 30%, transparent);
  --hair: color-mix(in oklab, var(--ink) 14%, transparent);
  --ha-l:.70; --ha-c:.215;
  --hb-l:.66; --hb-c:.200;
  --hc-l:.61; --hc-c:.160;
  --hd-l:.86; --hd-c:.090;
  --he-l:.92; --he-c:.050;
  --halo-op:1;
}
html[data-theme="dark"]{
  color-scheme: dark;
  --ground:#050505;
  --plane:#0A0908;
  --ink:#F4F2ED;
  --dim: color-mix(in oklab, var(--ink) 46%, transparent);
  --faint: color-mix(in oklab, var(--ink) 20%, transparent);
  --hair: color-mix(in oklab, var(--ink) 14%, transparent);
  --ha-l:.72; --ha-c:.190;
  --hb-l:.62; --hb-c:.170;
  --hc-l:.50; --hc-c:.130;
  --hd-l:.58; --hd-c:.140;
  --he-l:.40; --he-c:.100;
  --halo-op:.95;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:var(--step-1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  overflow-x:hidden;
  transition:background var(--fade), color var(--fade);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--ground)}

.label{
  font-size:var(--step-0);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ---------- the halo: the only mark ---------- */
.halo{
  position:absolute;
  inset:0;
  --h1:255; --h2:18;
  opacity:var(--halo-op);
  background:
    radial-gradient(58% 52% at 50% 48%,
      oklch(var(--ha-l) var(--ha-c) var(--h1) / .95) 0%,
      oklch(var(--hb-l) var(--hb-c) var(--h1) / .70) 24%,
      oklch(var(--hc-l) var(--hc-c) calc(var(--h1) + 18) / .35) 44%,
      transparent 68%),
    radial-gradient(78% 70% at 50% 50%,
      oklch(var(--hd-l) var(--hd-c) var(--h2) / .55) 0%,
      oklch(var(--he-l) var(--he-c) var(--h2) / .28) 40%,
      transparent 74%);
  animation: drift 44s linear infinite;
}
@keyframes drift{ from{ --h1:255; --h2:18 } to{ --h1:615; --h2:378 } }

/* ---------- masthead ---------- */
.masthead{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:var(--edge);
  z-index:10;
  pointer-events:none;
}
.masthead > *{pointer-events:auto}
.wordmark{font-size:var(--step-0);letter-spacing:.34em;font-weight:500}
.mast-right{display:flex;gap:clamp(1rem,3vw,2.5rem);align-items:baseline}

.light-switch{
  background:none;border:0;padding:0;
  font:inherit;cursor:pointer;
  font-size:var(--step-0);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  display:flex;align-items:center;gap:.55em;
  transition:color var(--fade);
}
.light-switch:hover{color:var(--ink)}
.light-switch:active{transform:scale(.97);transition:transform 100ms ease-out}
.light-switch::before{
  content:'';
  width:.6em;height:.6em;border-radius:50%;
  background:currentColor;
  transition:background var(--fade),box-shadow var(--fade);
}
html[data-theme="dark"] .light-switch::before{
  background:transparent;
  box-shadow:inset 0 0 0 1px currentColor;
}
.light-switch:focus-visible{outline:1px solid var(--faint);outline-offset:6px}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--edge);
  overflow:hidden;
  isolation:isolate;
}
.halo-field{
  position:absolute;
  inset:-14%;
  z-index:-1;
}
.halo-field .halo{
  filter:blur(clamp(48px,7vw,96px)) saturate(1.06);
  transform:scale(1.08);
}
.hero-foot{
  position:absolute;
  left:var(--edge);right:var(--edge);bottom:var(--edge);
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}

/* ---------- the statement ---------- */
.statement{
  position:relative;z-index:2;text-align:center;
  font-weight:400;
  font-size:clamp(1.75rem,1rem + 3.4vw,4.25rem);
  line-height:1.12;letter-spacing:-.025em;
  text-wrap:balance;
}
.cycle{display:inline-grid;vertical-align:baseline;text-align:center}
.word{
  grid-area:1/1;
  font-family:'Spectral',Georgia,serif;
  font-weight:300;font-style:italic;
  letter-spacing:-.01em;
  opacity:0;transform:translateY(.14em);
  transition:opacity 900ms cubic-bezier(.4,0,.2,1),transform 1400ms cubic-bezier(.19,1,.22,1);
}
.word.is-on{opacity:1;transform:none}
.creed{
  position:absolute;z-index:2;
  left:0;right:0;
  top:calc(50% + clamp(2.4rem,5.5vh,4rem));
  text-align:center;
  font-size:clamp(9.5px,.62vw,11.5px);
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);
}
.hero-line{
  font-family:'Spectral',Georgia,serif;
  font-weight:300;
  font-size:var(--step-2);
  line-height:1.32;
  max-width:24ch;
  text-wrap:balance;
}
.hero-line em{font-style:italic;color:var(--dim)}

/* ---------- sections ---------- */
section{padding:clamp(6rem,16vh,12rem) var(--edge)}
main > section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 70svh}
.rule{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--hair) 22%,var(--hair) 78%,transparent);
}
.section-head{
  display:flex;justify-content:space-between;gap:2rem;
  margin-bottom:clamp(2.5rem,7vh,5rem);flex-wrap:wrap;
}

/* ---------- index of work ---------- */
.index{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(2.5rem,6vw,5.5rem);
}
.piece{display:block;cursor:pointer}
.plate{
  position:relative;
  aspect-ratio:4/5;
  contain:paint;
}
.plate .halo{
  inset:-18%;
  filter:blur(clamp(30px,3.4vw,52px));
  transform:scale(.84);
  transition:transform 1.8s cubic-bezier(.19,1,.22,1),filter 1.8s cubic-bezier(.19,1,.22,1);
  animation-duration:90s;
}
.piece:hover .plate .halo,.piece:focus-visible .plate .halo{transform:scale(1);filter:blur(clamp(24px,2.8vw,40px))}
.piece:focus-visible{outline:1px solid var(--faint);outline-offset:8px}
.meta{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.9rem}
.client{font-size:var(--step-1);font-weight:500;letter-spacing:-.01em}
.halo--sun{
  animation:none;
  filter:blur(clamp(26px,3.4vw,52px));
  background:
    radial-gradient(56% 50% at 50% 47%,
      rgba(236,200,104,.96) 0%, rgba(236,200,104,.74) 26%,
      rgba(214,176,84,.40) 46%, transparent 70%),
    radial-gradient(82% 74% at 50% 50%,
      rgba(245,226,163,.46) 0%, rgba(236,200,104,.20) 42%, transparent 76%);
}
.marks{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.mark{
  grid-area:1/1;position:relative;opacity:0;
  visibility:hidden;
  contain:paint;
  transform:scale(.99);
  transition:opacity 3.6s cubic-bezier(.4,0,.2,1),transform 7s cubic-bezier(.19,1,.22,1);
}
.mark::before,.mark::after{
  content:'';position:absolute;inset:0;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.mark::before{filter:blur(clamp(26px,4vw,56px));transform:scale(1.1);opacity:.75}
.mark::after{filter:blur(clamp(9px,1.5vw,20px))}

/* Dusk: the mark is where the light gathers */
html[data-theme="dark"] .mark::before,
html[data-theme="dark"] .mark::after{
  background:radial-gradient(60% 66% at 46% 38%, #FBEFC8 0%, #EFD794 55%, #E4C776 100%);
  mix-blend-mode:screen;
}
html[data-theme="dark"] .mark.is-on{opacity:.42}

/* Daylight: the mark is where the pigment pools */
html[data-theme="light"] .mark::before,
html[data-theme="light"] .mark::after{
  background:radial-gradient(60% 66% at 46% 38%, #E8C266 0%, #D9AE4A 55%, #C49736 100%);
  mix-blend-mode:multiply;
}
html[data-theme="light"] .mark.is-on{opacity:.5}

.mark.is-on,.mark.is-out{visibility:visible}
.mark.is-on{transform:scale(1)}
.client a{position:relative}
.client a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 600ms cubic-bezier(.19,1,.22,1);
}
.client a:hover::after,.client a:focus-visible::after{transform:scaleX(1)}
.year{font-size:var(--step-0);color:var(--faint);font-variant-numeric:tabular-nums}
.discipline{
  position:relative;z-index:1;
  font-size:var(--step-0);color:var(--dim);padding-top:.15rem;
  opacity:0;transform:translateY(4px);
  transition:opacity var(--slow),transform var(--slow);
}
.piece:hover .discipline,.piece:focus-visible .discipline{opacity:1;transform:none}

/* ---------- practice ---------- */
.practice{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 clamp(2rem,5vw,4rem);
  max-width:74rem;
}
.practice div{border-top:1px solid var(--hair);padding:.85rem 0;font-size:var(--step-1)}
.practice div span{color:var(--faint);font-size:var(--step-0);display:block;margin-top:.1rem}

/* ---------- position ---------- */
.position{max-width:34rem;margin-left:auto}
.position p{color:var(--dim);margin-bottom:1.1rem}
.position p:first-child{color:var(--ink)}

/* ---------- the card ---------- */
.card{
  position:relative;
  min-height:88svh;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;overflow:hidden;isolation:isolate;
}
.card .halo{z-index:-1;inset:-20%;filter:blur(90px);opacity:calc(var(--halo-op) * .66);animation-duration:70s}
.card-name{
  font-family:'Spectral',Georgia,serif;
  font-weight:300;font-style:italic;
  font-size:var(--step-3);line-height:.98;
  letter-spacing:-.02em;margin-bottom:1.6rem;
}
.card-mail{font-size:var(--step-2);letter-spacing:-.01em;position:relative;padding-bottom:.2em}
.card-mail::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 700ms cubic-bezier(.19,1,.22,1);
}
.card-mail:hover::after,.card-mail:focus-visible::after{transform:scaleX(1)}
.card-foot{
  position:absolute;bottom:var(--edge);left:var(--edge);right:var(--edge);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(14px)}
.rise.in{opacity:1;transform:none;transition:opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1)}

@media (prefers-reduced-motion:reduce){
  .halo{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .mark,.word{transform:none!important;transition:opacity 400ms ease}
  .mark::before{filter:blur(clamp(26px,4vw,56px))}
}
@media (prefers-contrast:more){
  .mark.is-on{opacity:.72}
}