:root {
  --canal: #14202b;
  --canal-deep: #0a1118;
  --canal-light: #203542;
  --gold: #d9ae58;
  --gold-bright: #f0d489;
  --bone: #e9dfc8;
  --paper: #d7c9ad;
  --oxblood: #701829;
  --velvet: #3c0d1a;
  --ink: #090d11;
  --body: #dfd5c0;
  --muted: #a99d88;
  --line: rgba(217, 174, 88, .24);
  --display: 'Italiana', serif;
  --serif: 'Cormorant', serif;
  --header-h: 88px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--canal-deep); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--body);
  background:
    radial-gradient(circle at 83% 12%, rgba(166, 105, 37, .13), transparent 26rem),
    linear-gradient(180deg, #101b24 0%, var(--canal) 28%, #101a22 72%, #080f15 100%);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--gold-bright);
  color: var(--ink);
}
.skip-link:focus { width: auto; height: auto; overflow: visible; padding: 10px 16px; clip-path: none; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }

.site-header {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  padding: 0 clamp(24px, 5vw, 78px);
  border-bottom: 1px solid rgba(217, 174, 88, .18);
}
.brand {
  width: max-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}
.brand-mark {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50% 50% 42% 42%;
  color: var(--gold-bright);
  font-size: 19px;
}
.primary-nav { display: flex; gap: clamp(24px, 3.5vw, 58px); }
.primary-nav a, .site-footer nav a {
  position: relative;
  padding: 10px 0;
  color: #d8ccb6;
  font-size: 15px;
  letter-spacing: .06em;
  text-decoration: none;
}
.primary-nav a::after, .site-footer nav a::after, .text-link::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--gold);
  transition: transform .35s ease;
}
.primary-nav a:hover::after, .site-footer nav a:hover::after, .text-link:hover::after { transform: scaleX(1); transform-origin: left; }
.tide-pill {
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  column-gap: 9px;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tide-pill .tide-dot { grid-row: 1 / 3; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #75b9c8; box-shadow: 0 0 14px #75b9c8; }
.tide-pill strong { color: var(--gold-bright); font-size: 13px; font-weight: 500; }

.hero {
  min-height: 920px;
  height: 100svh;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  align-items: center;
  padding: calc(var(--header-h) + 52px) clamp(24px, 7.2vw, 116px) 80px;
  background:
    linear-gradient(90deg, rgba(6, 11, 15, .9) 0%, rgba(13, 23, 31, .55) 46%, rgba(17, 22, 27, .2) 100%),
    radial-gradient(circle at 77% 40%, rgba(164, 89, 23, .24), transparent 29%),
    linear-gradient(135deg, #0b1219, #172832 62%, #0a1118);
}
.hero::before {
  content: '';
  position: absolute;
  inset: var(--header-h) 52% 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 11.8%, rgba(217,174,88,.032) 12% 12.2%);
  border-right: 1px solid rgba(217, 174, 88, .15);
}
.hero::after {
  content: '';
  position: absolute;
  top: var(--header-h);
  right: 0;
  width: 48%;
  height: 62%;
  border-radius: 0 0 0 72%;
  background: linear-gradient(135deg, rgba(80,10,26,.7), rgba(32,4,11,.35));
  box-shadow: -26px 0 50px rgba(0,0,0,.38), inset 20px 0 45px rgba(255,255,255,.03);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 68% 92%, 38% 100%, 12% 82%, 26% 51%);
}
.hero-glow { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; filter: blur(28px); opacity: .5; }
.hero-glow-a { width: 180px; height: 180px; right: 6%; top: 30%; background: rgba(241, 172, 71, .12); }
.hero-glow-b { width: 90px; height: 90px; left: 43%; top: 64%; background: rgba(237, 186, 87, .08); }
.hero-copy { position: relative; z-index: 4; max-width: 710px; padding-top: 42px; }
.eyebrow, .section-number {
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero h1 {
  margin-bottom: 28px;
  font-family: var(--display);
  font-size: clamp(74px, 7.2vw, 116px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.035em;
  color: #f2ead8;
}
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-deck { max-width: 550px; margin-bottom: 34px; color: #c8bca7; font-size: 21px; line-height: 1.48; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--gold);
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.button-gold { color: #121212; background: var(--gold); box-shadow: 0 8px 32px rgba(217,174,88,.08); }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(217,174,88,.18); }
.text-link { position: relative; display: inline-block; padding: 10px 0; color: #eee1c7; font-size: 16px; font-style: italic; text-decoration: none; }
.text-link span { color: var(--gold); margin-left: 8px; }
.hero-vignette { position: relative; z-index: 3; justify-self: center; width: min(84%, 520px); margin-top: 55px; }
.hanging-mask { position: relative; z-index: 3; height: min(66vh, 660px); margin: 0 auto; overflow: visible; filter: saturate(.86); animation: mask-breathe 6s ease-in-out infinite; }
.thread { stroke: #b8995c; stroke-width: 2; opacity: .5; }
.hero-filigree { fill: none; stroke: #7f551f; stroke-width: 4; stroke-linecap: round; opacity: .83; }
.candle { position: absolute; z-index: 4; width: 28px; height: 95px; bottom: 2%; background: linear-gradient(90deg, #8b704d, #eee0a6 47%, #8d6c3f); box-shadow: 0 20px 20px #000; }
.candle::before { content: ''; position: absolute; inset: -8px 4px auto; height: 15px; border-radius: 50%; background: #bca87a; }
.candle i { position: absolute; left: 50%; bottom: calc(100% + 6px); width: 17px; height: 38px; border-radius: 70% 30% 65% 35%; transform: translateX(-50%) rotate(3deg); background: radial-gradient(circle at 50% 75%, #fff8bc 0 15%, #ffc34d 38%, #b84818 75%, transparent 76%); filter: drop-shadow(0 0 15px #f4a836); transform-origin: bottom; animation: flame 1.3s ease-in-out infinite alternate; }
.candle-one { left: 2%; height: 72px; }
.candle-two { right: -4%; bottom: 9%; height: 108px; }
.velvet-drape { position: absolute; z-index: -1; inset: -30% -40% -20% 28%; transform: rotate(8deg); opacity: .8; background: radial-gradient(ellipse at 30% 20%, #72192c, #290711 55%, #090205); clip-path: polygon(24% 0, 100% 0, 100% 100%, 78% 92%, 62% 100%, 48% 89%, 29% 97%, 12% 84%, 28% 50%); }
.hero-aside { position: absolute; z-index: 5; right: clamp(20px, 4vw, 64px); bottom: 82px; display: grid; padding: 18px 22px; border-left: 1px solid var(--gold); background: rgba(10,17,24,.4); backdrop-filter: blur(8px); }
.hero-aside span, .hero-aside small { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.hero-aside strong { color: var(--bone); font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: .03em; }
.scroll-cue { position: absolute; z-index: 5; bottom: 38px; left: clamp(24px, 7.2vw, 116px); display: flex; align-items: center; gap: 10px; color: #aa9c83; font-size: 11px; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }
.scroll-cue span { width: 38px; height: 1px; background: var(--gold); }

.load-reveal { opacity: 0; transform: translateY(26px); animation: load-in .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-copy .load-reveal:nth-child(1) { animation-delay: .15s; }
.hero-copy .load-reveal:nth-child(2) { animation-delay: .28s; }
.hero-copy .load-reveal:nth-child(3) { animation-delay: .44s; }
.hero-copy .load-reveal:nth-child(4) { animation-delay: .58s; }
.hero-vignette.load-reveal { animation-delay: .48s; }
.hero-aside.load-reveal { animation-delay: .75s; }

.acqua-ticker { overflow: hidden; height: 46px; position: relative; z-index: 7; display: flex; align-items: center; color: #dbcfba; background: #09131a; border-top: 1px solid #2c5163; border-bottom: 1px solid #2c5163; white-space: nowrap; }
.ticker-track { width: max-content; display: flex; align-items: center; gap: 28px; animation: ticker 35s linear infinite; font-size: 12px; letter-spacing: .19em; text-transform: uppercase; }
.ticker-track strong { color: #99d3dc; font-weight: 600; }
.ticker-track i { width: 4px; height: 4px; transform: rotate(45deg); background: var(--gold); }

.maker-section { position: relative; padding: 150px clamp(24px, 5vw, 80px) 180px; background: linear-gradient(180deg, #101b24, #13222c 63%, #0b151c); }
.maker-section::before { content: 'MASCHERA'; position: absolute; top: 220px; right: -35px; color: rgba(239, 222, 188, .025); font-family: var(--display); font-size: clamp(110px, 16vw, 270px); line-height: 1; writing-mode: vertical-rl; pointer-events: none; }
.maker-heading { max-width: 980px; margin: 0 auto 82px; text-align: center; }
.maker-heading h2, .threshold-copy h2, .portrait-copy h2, .archive-heading h2, .ethics-copy h2, .visit-copy h2 {
  margin-bottom: 25px;
  color: #f0e7d4;
  font-family: var(--display);
  font-size: clamp(52px, 5.5vw, 84px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
}
.maker-heading > p:last-child { max-width: 620px; margin: 0 auto; color: #b9ad98; font-size: 19px; }
.maker-workbench { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(360px, .72fr) minmax(540px, 1.28fr); min-height: 850px; border: 1px solid var(--line); background: rgba(5, 11, 16, .4); box-shadow: 0 60px 110px rgba(0,0,0,.34); }
.mask-controls { padding: 42px clamp(25px, 3vw, 48px); background: linear-gradient(145deg, rgba(42,22,21,.44), rgba(8,16,22,.72)); border-right: 1px solid var(--line); }
.mask-controls fieldset { min-width: 0; margin: 0 0 34px; padding: 0 0 32px; border: 0; border-bottom: 1px solid rgba(217,174,88,.16); }
.mask-controls legend { width: 100%; margin-bottom: 18px; color: var(--gold-bright); font-family: var(--display); font-size: 18px; letter-spacing: .06em; }
.mask-controls legend span { margin-right: 12px; color: #7d6c54; font-family: var(--serif); font-size: 11px; letter-spacing: .15em; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.choice { min-height: 72px; padding: 12px 14px; border: 1px solid rgba(233,223,200,.14); cursor: pointer; text-align: left; background: rgba(20,32,43,.45); transition: border .25s, background .25s, transform .25s; }
.choice strong, .choice small { display: block; }
.choice strong { color: #e9dfca; font-family: var(--display); font-size: 15px; font-weight: 400; letter-spacing: .06em; }
.choice small { margin-top: 2px; color: #988d7c; font-size: 13px; font-style: italic; }
.choice:hover { transform: translateY(-2px); border-color: rgba(217,174,88,.55); }
.choice.is-active { border-color: var(--gold); background: rgba(112,24,41,.36); box-shadow: inset 3px 0 var(--gold); }
.range-label { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; color: #d4c7af; font-size: 14px; }
.range-label output { color: #a99b83; font-style: italic; }
input[type='range'] { width: 100%; height: 24px; margin: 0; cursor: pointer; appearance: none; background: transparent; }
input[type='range']::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--gold), rgba(217,174,88,.25)); }
input[type='range']::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; appearance: none; border: 1px solid var(--gold-bright); border-radius: 50%; background: var(--canal); box-shadow: 0 0 0 4px rgba(217,174,88,.1); }
input[type='range']::-moz-range-track { height: 1px; background: rgba(217,174,88,.45); }
input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border: 1px solid var(--gold-bright); border-radius: 50%; background: var(--canal); }
.swatches { display: flex; gap: 14px; }
.swatch { width: 44px; height: 44px; position: relative; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; cursor: pointer; background: var(--swatch); box-shadow: inset 0 0 12px rgba(255,255,255,.12); }
.swatch::after { content: ''; position: absolute; inset: -5px; border: 1px solid transparent; border-radius: inherit; }
.swatch.is-active::after { border-color: var(--gold); }
.toggle-row { width: 100%; min-height: 46px; display: flex; justify-content: space-between; align-items: center; margin-top: 17px; padding: 0; border: 0; cursor: pointer; color: #d7cab2; background: transparent; font-size: 14px; }
.toggle-row i { width: 44px; height: 23px; position: relative; border: 1px solid #665f56; border-radius: 30px; transition: border-color .2s; }
.toggle-row i::after { content: ''; width: 15px; height: 15px; position: absolute; top: 3px; left: 4px; border-radius: 50%; background: #807769; transition: transform .25s, background .25s; }
.toggle-row.is-active i { border-color: var(--gold); }
.toggle-row.is-active i::after { transform: translateX(19px); background: var(--gold-bright); }
.control-actions { display: flex; align-items: center; gap: 22px; }
.reset-button { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid #6d6253; cursor: pointer; color: #aa9d89; background: transparent; font-size: 13px; font-style: italic; }

.mask-stage { min-width: 0; overflow: hidden; position: relative; display: grid; place-items: center; perspective: 1000px; background: radial-gradient(circle at 52% 38%, rgba(186,120,43,.15), transparent 26%), radial-gradient(circle at 50% 45%, #20313a 0%, #101b23 54%, #071017 100%); }
.mask-stage::before { content: ''; position: absolute; inset: 9%; border: 1px solid rgba(217,174,88,.1); border-radius: 48% 48% 2px 2px; background: linear-gradient(120deg, transparent 48%, rgba(255,255,255,.025) 50%, transparent 52%); }
.mask-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 36%, rgba(0,0,0,.5) 100%); }
.stage-inscription { position: absolute; z-index: 3; top: 28px; left: 30px; display: grid; color: #827765; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.stage-inscription strong { color: #c9b48c; font-family: var(--display); font-size: 14px; font-weight: 400; }
.candle-halo { width: 23%; aspect-ratio: 1; position: absolute; z-index: 0; top: var(--halo-y, 25%); left: var(--halo-x, 19%); border-radius: 50%; background: rgba(239,170,65,.18); filter: blur(34px); transition: left .12s linear, top .12s linear; }
.mask-svg { width: min(94%, 760px); position: relative; z-index: 2; overflow: visible; transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transition: transform .16s ease-out; transform-style: preserve-3d; }
.mask-shell { transition: d .55s cubic-bezier(.2,.8,.2,1), fill .5s; }
.eye-hole { fill: #050708; stroke: rgba(233,223,200,.34); stroke-width: 3; transition: d .5s ease; }
.watcher-sclera { fill: #c9bb9d; }
.watcher-iris { fill: #8b6b33; stroke: #d4ad59; stroke-width: 3; }
.watcher-pupil { fill: #050708; }
.watcher-glint { fill: #fff7d3; filter: url(#softGlow); }
.watchers { transform: translate(var(--eye-x, 0px), var(--eye-y, 0px)); transition: transform .12s ease-out; }
.gilt-line { fill: none; stroke: url(#gilt); stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(32,17,3,.7)); transition: d .4s; }
.form-line { fill: rgba(76,42,20,.14); stroke: rgba(83,59,35,.65); stroke-width: 4; }
.medico-beak { display: none; fill: inherit; stroke: url(#gilt); stroke-width: 5; filter: drop-shadow(18px 15px 15px rgba(0,0,0,.55)); }
.mask-svg.is-medico .medico-beak { display: block; }
.mask-svg.is-medico #mouthLine { opacity: 0; }
.rim-light { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 4; stroke-linecap: round; }
.filigree-path { fill: none; stroke: url(#gilt); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(20,12,3,.65)); animation: draw-gold .6s ease-out both; }
.filigree-dot { fill: #f4d778; stroke: #81591e; stroke-width: 1.5; }
#mouthLine { fill: rgba(89, 17, 33, .72); stroke: rgba(92, 53, 29, .72); }
.plume { fill: url(#plumeInk); stroke: #c2a96f; stroke-width: 2; filter: drop-shadow(10px 18px 10px rgba(0,0,0,.5)); }
.plume-b { opacity: .76; }
.plume-rib { fill: none; stroke: #7d6843; stroke-width: 4; }
.plume-group { transform-origin: 500px 250px; transition: opacity .35s, transform .45s; animation: plume-drift 5s ease-in-out infinite; }
.plume-group.is-hidden { opacity: 0; transform: translateY(30px) scale(.8); }
.stand path { fill: none; stroke: #171717; stroke-width: 17; }
.stand ellipse { fill: #0a0b0c; stroke: #55452e; stroke-width: 4; }
.stand .stand-shine { fill: rgba(217,174,88,.13); stroke: none; }
.gaze-note { position: absolute; z-index: 4; right: 25px; bottom: 22px; display: flex; align-items: center; gap: 8px; margin: 0; color: #8f8574; font-size: 11px; font-style: italic; }
.gaze-note span { width: 6px; height: 6px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 12px #b82a42; }
.commission-slip { position: absolute; z-index: 6; right: 28px; bottom: 54px; width: 230px; padding: 18px 20px; transform: translateY(18px); opacity: 0; pointer-events: none; color: #33271c; background: #d9c9a8; box-shadow: 0 12px 35px rgba(0,0,0,.4); transition: opacity .35s, transform .35s; }
.commission-slip.is-visible { transform: none; opacity: 1; }
.commission-slip span, .commission-slip small { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.commission-slip strong { display: block; margin: 5px 0; font-family: var(--display); font-size: 18px; font-weight: 400; }

.reveal { opacity: 1; transform: translateY(28px); transition: transform .9s cubic-bezier(.16,.82,.22,1), filter .9s ease; filter: saturate(.82); }
.reveal.is-visible { transform: none; filter: none; }

.threshold-section { min-height: 850px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; background: #0b151c; }
.threshold-scene { min-height: 800px; overflow: clip; position: relative; background: linear-gradient(180deg, #05080a 0 62%, #152d39 62% 100%); }
.threshold-scene::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 19.8%, rgba(234,218,187,.04) 20% 20.2%), linear-gradient(90deg, rgba(0,0,0,.45), transparent 30%, transparent 70%, rgba(0,0,0,.5)); }
.door-frame { width: 50%; height: 72%; position: absolute; top: 0; left: 25%; border: clamp(18px,2.4vw,36px) solid #211b17; border-bottom: 0; background: linear-gradient(90deg, #170b0d, #4d1421 48%, #250a10); box-shadow: 0 0 0 4px #6f5431, 0 30px 80px #000, inset 18px 0 25px rgba(0,0,0,.5); }
.door-frame::before, .door-frame::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(217,174,88,.3); }
.door-frame::before { left: 22%; }.door-frame::after { right: 22%; }
.door-number { width: 48px; height: 60px; position: absolute; top: 11%; left: calc(50% - 24px); display: grid; place-items: center; color: #17100a; background: #a7813e; font-family: var(--display); font-size: 18px; clip-path: polygon(50% 0,100% 24%,88% 100%,12% 100%,0 24%); }
.flood-plane { position: absolute; inset: 62% 0 0; overflow: hidden; background: linear-gradient(180deg, rgba(57,102,118,.65), #102b38 35%, #07141c); }
.flood-plane::before { content: ''; position: absolute; inset: 0; opacity: .4; background: repeating-radial-gradient(ellipse at 30% 0%, transparent 0 38px, rgba(141,190,199,.25) 40px 42px, transparent 44px 80px); animation: water-shift 8s linear infinite; }
.flood-plane span { width: 45%; height: 1px; position: absolute; top: 16%; background: linear-gradient(90deg, transparent, rgba(188,222,222,.45), transparent); animation: ripple 4s ease-in-out infinite; }
.flood-plane span:nth-child(2) { top: 42%; left: 34%; animation-delay: -2s; }.flood-plane span:nth-child(3) { top: 68%; left: 8%; animation-delay: -1s; }
.water-door-reflection { position: absolute; top: 100%; left: -30%; width: 160%; height: 35%; transform: scaleY(-1); opacity: .25; background: inherit; filter: blur(4px); }
.duckboards { position: absolute; z-index: 3; left: 5%; right: 5%; bottom: 16%; display: flex; gap: 6px; transform: perspective(480px) rotateX(67deg) translateY(80px); opacity: .18; transition: opacity 1s, transform 1s; }
.duckboards.is-deployed { transform: perspective(480px) rotateX(67deg); opacity: .94; }
.duckboards i { flex: 1; height: 96px; background: repeating-linear-gradient(90deg, #7b5731 0 6px, #624320 7px 12px); border: 1px solid #9a7546; box-shadow: 0 20px 30px rgba(0,0,0,.45); }
.threshold-copy { align-self: center; max-width: 650px; padding: 90px clamp(34px, 7vw, 110px); }
.threshold-copy .dropcap::first-letter { float: left; margin: .03em .12em 0 0; color: var(--gold); font-family: var(--display); font-size: 5.8em; line-height: .7; }
.threshold-copy > p { color: #c1b5a1; }
.tide-ledger { display: grid; grid-template-columns: repeat(3, 1fr); margin: 44px 0 30px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tide-ledger div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.tide-ledger dt { color: var(--gold-bright); font-family: var(--display); font-size: 27px; }
.tide-ledger dd { margin: 3px 0 0; color: #8e8372; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.duckboard-status { display: flex; align-items: center; gap: 10px; font-size: 14px; font-style: italic; }
.duckboard-status span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #64a6b6; box-shadow: 0 0 14px #64a6b6; }

.portrait-section { min-height: 900px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 8vw, 140px); padding: 120px clamp(24px, 9vw, 145px); position: relative; background: radial-gradient(circle at 20% 50%, rgba(183,118,42,.12), transparent 29%), linear-gradient(135deg, #161413, #221619 60%, #100e10); }
.portrait-section::before { content: ''; position: absolute; width: 34%; inset: 0 auto 0 0; opacity: .55; background: repeating-linear-gradient(90deg, transparent 0 14%, rgba(217,174,88,.06) 14.5% 15%); }
.portrait-frame { position: relative; z-index: 2; max-width: 560px; padding: 16px; border: 1px solid #6e5128; background: #18120e; box-shadow: 0 45px 80px rgba(0,0,0,.6), 0 0 80px rgba(188,119,33,.08); }
.portrait-frame::before { content: ''; position: absolute; inset: -18px; z-index: -1; border: 1px solid rgba(217,174,88,.25); }
.portrait-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; filter: sepia(.17) saturate(.83) contrast(1.06); }
.portrait-frame p { margin: 12px 0 0; color: #8f806a; font-size: 10px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.portrait-corner { width: 60px; height: 60px; position: absolute; z-index: 3; border-color: var(--gold); border-style: solid; pointer-events: none; }.corner-a { top: 7px; left: 7px; border-width: 2px 0 0 2px; }.corner-b { right: 7px; bottom: 38px; border-width: 0 2px 2px 0; }
.portrait-copy { max-width: 680px; }
.portrait-copy h2 em { color: var(--gold); font-style: italic; }
.portrait-copy blockquote { margin: 42px 0 34px; padding-left: 30px; border-left: 1px solid var(--gold); color: #eee2c9; font-family: var(--display); font-size: clamp(26px,2.4vw,38px); line-height: 1.3; }
.portrait-copy > p { color: #b9ad98; }
.material-note { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.material-note span, .material-note strong { display: block; }.material-note span { color: #8f816c; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }.material-note strong { margin-top: 5px; color: #d9caaa; font-size: 15px; font-weight: 500; }

.archive-section { padding: 160px clamp(24px,6vw,96px) 190px; background: linear-gradient(180deg, #101b24, #0d171e); }
.archive-heading { max-width: 1350px; margin: 0 auto 85px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; }
.archive-heading > p { max-width: 520px; margin-bottom: 10px; color: #a99e8b; }
.history-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.history-card { min-width: 0; min-height: 520px; position: relative; overflow: hidden; padding: 40px 28px 34px; background: linear-gradient(180deg, rgba(255,255,255,.012), transparent 40%); transition: background .35s, transform .35s; }
.history-card::before { content: ''; width: 96px; height: 96px; position: absolute; top: 58px; left: calc(50% - 48px); border: 1px solid rgba(217,174,88,.12); border-radius: 50%; box-shadow: 0 0 0 14px rgba(217,174,88,.025), 0 0 0 29px rgba(217,174,88,.018); }
.history-card + .history-card { border-left: 1px solid var(--line); }
.history-card:hover { z-index: 2; transform: translateY(-12px); background: linear-gradient(160deg, #213744, #151f27); box-shadow: 0 28px 60px rgba(0,0,0,.32); }
.history-card .year { display: block; margin: 32px 0 14px; color: var(--gold); font-family: var(--display); font-size: 30px; }
.history-card h3 { color: #ebe0cc; font-family: var(--display); font-size: 25px; font-weight: 400; line-height: 1.15; }
.history-card p { color: #aba08d; font-size: 16px; line-height: 1.55; }
.history-card small { position: absolute; right: 28px; bottom: 28px; left: 28px; color: #756d61; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.card-mask { height: 125px; position: relative; z-index: 2; margin: 0 auto; opacity: .94; background: radial-gradient(circle at 36% 22%, #fff9e8, #d9cdb3 48%, #89795f); box-shadow: 0 22px 28px rgba(0,0,0,.35), inset 0 2px rgba(255,255,255,.45); }
.card-mask::after { content: ''; width: 58%; height: 1px; position: absolute; top: 20%; left: 21%; background: linear-gradient(90deg, transparent, #d9ae58, transparent); }
.card-mask i { width: 25%; height: 14px; position: absolute; top: 38%; border-radius: 50%; background: #101a22; }.card-mask i:first-child { left: 18%; transform: rotate(10deg); }.card-mask i:last-child { right: 18%; transform: rotate(-10deg); }
.bauta-mini { width: 145px; clip-path: polygon(5% 18%,50% 0,95% 18%,86% 78%,64% 100%,50% 86%,36% 100%,14% 78%); }
.medico-mini { width: 170px; clip-path: polygon(0 20%,35% 5%,60% 22%,100% 62%,54% 78%,34% 100%,15% 82%); }.medico-mini i { top: 30%; }
.volto-mini { width: 120px; border-radius: 49% 49% 42% 42%; clip-path: ellipse(48% 50%); }
.colombina-mini { width: 175px; height: 88px; margin-top: 18px; margin-bottom: 19px; clip-path: polygon(0 20%,30% 0,50% 18%,70% 0,100% 20%,85% 90%,55% 65%,50% 100%,45% 65%,15% 90%); }

.ethics-section { min-height: 900px; display: grid; grid-template-columns: .9fr 1.1fr .68fr; align-items: center; gap: clamp(35px, 6vw, 100px); padding: 140px clamp(24px, 7vw, 110px); background: linear-gradient(125deg, #2c0912, #4b0d1c 47%, #19070d); }
.ethics-emblem { width: min(100%, 420px); aspect-ratio: .82; position: relative; border: 1px solid rgba(217,174,88,.35); border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 30%, rgba(233,223,200,.09), transparent 40%); box-shadow: inset 0 0 80px rgba(0,0,0,.38); }
.ethics-emblem::before, .ethics-emblem::after { content: ''; position: absolute; inset: 9%; border: 1px solid rgba(217,174,88,.12); border-radius: inherit; }.ethics-emblem::after { inset: 18%; }
.emblem-eye { width: 29%; height: 9%; position: absolute; top: 39%; border: 1px solid var(--gold); border-radius: 50%; background: #080b0e; }.eye-left { left: 15%; transform: rotate(8deg); }.eye-right { right: 15%; transform: rotate(-8deg); }
.ethics-emblem i { width: 1px; height: 25%; position: absolute; top: 45%; left: 50%; background: linear-gradient(var(--gold), transparent); }
.ethics-copy { max-width: 700px; }.ethics-copy > p { color: #d3c4aa; }.ethics-copy .text-link { margin-top: 10px; }
.ethics-marginalia { align-self: end; margin-bottom: 40px; padding: 28px; border-top: 1px solid var(--gold); border-bottom: 1px solid rgba(217,174,88,.25); background: rgba(16,3,7,.2); }
.ethics-marginalia strong { display: block; margin-bottom: 12px; color: var(--gold-bright); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }.ethics-marginalia p { color: #e3d3b8; font-style: italic; line-height: 1.5; }.ethics-marginalia small { color: #a89077; line-height: 1.2; }

.visit-section { min-height: 620px; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; padding: 90px clamp(24px, 9vw, 145px); overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(217,174,88,.09), transparent 25%), #0b151c; }
.visit-section::before { content: '17'; position: absolute; right: -1vw; bottom: -12vw; color: rgba(217,174,88,.035); font-family: var(--display); font-size: 38vw; line-height: .8; }
.visit-copy { max-width: 620px; position: relative; z-index: 2; }.visit-copy > p:last-child { max-width: 530px; color: #a99e8b; }
.visit-details { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0 38px; border-top: 1px solid var(--line); }
.visit-details > div { min-height: 130px; padding: 25px 0; border-bottom: 1px solid var(--line); }.visit-details > div:nth-child(3) { grid-column: 1 / 3; }
.visit-details span { display: block; color: #7f7566; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }.visit-details strong { display: block; margin-top: 6px; color: #d7cbb5; font-size: 17px; font-weight: 500; line-height: 1.45; }.visit-details .button { grid-column: 1 / 3; justify-self: start; margin-top: 30px; }
.visit-sigil { width: 130px; height: 150px; position: absolute; right: 7%; bottom: 5%; display: grid; place-items: center; transform: rotate(-7deg); border: 1px solid rgba(217,174,88,.3); color: rgba(217,174,88,.35); clip-path: polygon(50% 0,100% 18%,92% 82%,50% 100%,8% 82%,0 18%); }.visit-sigil span { font-family: var(--display); font-size: 38px; }.visit-sigil small { position: absolute; bottom: 23px; font-size: 8px; line-height: 1.1; letter-spacing: .14em; text-align: center; text-transform: uppercase; }

.site-footer { min-height: 360px; position: relative; overflow: clip; padding: 65px clamp(24px, 6vw, 95px) 0; color: #9e9382; background: #080f15; }
.footer-content { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding-bottom: 66px; border-bottom: 1px solid rgba(111,171,187,.35); }
.footer-brand { color: #d9cdb5; font-family: var(--display); font-size: 32px; line-height: .8; text-decoration: none; }.footer-content > p { margin: 0; font-size: 12px; letter-spacing: .06em; }.site-footer nav { justify-self: end; display: flex; gap: 25px; }.site-footer nav a { font-size: 12px; }
.water-mirror { width: calc(100% + 2 * clamp(24px, 6vw, 95px)); height: 185px; position: relative; overflow: hidden; margin-left: calc(-1 * clamp(24px, 6vw, 95px)); perspective: 400px; background: linear-gradient(180deg, rgba(29,70,85,.48), #07131b 78%); }
.water-mirror::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 50% -20%, transparent 0 45px, rgba(101,171,185,.13) 47px 49px, transparent 52px 85px); animation: water-shift 10s linear infinite; }
.mirror-word { width: 100%; position: absolute; top: -18px; transform: scaleY(-1) rotateX(30deg); filter: blur(2px); color: rgba(217,174,88,.18); font-family: var(--display); font-size: clamp(72px, 13vw, 190px); line-height: 1; letter-spacing: .12em; text-align: center; }
.water-mirror i { width: 28%; height: 1px; position: absolute; top: 28%; background: linear-gradient(90deg,transparent,rgba(146,202,213,.35),transparent); animation: ripple 5s ease-in-out infinite; }.water-mirror i:nth-of-type(2) { top: 52%; left: 36%; animation-delay: -1.3s; }.water-mirror i:nth-of-type(3) { top: 72%; left: 7%; animation-delay: -2.8s; }.water-mirror i:nth-of-type(4) { top: 81%; right: 2%; animation-delay: -.7s; }

@keyframes load-in { to { opacity: 1; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes flame { from { transform: translateX(-50%) rotate(-4deg) scaleX(.9); } to { transform: translateX(-50%) rotate(6deg) scaleX(1.08); } }
@keyframes mask-breathe { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes plume-drift { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(2deg); } }
@keyframes draw-gold { from { opacity: 0; stroke-dasharray: 500; stroke-dashoffset: 500; } to { opacity: 1; stroke-dasharray: 500; stroke-dashoffset: 0; } }
@keyframes ripple { 0%,100% { transform: translateX(-10%) scaleX(.7); opacity: .2; } 50% { transform: translateX(60%) scaleX(1.3); opacity: .8; } }
@keyframes water-shift { to { transform: translateX(80px); } }

@media (max-width: 1100px) {
  :root { --header-h: 78px; }
  .site-header { grid-template-columns: 1fr auto; }.primary-nav { display: none; }
  .hero { min-height: 900px; grid-template-columns: 1.12fr .88fr; padding-left: 5vw; padding-right: 5vw; }
  .hero h1 { font-size: clamp(68px, 8.4vw, 92px); }.hero-vignette { width: 100%; }
  .maker-workbench { grid-template-columns: minmax(330px,.8fr) 1.2fr; }.mask-controls { padding: 34px 26px; }.mask-stage { min-height: 760px; }
  .history-grid { grid-template-columns: 1fr 1fr; }.history-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.history-card:nth-child(4) { border-top: 1px solid var(--line); }
  .ethics-section { grid-template-columns: .7fr 1.3fr; }.ethics-marginalia { grid-column: 2; margin-top: -80px; max-width: 440px; }.ethics-emblem { align-self: center; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
  .footer-content > p { justify-self: end; }
  .site-footer nav { grid-column: 1 / 3; justify-self: start; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  :root { --header-h: 72px; }
  body { font-size: 17px; }
  .site-header { position: absolute; padding: 0 18px; }.brand { font-size: 11px; }.brand-mark { width: 38px; }.tide-pill span:not(.tide-dot) { display: none; }
  .hero { height: auto; min-height: 850px; display: block; padding: 125px 20px 90px; background: radial-gradient(circle at 70% 30%, rgba(164,89,23,.22), transparent 34%), linear-gradient(135deg,#0b1219,#172832); }
  .hero::before { inset: var(--header-h) 0 0; border: 0; background: repeating-linear-gradient(90deg, transparent 0 24.8%, rgba(217,174,88,.035) 25% 25.3%); }.hero::after { width: 82%; height: 54%; opacity: .48; }
  .hero-copy { padding: 0; }.hero h1 { font-size: clamp(56px, 18.2vw, 72px); line-height: .82; }.hero-deck { max-width: 340px; font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 9px; }.hero-actions .button { width: 100%; max-width: 310px; }
  .hero-vignette { width: 188px; position: absolute; top: 422px; right: -34px; opacity: .38; }.hanging-mask { height: auto; }.candle, .hero-aside, .velvet-drape { display: none; }.scroll-cue { bottom: 24px; left: 20px; }
  .acqua-ticker { height: 42px; }.ticker-track { gap: 20px; font-size: 10px; animation-duration: 27s; }
  .maker-section { padding: 100px 15px 110px; }.maker-heading { margin-bottom: 50px; padding: 0 10px; }.maker-heading h2, .threshold-copy h2, .portrait-copy h2, .archive-heading h2, .ethics-copy h2, .visit-copy h2 { font-size: clamp(43px, 13vw, 58px); }.maker-heading h2 br { display: none; }
  .maker-workbench { display: flex; flex-direction: column-reverse; min-height: 0; }.mask-controls { border-top: 1px solid var(--line); border-right: 0; }.mask-stage { min-height: 510px; }.mask-svg { width: 108%; max-width: none; }.stage-inscription { top: 18px; left: 18px; }.gaze-note { right: 15px; bottom: 12px; }.commission-slip { right: 12px; bottom: 46px; }
  .mask-controls fieldset { margin-bottom: 27px; padding-bottom: 27px; }.segmented { gap: 6px; }.choice { min-height: 70px; padding: 10px; }.choice small { font-size: 11px; }.swatches { justify-content: space-between; gap: 8px; }.swatch { width: 42px; height: 42px; }.control-actions { flex-direction: column; align-items: stretch; }.reset-button { align-self: center; }
  .threshold-section { display: flex; flex-direction: column; min-height: 0; }.threshold-scene { min-height: 470px; }.threshold-copy { padding: 80px 24px 100px; }.door-frame { width: 58%; left: 21%; }.tide-ledger { margin-top: 36px; }.tide-ledger div + div { padding-left: 12px; }.tide-ledger dt { font-size: 21px; }
  .portrait-section { min-height: 0; display: flex; flex-direction: column; padding: 105px 24px; gap: 80px; }.portrait-frame { width: 90%; }.portrait-copy blockquote { padding-left: 20px; font-size: 26px; }
  .archive-section { padding: 110px 15px 120px; }.archive-heading { display: block; margin-bottom: 55px; padding: 0 10px; }.archive-heading > p { margin-top: 30px; }.history-grid { display: block; }.history-card { min-height: 450px; padding: 35px 25px; border-left: 0 !important; border-top: 1px solid var(--line); }.history-card:first-child { border-top: 0; }.history-card:hover { transform: none; }
  .ethics-section { min-height: 0; display: flex; flex-direction: column; padding: 110px 24px; }.ethics-emblem { width: 72%; order: 2; }.ethics-copy { order: 1; }.ethics-marginalia { order: 3; margin: 20px 0 0; }.ethics-copy h2 br { display: none; }
  .visit-section { min-height: 0; display: block; padding: 105px 24px 120px; }.visit-details { grid-template-columns: 1fr; margin-top: 50px; }.visit-details > div:nth-child(3), .visit-details .button { grid-column: 1; }.visit-details .button { width: 100%; }.visit-sigil { opacity: .35; }
  .site-footer { min-height: 570px; padding: 70px 24px 0; }.footer-content { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding-bottom: 50px; }.footer-content > p { order: 3; }.site-footer nav { display: flex; flex-direction: column; gap: 4px; }.site-footer nav a { min-height: 44px; display: flex; align-items: center; padding: 8px 0; }.water-mirror { width: calc(100% + 48px); height: 190px; margin: 0 -24px; }.mirror-word { font-size: 20vw; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker-track { animation: none !important; }
  .load-reveal, .reveal { opacity: 1; transform: none; }
}

/* Pass 2 — the atelier watches back. */
.nav-toggle { display: none; }
.hero-eye-socket { fill: #05090c; stroke: rgba(217,174,88,.38); stroke-width: 2; }
.hero-watchers { transform: translate(var(--hero-eye-x, 0px), var(--hero-eye-y, 0px)); transition: transform .14s cubic-bezier(.16,.8,.2,1); }
.hero-watchers ellipse { fill: #b9ad94; }
.hero-watchers .hero-iris { fill: #6f192a; stroke: #d9ae58; stroke-width: 2; }
.hero-watchers .hero-pupil { fill: #020304; }
.hero-watchers .hero-glint { fill: #fff0b1; }
.hero-mouth { fill: none; stroke: #792034; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgba(31,5,10,.7)); }
.hanging-mask { transform-origin: 50% 18%; }
.watch-seal { position: absolute; z-index: 6; right: -9%; top: 15%; width: 146px; aspect-ratio: 1; display: grid; place-content: center; padding: 24px; transform: rotate(8deg); border: 1px solid rgba(217,174,88,.34); border-radius: 50%; color: #a99b83; background: radial-gradient(circle,rgba(7,13,18,.86),rgba(7,13,18,.25) 65%,transparent 66%); text-align: center; }
.watch-seal::before, .watch-seal::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(217,174,88,.16); border-radius: inherit; }
.watch-seal::after { inset: 18px; border-style: dashed; }
.watch-seal span, .watch-seal strong { position: relative; z-index: 1; display: block; }
.watch-seal span { color: var(--gold-bright); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
.watch-seal strong { margin-top: 8px; color: #c8bda8; font-size: 12px; font-style: italic; font-weight: 400; line-height: 1.15; }

.maker-section { padding-top: 125px; background: radial-gradient(circle at 72% 43%, rgba(172,107,34,.095), transparent 24rem), linear-gradient(180deg,#0d1922,#13242e 58%,#09131a); }
.maker-heading { max-width: 1400px; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr); align-items: end; gap: clamp(48px,8vw,130px); margin-bottom: 68px; text-align: left; }
.maker-heading h2 { margin-bottom: 0; }
.maker-preface { max-width: 570px; padding: 30px 0 4px 30px; border-left: 1px solid var(--gold); }
.maker-preface > p { margin-bottom: 28px; color: #c9bda6; font-size: 20px; line-height: 1.5; }
.maker-preface dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.maker-preface dl div { min-width: 0; }
.maker-preface dt { color: #766d61; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.maker-preface dd { margin: 5px 0 0; color: #cfc1a8; font-size: 13px; line-height: 1.25; }
.maker-workbench { grid-template-columns: minmax(380px,.68fr) minmax(560px,1.32fr); min-height: 820px; border-color: rgba(221,177,87,.34); box-shadow: 0 65px 120px rgba(0,0,0,.48), 0 0 0 10px rgba(7,14,19,.62), 0 0 0 11px rgba(217,174,88,.08); }
.mask-controls { position: relative; z-index: 5; }
.mask-controls::before { content: 'FORME / 04'; position: absolute; right: 22px; top: 18px; color: rgba(217,174,88,.28); font-size: 8px; letter-spacing: .18em; }
.mask-stage { background: radial-gradient(circle at var(--halo-x,19%) var(--halo-y,25%), rgba(223,150,55,.16), transparent 17%), radial-gradient(ellipse at 52% 37%, #263943 0%, #101c24 52%, #050b10 100%); }
.mask-stage::before { inset: 7%; border-radius: 48% 48% 1px 1px; box-shadow: inset 0 0 90px rgba(0,0,0,.35); }
.stage-depth-rings { position: absolute; z-index: 1; width: min(72%,590px); aspect-ratio: 1; border: 1px solid rgba(217,174,88,.09); border-radius: 50%; }
.stage-depth-rings i { position: absolute; inset: 12%; border: 1px solid rgba(217,174,88,.075); border-radius: 50%; }
.stage-depth-rings i:nth-child(2) { inset: 24%; }
.stage-depth-rings i:nth-child(3) { inset: 36%; }
.mask-svg { filter: saturate(.93) contrast(1.04); }
.watcher-sclera { fill: #c8bca3; }
.watcher-iris { fill: #671828; stroke: #e1b860; stroke-width: 4; }
.watcher-pupil { fill: #020304; }
.watcher-iris, .watcher-pupil, .watcher-glint, .hero-iris, .hero-pupil, .hero-glint { transform-box: fill-box; transform-origin: center; animation: involuntary-glance 7.2s cubic-bezier(.62,0,.35,1) infinite; }
.gaze-note { color: #b2a58f; letter-spacing: .03em; }

.threshold-section { background: linear-gradient(90deg,#060c10 0 53%,#0c1820 53%); }
.threshold-copy { position: relative; }
.threshold-copy::before { content: 'ACQUA'; position: absolute; right: -2vw; top: 4%; color: rgba(116,177,191,.045); font-family: var(--display); font-size: clamp(80px,11vw,165px); writing-mode: vertical-rl; }
.flood-plane { top: var(--flood-top,62%); transition: top 1.8s cubic-bezier(.16,.7,.2,1); }
.door-frame { transform: translateY(var(--door-sink,0px)); transition: transform 1.8s cubic-bezier(.16,.7,.2,1); }

.archive-section { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 18%,rgba(127,86,39,.08),transparent 25rem),linear-gradient(180deg,#101c25,#0a141b); }
.archive-section::before { content: 'CATALOGO DEI VOLTI'; position: absolute; left: 5vw; bottom: 40px; color: rgba(230,215,185,.028); font-family: var(--display); font-size: clamp(70px,10vw,150px); letter-spacing: .08em; white-space: nowrap; }
.history-grid { align-items: start; gap: 18px; border: 0; }
.history-card { min-height: 560px; border: 1px solid rgba(217,174,88,.19); background: linear-gradient(160deg,rgba(43,63,73,.33),rgba(5,10,14,.3)); box-shadow: 0 26px 50px rgba(0,0,0,.14); }
.history-card + .history-card { border-left: 1px solid rgba(217,174,88,.19); }
.history-card:nth-child(2), .history-card:nth-child(4) { margin-top: 62px; }
.history-card:nth-child(3) { margin-top: 18px; }
.history-card::after { content: attr(data-folio); position: absolute; right: 18px; top: 16px; color: rgba(217,174,88,.42); font-size: 9px; letter-spacing: .15em; }
.history-card:hover { transform: translateY(-8px) rotate(.35deg); }

.ethics-section { position: relative; min-height: 820px; grid-template-columns: .78fr 1.24fr .72fr; overflow: hidden; background: radial-gradient(circle at 18% 42%,rgba(225,184,99,.09),transparent 19rem),linear-gradient(112deg,#24070e,#5b0c20 48%,#19060b); }
.ethics-section::before { content: 'CLAUSE VII'; position: absolute; right: -2vw; bottom: -1.5vw; color: rgba(245,224,183,.032); font-family: var(--display); font-size: clamp(92px,14vw,220px); white-space: nowrap; }
.ethics-emblem { transform: rotate(-4deg); background: radial-gradient(circle at 50% 39%,rgba(233,223,200,.12),transparent 34%),rgba(22,3,8,.16); box-shadow: inset 0 0 100px rgba(0,0,0,.48), 0 35px 75px rgba(0,0,0,.2); }
.ethics-copy h2 { font-size: clamp(58px,6.2vw,94px); }
.ethics-marginalia { transform: translateY(42px); }

.visit-section { background: radial-gradient(circle at 82% 10%,rgba(217,174,88,.11),transparent 28rem),linear-gradient(135deg,#08131a,#10232d 64%,#071016); }
.footer-content { min-height: 92px; }
.water-mirror { height: 205px; background: linear-gradient(180deg,rgba(34,83,99,.58),#06151e 78%); }
.mirror-word { color: rgba(223,183,95,.22); }

.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

@keyframes involuntary-glance {
  0%, 42%, 100% { transform: translate(0); }
  46%, 54% { transform: translate(-4px,1px); }
  59%, 67% { transform: translate(4px,-1px); }
  72% { transform: translate(0); }
}

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto auto; column-gap: 17px; }
  .nav-toggle { min-width: 72px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 2px; border: 0; color: #d9cdb8; background: transparent; cursor: pointer; }
  .nav-toggle > span { width: 19px; display: grid; gap: 5px; }
  .nav-toggle i { height: 1px; display: block; background: var(--gold); transition: transform .3s, width .3s; }
  .nav-toggle i:last-child { width: 12px; justify-self: end; }
  .nav-toggle b { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
  .nav-toggle[aria-expanded='true'] i:first-child { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] i:last-child { width: 19px; transform: translateY(-3px) rotate(-45deg); }
  .primary-nav { position: absolute; top: calc(var(--header-h) - 1px); right: 22px; min-width: 230px; display: grid; gap: 0; padding: 12px 22px 16px; transform: translateY(-9px); opacity: 0; visibility: hidden; pointer-events: none; border: 1px solid rgba(217,174,88,.28); background: rgba(7,14,19,.96); box-shadow: 0 24px 60px rgba(0,0,0,.5); transition: opacity .25s, transform .3s, visibility .3s; }
  .primary-nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .primary-nav a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(217,174,88,.13); }
  .primary-nav a:last-child { border-bottom: 0; }
  .maker-heading { grid-template-columns: 1.05fr .95fr; gap: 45px; }
  .maker-preface { padding-left: 22px; }
  .maker-preface dl { grid-template-columns: 1fr; gap: 10px; }
  .maker-preface dl div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
  .maker-preface dd { margin-top: 0; }
  .maker-workbench { grid-template-columns: minmax(330px,.78fr) minmax(0,1.22fr); }
  .watch-seal { display: none; }
  .history-card:nth-child(2), .history-card:nth-child(4) { margin-top: 34px; }
  .history-card:nth-child(3) { margin-top: 0; }
}

@media (max-width: 760px) {
  .site-header { column-gap: 9px; }
  .nav-toggle { min-width: 48px; }
  .nav-toggle b { display: none; }
  .primary-nav { right: 14px; left: 14px; min-width: 0; }
  .hero { min-height: 900px; padding-top: 122px; }
  .hero h1 { max-width: 350px; font-size: clamp(56px,17.7vw,69px); letter-spacing: -.045em; }
  .hero-deck { max-width: 315px; color: #d4c7af; }
  .hero-vignette { width: 224px; top: 432px; right: -60px; opacity: .34; }
  .maker-section { padding-top: 92px; }
  .maker-heading { display: block; text-align: left; }
  .maker-heading h2 br { display: block; }
  .maker-preface { margin-top: 32px; padding: 24px 0 0; border-top: 1px solid var(--gold); border-left: 0; }
  .maker-preface > p { font-size: 18px; }
  .maker-preface dl { grid-template-columns: 1fr; }
  .maker-preface dl div { grid-template-columns: 92px 1fr; }
  .mask-stage { min-height: 540px; }
  .stage-depth-rings { width: 88%; }
  .gaze-note { max-width: 180px; text-align: right; line-height: 1.2; }
  .threshold-copy::before { display: none; }
  .history-grid { display: grid; grid-template-columns: 1fr; gap: 14px; border: 0; }
  .history-card, .history-card:nth-child(2), .history-card:nth-child(3), .history-card:nth-child(4) { min-height: 430px; margin-top: 0; border: 1px solid rgba(217,174,88,.2) !important; }
  .ethics-copy h2 { font-size: clamp(45px,13vw,58px); }
  .ethics-emblem { transform: rotate(-3deg); }
  .water-mirror { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .watcher-iris, .watcher-pupil, .watcher-glint, .hero-iris, .hero-pupil, .hero-glint { animation: none !important; }
  .reveal { transform: none; filter: none; }
}

/* Pass 3 — art direction: the commissioned plate becomes a room, the threshold answers. */
html { scrollbar-color: #8e6c32 #071017; scrollbar-width: thin; }
body { font-kerning: normal; font-optical-sizing: auto; font-variant-ligatures: common-ligatures discretionary-ligatures; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #071017; }
body::-webkit-scrollbar-thumb { border: 3px solid #071017; border-radius: 20px; background: linear-gradient(#c89c48,#644719); }
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }
.tide-pill, .ticker-track, .tide-ledger, .stage-inscription, .portrait-plate, .history-card::after { font-variant-numeric: tabular-nums lining-nums; }
.button, .choice, .swatch, .toggle-row, .reset-button, .threshold-bell { transition-timing-function: cubic-bezier(.16,1,.3,1); }
.choice:focus-visible, .swatch:focus-visible, .toggle-row:focus-visible, .reset-button:focus-visible, .threshold-bell:focus-visible { outline-color: #f5d77f; box-shadow: 0 0 0 5px rgba(217,174,88,.13); }

.load-reveal { filter: blur(7px); animation-name: atelier-arrival; animation-duration: 1.05s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.hero-vignette.load-reveal { animation-name: vigil-arrival; }
.hanging-mask { filter: saturate(.76) contrast(1.07) drop-shadow(0 38px 34px rgba(0,0,0,.36)); }
.hero-gilt-crown { filter: drop-shadow(0 3px 2px rgba(63,31,4,.45)); }
.hero-patina { fill: none; stroke: rgba(91,69,44,.37); stroke-width: 1.5; stroke-linecap: round; }
.hero-eye-socket { stroke-width: 3; filter: drop-shadow(0 3px 2px rgba(0,0,0,.6)); }
.hero-watchers ellipse { fill: #a99d85; }
.hero-watchers .hero-iris { fill: #390711; stroke: #c59641; stroke-width: 2.4; }
.hero-watchers .hero-pupil { fill: #010203; }
.hero-mouth { stroke: #5e1726; stroke-width: 4.5; opacity: .85; }
.hero-filigree { stroke: #956522; stroke-width: 2.6; opacity: .76; }

.threshold-scene { perspective: 1000px; }
.door-frame { overflow: visible; isolation: isolate; background: radial-gradient(circle at 50% 42%,#60421c 0,#17100c 42%,#050708 78%); transform-style: preserve-3d; }
.door-answer { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding-bottom: 10%; opacity: .22; background: radial-gradient(circle at 50% 38%,rgba(238,183,78,.3),transparent 34%),#07090a; transition: opacity .9s cubic-bezier(.16,1,.3,1), filter .9s; filter: saturate(.45); }
.door-answer svg { width: 62%; overflow: visible; transform: translateY(18px) scale(.88); filter: drop-shadow(0 28px 22px #000); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.door-mask-shell { fill: radial-gradient(circle at 35% 20%,#fff6dd,#c6b38d); fill: #d9ccb0; stroke: #b88738; stroke-width: 1.2; }
.door-mask-eye { fill: #020405; stroke: #a87931; stroke-width: 2; }
.door-watchers { fill: #561122; transform: translate(var(--door-eye-x,0px),var(--door-eye-y,0px)); transition: transform .16s ease-out; }
.door-mask-gilt { fill: none; stroke: #c99841; stroke-width: 3; stroke-linecap: round; }
.door-mask-seam { fill: none; stroke: #6f192b; stroke-width: 4; stroke-linecap: round; }
.door-answer p { position: absolute; right: 0; bottom: 5%; left: 0; margin: 0; text-align: center; }
.door-answer span, .door-answer strong { display: block; }
.door-answer span { color: #9c8159; font-size: 8px; letter-spacing: .19em; text-transform: uppercase; }
.door-answer strong { margin-top: 3px; color: #d9c9aa; font-family: var(--display); font-size: clamp(13px,1.3vw,19px); font-weight: 400; }
.door-leaves { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.door-leaves i { width: 50.4%; position: absolute; inset: 0 auto 0 0; border-right: 1px solid rgba(217,174,88,.3); background: linear-gradient(92deg,#19070b,#5f1627 54%,#260910),repeating-linear-gradient(90deg,transparent 0 31%,rgba(255,255,255,.04) 32%); box-shadow: inset -18px 0 30px rgba(0,0,0,.4); transition: transform 1.15s cubic-bezier(.76,0,.18,1); }
.door-leaves i:last-child { right: 0; left: auto; transform-origin: right; border-right: 0; border-left: 1px solid rgba(217,174,88,.3); background: linear-gradient(268deg,#19070b,#5f1627 54%,#260910); box-shadow: inset 18px 0 30px rgba(0,0,0,.4); }
.door-number { z-index: 4; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .5s; }
.threshold-section.is-summoned .door-leaves i:first-child { transform: translateX(-92%) skewY(1deg); }
.threshold-section.is-summoned .door-leaves i:last-child { transform: translateX(92%) skewY(-1deg); }
.threshold-section.is-summoned .door-number { transform: translateY(-12px) scale(.82); opacity: .2; }
.threshold-section.is-summoned .door-answer { opacity: 1; filter: none; }
.threshold-section.is-summoned .door-answer svg { transform: translateY(0) scale(1); }
.threshold-section.is-summoned .flood-plane::before { opacity: .68; animation-duration: 4.8s; }
.threshold-bell { width: min(100%,390px); min-height: 66px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 16px; margin-top: 30px; padding: 9px 18px 9px 8px; border: 1px solid rgba(217,174,88,.34); cursor: pointer; color: #dbcdb2; background: linear-gradient(90deg,rgba(217,174,88,.08),transparent); text-align: left; transition: border-color .35s, background .35s, transform .35s; }
.threshold-bell:hover { transform: translateX(5px); border-color: #d9ae58; background: linear-gradient(90deg,rgba(217,174,88,.17),transparent); }
.threshold-bell > span:last-child { display: grid; }
.threshold-bell small { color: #887c68; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.threshold-bell strong { color: #e4d7bd; font-family: var(--display); font-size: 17px; font-weight: 400; letter-spacing: .03em; }
.bell-glyph { width: 48px; height: 48px; position: relative; display: block; border: 1px solid rgba(217,174,88,.3); border-radius: 50%; }
.bell-glyph::before { content: ''; width: 18px; height: 20px; position: absolute; top: 11px; left: 14px; border: 1px solid #d9ae58; border-radius: 50% 50% 20% 20%; background: linear-gradient(90deg,#72501e,#e5bd63,#72501e); clip-path: polygon(20% 0,80% 0,100% 78%,92% 86%,8% 86%,0 78%); }
.bell-glyph::after { content: ''; width: 5px; height: 5px; position: absolute; left: 21px; bottom: 9px; border-radius: 50%; background: #efd07e; }
.bell-glyph i { width: 1px; height: 7px; position: absolute; top: 5px; left: 23px; background: #d9ae58; }
.threshold-section.is-summoned .bell-glyph { animation: bell-ring .72s cubic-bezier(.36,.07,.19,.97); }
.bell-response { max-width: 390px; margin: 10px 0 0; color: #817666 !important; font-size: 12px; font-style: italic; }

.portrait-section { min-height: 1040px; grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: linear-gradient(112deg,#130f0e,#2c171b 58%,#0b0c0e); }
.portrait-section::before { width: 56%; z-index: 2; pointer-events: none; background: linear-gradient(90deg,rgba(6,7,8,.25),transparent 18%,transparent 74%,rgba(17,10,11,.8)),repeating-linear-gradient(90deg,transparent 0 12%,rgba(217,174,88,.035) 12.2% 12.4%); }
.portrait-frame { width: 100%; max-width: none; min-height: 1040px; height: 100%; overflow: hidden; padding: 0; border: 0; background: #0a0807; box-shadow: 50px 0 90px rgba(0,0,0,.54); }
.portrait-frame::before { inset: 18px; z-index: 5; border-color: rgba(217,174,88,.42); pointer-events: none; }
.portrait-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.08),transparent 45%,rgba(5,4,3,.82)),radial-gradient(circle at 52% 37%,transparent 25%,rgba(3,2,2,.52) 90%); }
.portrait-frame img { width: 100%; height: 100%; min-height: 1040px; aspect-ratio: auto; object-fit: cover; object-position: center 38%; filter: sepia(.13) saturate(.76) contrast(1.12) brightness(.82); transform: scale(1.035); transition: transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.8s; }
.portrait-frame.is-visible img { transform: scale(1); filter: sepia(.11) saturate(.82) contrast(1.1) brightness(.9); }
.portrait-veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.portrait-veil i { width: 16%; position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,#160309,#5a1021 64%,rgba(39,5,13,.8)); box-shadow: 22px 0 42px rgba(0,0,0,.38),inset -8px 0 rgba(255,255,255,.025); transition: transform 1.5s .18s cubic-bezier(.76,0,.18,1); }
.portrait-veil i:last-child { right: 0; left: auto; transform: scaleX(-1); }
.portrait-frame.is-visible .portrait-veil i:first-child { transform: translateX(-52%); }
.portrait-frame.is-visible .portrait-veil i:last-child { transform: scaleX(-1) translateX(-52%); }
.portrait-plate { position: absolute; z-index: 6; right: 38px; bottom: 34px; left: 38px; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(217,174,88,.5); }
.portrait-plate p, .portrait-plate span { margin: 0; color: #b4a284; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.portrait-plate span { color: #d7bd7d; text-align: right; }
.portrait-copy { max-width: none; position: relative; z-index: 4; align-self: center; margin-left: -72px; padding: 92px clamp(42px,6vw,100px) 92px clamp(58px,7vw,112px); border-left: 1px solid rgba(217,174,88,.48); background: linear-gradient(100deg,rgba(19,10,11,.95),rgba(25,17,18,.88) 68%,rgba(16,13,14,.6)); box-shadow: -30px 35px 90px rgba(0,0,0,.42); backdrop-filter: blur(12px); }
.portrait-copy::before { content: 'THE HAND / 094'; position: absolute; top: 28px; right: 32px; color: rgba(217,174,88,.33); font-size: 8px; letter-spacing: .2em; }
.portrait-copy blockquote { margin-top: 50px; font-size: clamp(28px,2.5vw,42px); }

@keyframes atelier-arrival { from { opacity: 0; transform: translateY(30px); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vigil-arrival { from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bell-ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(9deg); } 40% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } }

@media (max-width: 1100px) {
  .portrait-section { min-height: 900px; grid-template-columns: minmax(0,1.02fr) minmax(390px,.98fr); }
  .portrait-frame, .portrait-frame img { min-height: 900px; }
  .portrait-copy { margin-left: -42px; padding: 72px 42px 72px 62px; }
  .portrait-plate { right: 26px; bottom: 26px; left: 26px; }
}

@media (max-width: 760px) {
  .hero-vignette { width: 174px; top: 586px; right: 10px; opacity: .56; }
  .hero-vignette::before { content: ''; position: absolute; inset: 10% -18% 4%; z-index: -1; border-radius: 50%; background: rgba(218,161,67,.08); filter: blur(24px); }
  .hero-filigree { stroke-width: 3.4; }
  .threshold-bell { width: 100%; min-height: 68px; }
  .door-answer svg { width: 70%; }
  .portrait-section { min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; }
  .portrait-frame { width: 100%; min-height: 650px; height: 650px; }
  .portrait-frame img { height: 650px; min-height: 650px; object-position: center 34%; }
  .portrait-frame::before { inset: 12px; }
  .portrait-plate { right: 22px; bottom: 20px; left: 22px; display: grid; gap: 6px; }
  .portrait-plate span { text-align: left; }
  .portrait-copy { margin: 0; padding: 92px 24px 105px; border-top: 1px solid rgba(217,174,88,.42); border-left: 0; background: linear-gradient(155deg,#211315,#100f10); box-shadow: none; backdrop-filter: none; }
  .portrait-copy::before { top: 34px; right: 24px; }
  .portrait-copy blockquote { margin-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .load-reveal { filter: none; }
  .portrait-frame img { transform: none; filter: sepia(.11) saturate(.82) contrast(1.1) brightness(.9); }
  .portrait-veil i:first-child { transform: translateX(-52%); }
  .portrait-veil i:last-child { transform: scaleX(-1) translateX(-52%); }
  .door-leaves i, .door-answer svg { transition: none; }
}