/* Rezki / carnet de développement. One visual system, no layered theme overrides. */
:root {
  --bg:#161814;
  --surface:#20231e;
  --ink:#eeeee3;
  --muted:#b1b5a8;
  --line:#41463a;
  --signal:#ff815c;
  --mint:#b8d1b6;
  --display:'Barlow Condensed','Impact','Arial Narrow',sans-serif;
  --body:'DM Sans',Arial,sans-serif;
  --mono:'DM Mono',monospace;
  --gutter:clamp(22px,4.6vw,88px);
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:400 16px/1.7 var(--body);
  overflow-x:clip
}

h1,h2,h3,h4,p,figure {
  margin:0
}

button,input,textarea {
  font:inherit
}

button,a,summary {
  -webkit-tap-highlight-color:transparent
}

button,summary {
  cursor:pointer
}

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

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

button {
  color:inherit
}

button,a,summary {
  touch-action:manipulation
}

input,textarea {
  min-width:0
}

::selection {
  background:var(--signal);
  color:var(--bg)
}

[hidden] {
  display:none!important
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid var(--signal);
  outline-offset:6px
}

#main:focus {
  outline:none
}

.mono,.eyebrow,.tech-line {
  font:400 11px/1.7 var(--mono);
  letter-spacing:.045em
}

.eyebrow {
  display:block;
  color:var(--signal)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  z-index:10001;
  top:12px;
  left:16px;
  transform:translateY(-150%);
  padding:12px 20px;
  background:var(--signal);
  color:var(--bg)
}

.skip-link:focus {
  transform:none
}

summary {
  list-style:none
}

summary::-webkit-details-marker {
  display:none
}

.masthead {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:32px;
  min-height:86px;
  padding:0 var(--gutter);
  background:var(--bg);
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  align-items:center;
  font:800 42px/1 var(--display);
  letter-spacing:-.045em;
  min-height:48px
}

.brand>span {
  font:400 42px/1 var(--body);
  color:var(--signal);
  margin-left:2px
}

.masthead-note {
  font-size:10px;
  line-height:1.4;
  color:var(--muted)
}

.masthead nav {
  display:flex;
  align-items:center;
  gap:35px;
  margin-left:auto
}

.masthead nav a {
  position:relative;
  display:inline-flex;
  gap:7px;
  align-items:center;
  min-height:48px;
  font-size:13px
}

.masthead nav a::after {
  position:absolute;
  bottom:6px;
  left:0;
  width:100%;
  height:2px;
  background:var(--signal);
  content:'';
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s
}

.masthead nav a:hover::after,.masthead nav a[aria-current]::after {
  transform:scaleX(1)
}

.masthead sup {
  font:10px var(--mono);
  color:var(--muted);
  align-self:center;
  margin-top:-9px
}

.hero {
  position:relative;
  padding:25px var(--gutter) 0;
  overflow:hidden;
  background-image:linear-gradient(90deg,transparent calc(50% - .5px),#34392e66 50%,transparent calc(50% + .5px))
}

.hero-top {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px
}

.hero-top>span:nth-child(2) {
  margin-left:auto;
  margin-right:18%
}

.hero-composition {
  position:relative;
  min-height:clamp(440px,39vw,660px);
  padding-top:49px
}

.hero-type {
  position:relative;
  z-index:2;
  pointer-events:none;
  width:76%
}

.hero-overline {
  font:11px var(--mono);
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--signal);
  margin-bottom:19px
}

.little-rule {
  display:block;
  width:24px;
  height:2px;
  background:var(--signal)
}

.hero h1 {
  font:800 clamp(126px,18.2vw,306px)/.76 var(--display);
  letter-spacing:-.025em
}

.hero h1>span {
  display:block;
  width:max-content;
  max-width:100%
}

.hero-surname {
  font-size:.765em;
  color:var(--mint);
  margin-top:9px;
  position:relative;
  z-index:3
}

/* React Bits / Decrypted Text: the untouched text keeps its width and semantics. */
.hero-name.decrypted-text {
  position:relative;
  pointer-events:auto;
}
.decrypt-layer {
  position:absolute;
  inset:0;
  display:flex;
  pointer-events:none;
  user-select:none;
}
.decrypt-glyph {
  display:block;
  flex:none;
  white-space:pre;
  overflow:hidden;
}
.decrypt-glyph.is-encrypted {
  color:var(--signal);
}
.decrypt-ink {
  display:inline-block;
  transform-origin:left center;
  letter-spacing:0;
}
.is-decrypting>.decrypt-original {
  opacity:0;
}
html[data-motion=paused] .decrypt-original {
  opacity:1;
}
html[data-motion=paused] .decrypt-layer {
  display:none;
}

.period {
  color:var(--signal)
}

.hero-exhibit {
  position:absolute;
  right:-6%;
  top:0;
  width:60%;
  height:108%;
  z-index:1
}

.construction-frame {
  position:absolute;
  inset:17% 14% 13% 16%;
  border:1px solid #67725960;
  transform:rotate(-8deg);
  border-radius:50%;
  pointer-events:none
}

.construction-frame::before {
  content:'';
  position:absolute;
  inset:14%;
  border:1px solid #67725945;
  border-radius:50%
}

.construction-frame span {
  position:absolute;
  font:17px var(--mono);
  color:#78896b
}

.construction-frame span:nth-child(1) {
  left:0;
  top:0
}

.construction-frame span:nth-child(2) {
  right:0;
  top:0
}

.construction-frame span:nth-child(3) {
  left:0;
  bottom:0
}

.construction-frame span:nth-child(4) {
  right:0;
  bottom:0
}

.object-label {
  position:absolute;
  right:17%;
  top:14%;
  font-size:9px;
  color:var(--muted)
}

.work-stamp {
  position:absolute;
  right:14%;
  bottom:6%;
  font:700 22px/.95 var(--display);
  padding:16px 19px;
  background:var(--signal);
  color:#1c2318;
  transform:rotate(8deg);
  letter-spacing:.01em;
  box-shadow:6px 6px 0 #0002;
  pointer-events:none
}

.work-stamp>span {
  display:block;
  font:8px var(--mono);
  margin-top:9px
}

.hero-bottom {
  display:grid;
  grid-template-columns:1.1fr .8fr .4fr;
  gap:40px;
  align-items:end;
  padding:35px 0 38px;
  position:relative;
  z-index:3
}

.hero-intro {
  font-size:clamp(21px,2.1vw,32px);
  line-height:1.25;
  letter-spacing:-.025em
}

.hero-intro>span {
  color:var(--muted);
  font-size:.68em;
  display:block;
  margin-top:9px
}

.hero-personal {
  max-width:360px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted)
}

.hero-personal .text-link {
  color:var(--ink);
  margin-top:18px
}

.hero-index {
  justify-self:end;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:9px
}

.index-arrow {
  font:60px/1 var(--body);
  color:var(--signal);
  transition:transform .3s
}

.hero-index:hover .index-arrow {
  transform:translateY(7px)
}

.hero-caption {
  border-top:1px solid var(--line);
  padding:15px 0;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:9px;
  gap:20px
}

.object-scene {
  position:relative;
  isolation:isolate;
  min-width:0
}

.object-float {
  position:relative;
  width:100%;
  height:100%
}

.object-poster {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none
}

.object-scene model-viewer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  --poster-color:transparent;
  cursor:grab;
  touch-action:pan-y
}

.object-scene model-viewer:active {
  cursor:grabbing
}

.object-scene model-viewer:focus-visible {
  outline:2px solid var(--signal);
  outline-offset:2px
}

.object-scene.is-3d model-viewer {
  opacity:1
}

.object-scene.is-3d .object-poster {
  visibility:hidden
}

.physics-scene {
  position:absolute;
  inset:11% -2% 2% -11%;
  transform:rotate(-9deg)
}

.tool-scene {
  position:absolute;
  inset:2% -9% 5% -8%
}

.pc-scene {
  width:100%;
  aspect-ratio:1.45
}

.model-status {
  font-size:12px;
  color:var(--muted)
}

.projects {
  padding:108px var(--gutter) 100px;
  border-top:1px solid var(--line)
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 7%;
  align-items:end;
  margin-bottom:46px
}

.section-heading>.eyebrow {
  grid-column:1/-1
}

.section-heading h2 {
  font:700 clamp(48px,6.3vw,102px)/.94 var(--display);
  letter-spacing:-.015em
}

.muted-display {
  color:var(--muted)
}

.section-heading>p {
  max-width:370px;
  justify-self:end;
  color:var(--muted);
  font-size:15px;
  padding-bottom:5px
}

.lua-project {
  background:#222b22;
  border:1px solid #4c594c;
  position:relative
}

.project-ribbon {
  padding:19px 27px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid #4c594c;
  color:var(--mint);
  font-size:10px
}

.lua-layout {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  min-height:560px
}

.lua-copy {
  padding:48px 0 40px 42px;
  position:relative;
  z-index:2;
  max-width:600px
}

.lua-copy h3 {
  font:800 clamp(68px,8.2vw,140px)/.84 var(--display);
  letter-spacing:-.015em
}

.lua-copy h3>span {
  color:var(--mint)
}

.project-deck {
  font-size:22px;
  line-height:1.4;
  letter-spacing:-.02em;
  margin:28px 0 12px
}

.lua-copy>p:not(.project-deck) {
  font-size:15px;
  color:#c0cbbd;
  max-width:395px
}

.project-tags {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:23px 0 6px;
  font-size:10px;
  color:var(--mint)
}

.lua-copy .project-details {
  max-width:410px
}

.lua-exhibit {
  position:relative;
  min-width:0;
  min-height:500px;
  overflow:hidden
}

.large-index {
  font:800 clamp(260px,29vw,480px)/1 var(--display);
  position:absolute;
  right:3%;
  top:5%;
  color:#b8d1b60a;
  -webkit-text-stroke:1px #b8d1b633;
  pointer-events:none
}

.exhibit-note {
  position:absolute;
  bottom:25px;
  left:12%;
  right:7%;
  display:flex;
  gap:20px;
  justify-content:space-between;
  color:#b9c5b1;
  font-size:8px;
  pointer-events:none
}

.exhibit-note span:last-child {
  max-width:180px
}

.lua-foot {
  border-top:1px solid #4c594c;
  padding:17px 42px;
  display:flex;
  gap:30px;
  justify-content:space-between;
  color:#b9c5b1;
  font-size:10px
}

.lua-foot>span:nth-child(even) {
  color:var(--signal)
}

.project-details {
  border-top:1px solid var(--line);
  margin-top:24px
}

.project-details>summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:58px;
  gap:24px;
  font-size:13px
}

.project-details>summary span {
  font:26px/1 var(--body);
  color:var(--signal);
  transition:transform .25s
}

.project-details[open]>summary span {
  transform:rotate(45deg)
}

.details-body {
  padding:0 0 25px
}

.details-body p {
  font-size:14px;
  color:var(--muted);
  margin-top:12px
}

.details-body .text-link {
  margin-top:18px
}

.text-link {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  gap:32px;
  font-size:14px;
  border-bottom:1px solid currentColor
}

.text-link>span {
  color:var(--signal);
  transition:transform .22s
}

.text-link:hover>span {
  transform:translate(3px,-3px)
}

.web-projects {
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:7%;
  align-items:start;
  margin-top:95px
}

.project-overline {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:16px 0;
  font-size:10px;
  color:var(--muted)
}

.web-copy h3 {
  font:700 clamp(34px,3.6vw,58px)/.98 var(--display);
  letter-spacing:-.01em
}

.web-copy>p:not(.tech-line) {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  margin-top:20px;
  max-width:430px
}

.tech-line {
  margin-top:20px;
  color:var(--signal);
  font-size:10px
}

.weather-project .web-copy {
  padding-top:29px
}

.film-project {
  padding-top:137px
}

.film-project .web-copy {
  padding:15px 0 30px
}

.weather-preview {
  padding:24px;
  background:#becbb8;
  color:#23352a;
  position:relative;
  overflow:hidden;
  border-radius:0 0 64px 0
}

.preview-top {
  display:flex;
  justify-content:space-between;
  font-size:9px
}

.city-demo {
  display:flex;
  margin-top:30px;
  border-bottom:1px solid #344c3c66
}

.city-demo input {
  background:transparent;
  border:0;
  padding:8px 0;
  color:inherit;
  flex:1;
  width:100%;
  font-size:18px
}

.city-demo button {
  background:transparent;
  border:0;
  color:inherit;
  min-width:48px;
  min-height:48px;
  font-size:26px
}

.weather-face {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:25px 0 35px;
  gap:15px
}

.weather-face>div:first-child {
  display:flex;
  flex-direction:column
}

.weather-place {
  font-size:13px;
  max-width:160px;
  overflow-wrap:anywhere
}

.weather-face strong {
  font:600 clamp(94px,11vw,170px)/1 var(--display);
  letter-spacing:-.07em;
  margin-left:-5px
}

.weather-face strong span {
  font-weight:400
}

.weather-condition {
  font-size:12px
}

.weather-orbit {
  position:relative;
  flex:1;
  height:180px;
  max-width:200px
}

.weather-sun {
  position:absolute;
  top:20px;
  left:15%;
  width:120px;
  height:120px;
  border:1px solid #3d5941;
  border-radius:50%;
  background:#e1e1b2;
  box-shadow:12px 12px 0 #a7b6a0
}

.weather-horizon {
  position:absolute;
  width:160%;
  height:40px;
  left:-15%;
  top:118px;
  border-top:1px solid #516b57;
  transform:rotate(-18deg);
  background:#becbb8a8
}

.forecast {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #344c3c66;
  padding-top:17px;
  font-size:10px;
  gap:12px
}

.forecast span {
  display:flex;
  flex-direction:column;
  gap:7px
}

.forecast b {
  font-weight:400;
  font-size:19px
}

.weather-preview figcaption {
  font:8px/1.6 var(--mono);
  margin-top:26px;
  letter-spacing:.02em;
  color:#344838
}

.film-preview {
  background:#252321;
  overflow:hidden
}

.film-toolbar {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #675745;
  border-bottom:1px solid #675745;
  padding:16px 20px;
  font-size:9px;
  color:#c9bca5
}

.film-reel {
  display:grid;
  grid-template-columns:1.1fr .85fr;
  gap:0;
  min-height:320px
}

.film-art {
  position:relative;
  background:#3b352f;
  overflow:hidden;
  min-height:320px
}

.film-planet {
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  background:#dc8e63;
  left:30%;
  top:8%;
  box-shadow:14px 9px 0 #171c1a
}

.film-horizon {
  position:absolute;
  inset:42% -40% -30%;
  border-radius:50%;
  border:1px solid #a8a691;
  background:repeating-linear-gradient(0deg,transparent 0 10px,#b3b99d35 10px 11px);
  transform:rotate(-20deg)
}

.film-title-art {
  position:absolute;
  left:18px;
  bottom:45px;
  font:700 63px/.85 var(--display);
  letter-spacing:-.01em;
  color:#f3e6c9
}

.film-art-note {
  position:absolute;
  left:18px;
  bottom:13px;
  font-size:7px;
  max-width:165px;
  color:#e3d9bc
}

.film-ticket {
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  border-left:1px dashed #675745;
  align-items:flex-start
}

.film-ticket>.mono {
  font-size:8px;
  color:#c9bca5
}

.film-ticket p {
  font-size:19px;
  line-height:1.35;
  margin:22px 0 36px;
  letter-spacing:-.02em
}

.favorite-button {
  min-height:48px;
  border:1px solid #a68865;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  text-align:left;
  font-size:11px;
  padding:9px 12px
}

.favorite-button:hover {
  background:#a6886520
}

.favorite-button[aria-pressed=true] {
  background:#c8d2ac;
  color:#172116;
  border-color:#c8d2ac
}

.favorite-symbol {
  font-size:23px;
  line-height:1
}

.film-ticket .favorite-note {
  font-size:8px;
  margin-top:16px;
  line-height:1.6
}

.film-preview figcaption {
  padding:12px 20px;
  font:8px/1.6 var(--mono);
  color:#c9bca5;
  border-top:1px solid #675745
}

.archive-heading {
  display:flex;
  align-items:end;
  gap:30px;
  margin-top:95px;
  padding-bottom:25px
}

.archive-heading h3 {
  font:600 40px/1 var(--display)
}

.archive-heading p {
  color:var(--muted);
  font-size:13px
}

.archive-heading>.mono {
  margin-left:auto;
  color:var(--muted)
}

.archive {
  border-top:1px solid var(--line)
}

.archive-item {
  border-bottom:1px solid var(--line)
}

.archive-item summary {
  display:grid;
  grid-template-columns:40px 1fr 200px 24px;
  align-items:center;
  gap:22px;
  padding:22px 5px;
  min-height:88px;
  transition:background .2s,padding .2s
}

.archive-item summary:hover {
  padding-left:14px;
  background:#ffffff04
}

.archive-number {
  font:12px var(--mono);
  color:var(--signal)
}

.archive-item h4 {
  font-size:clamp(17px,1.8vw,26px);
  line-height:1.3;
  font-weight:400;
  letter-spacing:-.025em
}

.archive-tech {
  font:9px var(--mono);
  color:var(--muted)
}

.archive-plus {
  font-size:27px;
  font-weight:400;
  transition:transform .25s
}

.archive-item[open] .archive-plus {
  transform:rotate(45deg);
  color:var(--signal)
}

.archive-body {
  display:grid;
  grid-template-columns:1fr 220px;
  gap:30px;
  padding:0 5px 28px 67px;
  color:var(--muted);
  font-size:15px
}

.archive-body p {
  max-width:630px
}

.archive-body>.mono {
  font-size:10px
}

.about {
  border-top:1px solid var(--line);
  padding:100px var(--gutter) 60px;
  position:relative
}

.about-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:35px;
  align-items:start;
  margin-bottom:56px
}

.about-heading .eyebrow {
  padding-top:10px
}

.about-heading h2 {
  font:700 clamp(56px,7.5vw,120px)/.92 var(--display);
  letter-spacing:-.01em
}

.outline-display {
  color:transparent;
  -webkit-text-stroke:1px #c5cbbb
}

.about-layout {
  display:grid;
  grid-template-columns:.8fr 1.15fr .85fr;
  gap:7%;
  align-items:start
}

.portrait {
  position:relative;
  max-width:240px;
  margin-top:12px;
  transform:rotate(-3deg);
  background:#d0cab5;
  padding:10px;
  color:#262a20
}

.portrait img {
  display:block;
  width:100%;
  height:250px;
  object-fit:cover;
  object-position:50% 38%;
  filter:saturate(.6)
}

.portrait figcaption {
  font-size:9px;
  padding:12px 3px 4px
}

.photo-pin {
  position:absolute;
  left:calc(50% - 24px);
  top:-11px;
  width:48px;
  height:20px;
  background:#e1dec780;
  transform:rotate(6deg);
  border-left:1px dashed #a7a38b;
  border-right:1px dashed #a7a38b
}

.about-lead {
  font-size:clamp(23px,2.5vw,35px);
  line-height:1.25;
  letter-spacing:-.03em
}

.about-copy>p:not(.about-lead) {
  font-size:15px;
  color:var(--muted);
  margin-top:22px
}

.working-notes {
  border-left:2px solid var(--signal);
  padding-left:20px;
  margin-top:32px
}

.working-notes .mono {
  font-size:9px;
  color:var(--signal)
}

.working-notes p {
  font-size:16px;
  line-height:1.6;
  margin-top:12px
}

.timeline article {
  border-top:1px solid var(--line);
  padding:18px 0 25px
}

.timeline .mono {
  font-size:9px;
  color:var(--signal)
}

.timeline h3 {
  font-size:16px;
  line-height:1.4;
  letter-spacing:-.02em;
  margin-top:10px;
  font-weight:500
}

.timeline p {
  font-size:13px;
  color:var(--muted);
  margin-top:9px;
  line-height:1.65
}

.workbench {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:4%;
  border-top:1px solid var(--line);
  margin-top:80px;
  padding:50px 0 0;
  align-items:center
}

.workbench-heading>p {
  font:600 clamp(36px,4vw,62px)/1 var(--display);
  margin-top:18px
}

.workbench-heading>p>span {
  color:var(--muted)
}

.skill-lines {
  margin-top:30px
}

.skill-lines>p {
  display:flex;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  font-size:12px
}

.skill-lines b {
  font-weight:500;
  flex:0 0 135px
}

.skill-lines span {
  color:var(--muted)
}


.pc-exhibit {
  position:relative;
  min-width:0
}

.pc-label {
  display:block;
  text-align:right;
  color:var(--muted);
  font-size:9px;
  margin-right:10%
}

.contact {
  margin:60px var(--gutter) 0;
  padding:34px 0 45px;
  border-top:2px solid var(--signal)
}

.contact-top {
  display:flex;
  justify-content:space-between;
  color:var(--signal);
  font-size:10px
}

.contact h2 {
  font:700 clamp(70px,13vw,208px)/.84 var(--display);
  letter-spacing:-.01em;
  margin:48px 0 50px
}

.contact h2>a {
  display:block;
  width:max-content;
  max-width:100%;
  color:var(--signal);
  position:relative
}

.contact h2>a::after {
  content:'';
  position:absolute;
  bottom:-12px;
  left:0;
  width:100%;
  height:3px;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease)
}

.contact h2>a:hover::after {
  transform:scaleX(1)
}

.contact h2>a>span {
  font:400 .6em/1 var(--body);
  display:inline-block;
  margin-left:25px;
  vertical-align:8%;
  transition:transform .25s
}

.contact h2>a:hover>span {
  transform:translate(8px,-8px)
}

.contact-bottom {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:9%
}

.contact-bottom p {
  font-size:15px;
  color:var(--muted)
}

.email-link {
  display:inline-block;
  font-size:clamp(19px,2.2vw,32px);
  letter-spacing:-.04em;
  margin-top:15px;
  min-height:44px;
  overflow-wrap:anywhere
}

.contact-links {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px
}

.contact-links a,.contact-links button {
  display:inline-flex;
  min-height:44px;
  align-items:center
}

.contact-links button {
  background:transparent;
  border:0;
  padding:0;
  color:var(--signal);
  gap:10px;
  font-size:12px
}

.contact-links [role=status] {
  font-size:11px;
  flex-basis:100%;
  color:var(--mint)
}

.contact-compose {
  border-top:1px solid var(--line)
}

.contact-compose summary {
  display:flex;
  min-height:56px;
  align-items:center;
  justify-content:space-between;
  font-size:16px
}

.contact-compose summary>span {
  font-size:25px;
  color:var(--signal);
  transition:transform .2s
}

.contact-compose[open] summary>span {
  transform:rotate(45deg)
}

form label {
  display:block;
  font-size:12px;
  margin:14px 0 7px
}

#contact-form input,#contact-form textarea {
  display:block;
  width:100%;
  border:1px solid var(--line);
  padding:12px;
  background:#1c2019;
  color:var(--ink);
  border-radius:0
}

#contact-form input:focus,#contact-form textarea:focus {
  border-color:var(--signal)
}

#contact-form .form-help {
  font-size:12px;
  margin:12px 0
}

#contact-form button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:48px;
  padding:12px 20px;
  color:#161814;
  background:var(--signal);
  border:0;
  width:100%;
  font-size:14px
}

#contact-form button:disabled {
  opacity:.6
}

#form-status {
  font-size:12px;
  margin-top:14px
}

footer {
  display:flex;
  align-items:center;
  gap:30px;
  margin:0 var(--gutter);
  padding:25px 0 32px;
  border-top:1px solid var(--line)
}

footer>.mono {
  font-size:9px;
  color:var(--muted)
}

.footer-options {
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px;
  font-size:11px;
  color:var(--muted)
}

.footer-options>a,.motion-option,.replay-intro {
  display:flex;
  align-items:center;
  min-height:44px
}

.replay-intro {
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--signal);
  font:inherit;
}

.motion-option {
  gap:8px;
  cursor:pointer
}

.motion-option input {
  accent-color:var(--signal);
  width:16px;
  height:16px
}

  html[data-motion=playing] .object-scene:not(.is-3d) .object-float {
    animation:object-drift 8s ease-in-out infinite
  }
  html[data-motion=playing] .work-stamp {
    animation:stamp-settle 8s ease-in-out infinite
  }
  html[data-page-hidden=true] .object-float,html[data-page-hidden=true] .work-stamp {
    animation-play-state:paused!important
  }
  html[data-motion=playing] .weather-preview:hover .weather-sun {
    transform:translate(6px,-6px)
  }
  .weather-sun {
    transition:transform .6s var(--ease)
  }
  .film-art .film-planet {
    transition:transform .8s var(--ease)
  }
  html[data-motion=playing] .film-preview:hover .film-planet {
    transform:translate(-7px,5px)
  }
@keyframes object-drift {
  50% {
    transform:translateY(-9px) rotate(1deg)
  }
}

@keyframes stamp-settle {
  50% {
    transform:translateY(-4px) rotate(6deg)
  }
}

.object-scene.offscreen .object-float,.work-stamp.offscreen {
  animation-play-state:paused!important
}

html[data-motion=paused] {
  scroll-behavior:auto
}

html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after {
  animation:none!important;
  transition:none!important
}

@media(min-width:1750px) {
  main,.masthead,footer {
    max-width:1800px;
    margin-left:auto;
    margin-right:auto
  }
  .contact {
    margin-left:var(--gutter);
    margin-right:var(--gutter)
  }
}

@media(max-width:1050px) {
  .hero-composition {
    min-height:400px
  }
  .hero-exhibit {
    right:-9%;
    width:66%
  }
  .hero h1 {
    font-size:18vw
  }
  .hero-bottom {
    grid-template-columns:1fr 1fr;
    gap:35px
  }
  .hero-index {
    display:none
  }
  .hero-caption {
    font-size:8px
  }
  .project-category {
    display:none
  }
  .lua-copy {
    padding:34px 0 32px 27px
  }
  .lua-layout {
    grid-template-columns:1.1fr 1fr
  }
  .lua-copy h3 {
    font-size:9vw
  }
  .lua-exhibit {
    min-height:450px
  }
  .exhibit-note {
    flex-direction:column;
    gap:5px;
    font-size:7px
  }
  .film-reel {
    grid-template-columns:1fr
  }
  .film-ticket {
    border:0;
    border-top:1px dashed #675745;
    padding:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:center
  }
  .film-ticket p {
    font-size:16px;
    margin:0;
    grid-column:1;
    grid-row:2
  }
  .film-ticket .favorite-button {
    grid-column:2;
    grid-row:2
  }
  .film-ticket .favorite-note {
    margin:0;
    grid-column:2;
    grid-row:1
  }
  .film-art {
    min-height:330px
  }
  .film-planet {
    left:45%;
    width:180px;
    height:180px
  }
  .film-title-art {
    font-size:78px
  }
  .about-layout {
    gap:5%;
    grid-template-columns:.7fr 1fr
  }
  .timeline {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:15px
  }
  .portrait {
    max-width:220px;
    justify-self:center
  }
  .workbench {
    grid-template-columns:1fr 1fr
  }
  .skill-lines p {
    display:block
  }
  .skill-lines b {
    display:block;
    font-size:12px;
    margin-bottom:3px
  }
  .skill-lines span {
    font-size:12px
  }
  .archive-item summary {
    grid-template-columns:28px 1fr 150px 22px;
    gap:17px
  }
  .archive-tech {
    font-size:8px
  }
  .contact-bottom {
    gap:5%
  }
  .contact h2 {
    font-size:13.6vw
  }
}

@media(max-width:700px) {
  html {
    scroll-padding-top:84px
  }
  .masthead {
    min-height:72px;
    gap:14px
  }
  .brand {
    font-size:34px
  }
  .brand>span {
    font-size:33px
  }
  .masthead-note {
    display:none
  }
  .masthead nav {
    gap:20px
  }
  .masthead nav a {
    font-size:11px
  }
  .masthead sup {
    font-size:8px
  }
  .hero {
    padding-top:17px
  }
  .hero-top {
    font-size:8px
  }
  .hero-top>span:nth-child(2) {
    margin:0
  }
  .hero-edition {
    display:none
  }
  .hero-composition {
    padding-top:30px;
    min-height:490px
  }
  .hero-type {
    width:100%
  }
  .hero-overline {
    font-size:9px;
    margin-bottom:18px
  }
  .hero h1 {
    font-size:33vw;
    line-height:.78
  }
  .hero-surname {
    font-size:.82em!important
  }
  .hero-exhibit {
    top:165px;
    right:-2%;
    width:104%;
    height:350px
  }
  .physics-scene {
    inset:5% -2% 3% -2%
  }
  .construction-frame {
    inset:15% 20% 14% 20%
  }
  .object-label {
    right:17%;
    top:10%;
    font-size:8px
  }
  .work-stamp {
    right:14%;
    bottom:3%;
    font-size:19px;
    padding:12px 14px
  }
  .work-stamp>span {
    font-size:7px
  }
  .hero-bottom {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:17px;
    padding-bottom:26px
  }
  .hero-intro {
    font-size:24px;
    line-height:1.3
  }
  .hero-intro>span {
    font-size:15px
  }
  .hero-personal {
    font-size:14px;
    max-width:none
  }
  .hero-personal .text-link {
    margin-top:12px
  }
  .hero-caption {
    display:none
  }
  .projects {
    padding-top:66px;
    padding-bottom:60px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:28px
  }
  .section-heading h2 {
    font-size:14vw;
    line-height:.94
  }
  .section-heading>p {
    justify-self:start;
    font-size:15px;
    max-width:none
  }
  .eyebrow {
    font-size:10px
  }
  .lua-layout {
    grid-template-columns:1fr
  }
  .project-ribbon {
    padding:15px 18px;
    font-size:8px;
    align-items:center
  }
  .project-ribbon>span:nth-child(2) {
    text-align:right;
    max-width:140px
  }
  .lua-copy {
    padding:25px 22px 0;
    max-width:none
  }
  .lua-copy h3 {
    font-size:22vw
  }
  .project-deck {
    font-size:20px;
    margin-top:25px
  }
  .lua-copy>p:not(.project-deck) {
    font-size:15px
  }
  .project-tags {
    font-size:8px;
    gap:14px
  }
  .lua-exhibit {
    min-height:355px;
    margin-top:5px
  }
  .large-index {
    font-size:330px;
    top:0;
    right:5%
  }
  .tool-scene {
    inset:-9% -5% 7% -5%
  }
  .exhibit-note {
    bottom:17px;
    left:7%;
    right:7%;
    flex-direction:row;
    font-size:7px
  }
  .exhibit-note span:last-child {
    max-width:155px
  }
  .lua-foot {
    padding:15px 16px;
    gap:7px;
    font-size:7px
  }
  .web-projects {
    grid-template-columns:1fr;
    gap:60px;
    margin-top:55px
  }
  .film-project {
    padding-top:0
  }
  .weather-preview {
    padding:21px;
    border-radius:0 0 45px 0
  }
  .project-overline {
    font-size:9px
  }
  .weather-face strong {
    font-size:140px
  }
  .weather-orbit {
    height:170px;
    max-width:160px
  }
  .weather-sun {
    left:5%;
    width:105px;
    height:105px
  }
  .web-copy h3 {
    font-size:10.5vw
  }
  .web-copy>p:not(.tech-line) {
    font-size:15px
  }
  .film-reel {
    grid-template-columns:1fr .85fr
  }
  .film-art {
    min-height:315px
  }
  .film-planet {
    left:22%;
    width:125px;
    height:125px
  }
  .film-title-art {
    font-size:54px;
    left:13px
  }
  .film-art-note {
    font-size:6px;
    left:13px
  }
  .film-ticket {
    display:flex;
    padding:22px 14px;
    border-left:1px dashed #675745;
    border-top:0;
    gap:0
  }
  .film-ticket p {
    font-size:18px;
    margin:24px 0 30px
  }
  .film-ticket .favorite-note {
    margin-top:13px
  }
  .film-ticket>.mono {
    font-size:7px
  }
  .favorite-button {
    font-size:10px;
    padding:8px;
    gap:6px;
    min-height:48px
  }
  .film-toolbar {
    font-size:8px;
    padding:14px
  }
  .film-preview figcaption {
    font-size:7px;
    padding:12px 14px
  }
  .archive-heading {
    margin-top:62px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px
  }
  .archive-heading h3 {
    font-size:34px
  }
  .archive-heading p {
    grid-row:2;
    font-size:12px
  }
  .archive-heading>.mono {
    grid-column:2;
    grid-row:1;
    font-size:9px
  }
  .archive-item summary {
    grid-template-columns:25px 1fr 22px;
    gap:12px;
    min-height:88px;
    padding:19px 0
  }
  .archive-item h4 {
    font-size:17px
  }
  .archive-tech {
    display:none
  }
  .archive-body {
    grid-template-columns:1fr;
    gap:15px;
    padding-left:37px;
    font-size:14px
  }
  .archive-body>.mono {
    font-size:9px
  }
  .about {
    padding-top:64px;
    padding-bottom:24px
  }
  .about-heading {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:35px
  }
  .about-heading h2 {
    font-size:15vw
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:36px
  }
  .portrait {
    justify-self:start;
    max-width:200px;
    margin-left:12px
  }
  .portrait img {
    height:218px
  }
  .about-copy .about-lead {
    font-size:30px
  }
  .about-copy>p:not(.about-lead) {
    font-size:15px
  }
  .timeline {
    grid-column:auto;
    grid-template-columns:1fr;
    margin-top:0;
    gap:0
  }
  .timeline article {
    padding:19px 0 24px
  }
  .timeline h3 {
    font-size:18px
  }
  .timeline p {
    font-size:14px
  }
  .workbench {
    grid-template-columns:1fr;
    margin-top:24px;
    padding-top:32px;
    gap:20px
  }
  .workbench-heading>p {
    font-size:44px
  }
  .skill-lines p {
    display:flex;
    gap:14px;
    font-size:12px
  }
  .skill-lines b {
    flex-basis:125px;
    margin:0
  }
  .pc-scene {
    aspect-ratio:1.3;
    margin-left:-5%;
    width:110%
  }
  .pc-label {
    font-size:8px;
    margin-right:0
  }
  .contact {
    margin-top:45px;
    padding-top:25px
  }
  .contact-top {
    font-size:8px;
    gap:15px
  }
  .contact-top>span:last-child {
    max-width:125px;
    text-align:right
  }
  .contact h2 {
    font-size:17.2vw;
    margin:34px 0 37px;
    line-height:.95
  }
  .contact h2>a>span {
    margin-left:8px;
    font-size:.58em;
    vertical-align:3%
  }
  .contact-bottom {
    grid-template-columns:1fr;
    gap:30px
  }
  .contact-bottom p {
    font-size:14px
  }
  .email-link {
    font-size:22px
  }
  .contact-links {
    font-size:11px;
    gap:17px
  }
  .contact-links button {
    font-size:11px
  }
  #contact-form input,#contact-form textarea {
    font-size:16px
  }
  footer {
    gap:18px;
    flex-wrap:wrap;
    padding-bottom:20px
  }
  footer>.mono {
    font-size:8px
  }
  .footer-options {
    width:100%;
    justify-content:space-between;
    margin-left:0;
    border-top:1px solid var(--line);
    padding-top:10px;
    font-size:10px;
    gap:12px
  }
}

@media(max-width:700px) {
  .hero .object-label {
    display:none
  }
}

@media(max-width:380px) {
  .masthead nav {
    gap:14px
  }
  .hero-composition {
    min-height:450px
  }
  .hero-exhibit {
    top:148px;
    height:320px
  }
  .hero-intro {
    font-size:23px
  }
  .film-ticket p {
    font-size:16px
  }
  .film-title-art {
    font-size:49px
  }
  .film-ticket {
    padding:20px 10px
  }
  .film-art-note {
    max-width:120px
  }
  .email-link {
    font-size:20px
  }
  .skill-lines p {
    display:block
  }
  .skill-lines b {
    margin-bottom:4px
  }
}

/* Content extensions: existing timeline, evidence links and one Source 2 watch note. */
.about-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:20px
}

.about-links .text-link { font-size:12px; min-height:44px }
.timeline-current { border-top-color:var(--signal)!important }
.timeline-future {
  margin:0 0 26px;
  padding:10px 0 0 16px;
  border-left:1px dashed var(--mint)
}
.timeline-future>.eyebrow { color:var(--mint); font-size:9px; margin-bottom:8px }
.timeline-future article { border-top-style:dashed; padding:14px 0 18px }
.timeline-future article .mono { color:var(--mint) }
.timeline-future h3 { margin-top:7px }
.timeline-future p { margin-top:6px }
.skill-hint { margin-top:20px; font-size:12px; color:var(--muted) }
.skill-hint+.skill-lines { margin-top:12px }
.skill-row>summary {
  display:flex;
  align-items:baseline;
  gap:20px;
  min-height:52px;
  padding:14px 0;
  font-size:12px
}
.skill-lines>details { border-bottom:1px solid var(--line) }
.skill-row summary>span { flex:1; min-width:0 }
.skill-row summary>i { font-style:normal; color:var(--signal); transition:transform .2s }
.skill-row[open]>summary>i { transform:rotate(45deg) }
.skill-row summary:hover>b,.skill-row[open]>summary>b { color:var(--signal) }
.skill-evidence { padding:0 0 18px 155px }
.skill-evidence>div+div { margin-top:14px }
.skill-evidence strong { display:block; font:400 11px/1.7 var(--mono) }
.skill-evidence .evidence-note { display:block; font-size:11px; margin:4px 0 }
.evidence-links { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:4px }
.evidence-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--mint);
  font-size:12px;
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:5px
}
.evidence-links a:hover { color:var(--signal); text-decoration-color:currentColor }
.archive-item:target { border-left:2px solid var(--signal); padding-left:14px }

.tech-watch {
  position:relative;
  border-top:1px solid var(--line);
  padding:90px var(--gutter) 45px
}
.watch-entry { border-top:1px solid var(--signal) }
.watch-entry+.watch-entry { margin-top:56px }
.watch-meta { display:flex; justify-content:space-between; gap:16px; padding:16px 0; color:var(--muted) }
.watch-meta>span:first-child { color:var(--signal) }
.watch-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:8%; padding-top:26px; align-items:start }
.watch-diagram { border:1px solid var(--line); padding:25px; background:var(--surface); transform:rotate(-2deg); margin:14px 8px 0 0 }
.watch-diagram-top { display:flex; justify-content:space-between; color:var(--mint); border-bottom:1px solid var(--line); padding-bottom:18px }
.watch-flow { display:flex; flex-direction:column; align-items:flex-start; padding:32px 0; font:600 clamp(36px,4.7vw,70px)/1 var(--display) }
.watch-flow>span:nth-child(even) { font:400 28px/1.4 var(--mono); color:var(--signal); margin:5px 0 }
.watch-flow>span:last-child { color:var(--mint) }
.watch-diagram figcaption { color:var(--muted); border-top:1px solid var(--line); padding-top:18px; font-size:10px }
.watch-copy { min-width:0 }
.watch-copy h3 { font:600 clamp(32px,3.8vw,57px)/1.05 var(--display); margin:18px 0 24px }
.watch-copy>p { font-size:15px; color:var(--muted); max-width:65ch }
.watch-notes { margin:26px 0 0 }
.watch-notes>div { border-top:1px solid var(--line); padding:18px 0 }
.watch-notes dt { font:400 10px/1.7 var(--mono); color:var(--signal); margin-bottom:8px; letter-spacing:.045em }
.watch-notes dd { margin:0; color:var(--muted); font-size:14px; max-width:65ch }
.watch-source { border-top:1px solid var(--line); padding-top:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px }
.watch-source>.mono { color:var(--muted); font-size:9px }
.watch-source .text-link { min-height:44px; font-size:13px }
.watch-method { margin-top:45px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:9px }

@media (max-width:1050px) {
  .masthead { gap:24px }
  .masthead nav { gap:22px }
  .masthead-note { display:none }
  .timeline-future { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; margin:0 }
  .timeline-future>.eyebrow { grid-column:1/-1 }
  .skill-row>summary { gap:8px; flex-wrap:wrap }
  .skill-row>summary>b { flex-basis:calc(100% - 28px); order:0; margin:0 }
  .skill-row>summary>i { order:1; margin-left:auto }
  .skill-row>summary>span { order:2; flex-basis:100% }
  .skill-evidence { padding-left:0 }
  .watch-layout { gap:5%; grid-template-columns:.8fr 1.2fr }
}

@media (max-width:700px) {
  html { scroll-padding-top:116px }
  .masthead { padding-top:4px; padding-bottom:4px }
  .masthead nav { display:grid; grid-template-columns:repeat(3,max-content); justify-content:end; gap:0 14px }
  .masthead nav a { min-height:44px; min-width:44px }
  .masthead nav a:nth-child(4) { grid-column:2 }
  .timeline-future { grid-column:auto; display:block; margin-bottom:24px }
  .skill-row>summary { gap:8px 14px }
  .skill-evidence { padding-bottom:20px }
  .tech-watch { padding-top:60px; padding-bottom:24px }
  .watch-meta { flex-wrap:wrap; font-size:9px; gap:8px 18px }
  .watch-meta>span:last-child { flex-basis:100% }
  .watch-layout { grid-template-columns:1fr; gap:35px; padding-top:14px }
  .watch-diagram { padding:20px; margin:6px 5px; transform:rotate(-1.5deg) }
  .watch-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; font-size:clamp(17px,5.5vw,32px); align-items:center; gap:6px; padding:28px 0 }
  .watch-flow>span:nth-child(even) { transform:rotate(-90deg); font-size:16px; margin:0 }
  .watch-copy h3 { font-size:38px }
  .watch-copy>p,.watch-notes dd { font-size:15px }
  .watch-method { margin-top:30px; font-size:9px }
}


@media(forced-colors:active) {
  .outline-display {
    color:CanvasText;
    -webkit-text-stroke:0
  }
  .favorite-button[aria-pressed=true] {
    outline:2px solid Highlight
  }
}

@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=playing]) {
    scroll-behavior:auto
  }
  html:not([data-motion=playing]) *,html:not([data-motion=playing]) *::before,html:not([data-motion=playing]) *::after {
    animation:none!important;
    transition:none!important
  }
  html:not([data-motion=playing]) .physics-scene {
    transform:none
  }
}

@media print {
  .masthead,.hero-exhibit,.lua-exhibit,.pc-exhibit,.footer-options,.contact-compose,.contact-links button {
    display:none!important
  }
  body {
    background:white;
    color:black
  }
  .hero,.projects,.about,.contact {
    padding:25px 0;
    margin:0;
    background:none
  }
  .hero-composition {
    min-height:0
  }
  .hero h1 {
    font-size:100px
  }
  .hero-bottom,.lua-layout,.about-layout,.workbench,.contact-bottom {
    display:block
  }
  .lua-project {
    background:none;
    color:black
  }
  .hero-surname,.muted-display,.outline-display {
    color:black;
    -webkit-text-stroke:0
  }
  .web-projects {
    gap:20px
  }
  .film-project {
    padding:0
  }
  .contact h2 {
    font-size:80px
  }
  .contact h2>a {
    color:black
  }
  .portrait {
    max-width:140px
  }
  p,.timeline p,.about-copy>p {
    color:black!important
  }
}

/* Actual project tools, grouped into readable lines on every screen. */
.archive-tech-multiline { min-width: 0; line-height: 1.8; }
.archive-tech-multiline > span, .tech-line-multiline > span { display: block; }
.tech-line-multiline { line-height: 1.9; }
@media (max-width: 700px) {
  .archive-item .archive-tech-multiline { display: block; grid-column: 2; grid-row: 2; font-size: 9px; }
  .archive-item .archive-plus { grid-column: 3; grid-row: 1; }
}