@font-face {
  font-family: Medeo;
  src: url("assets/fonts/MedeoSansVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #fafafa;
  --ink: #211d22;
  --pink: #ff70be;
  --berry: #94245e;
  --muted: #5f575d;
  --blush: #fbe6f0;
  --white: #fff;
  --pad: max(clamp(20px,5vw,82px), calc((100vw - 1440px)/2));
  --gap: clamp(64px,7vw,124px);
  --grid: url("assets/media/notebook.svg");
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:18px }
body { margin:0; color:var(--ink); background:var(--paper) var(--grid); font:440 18px/1.46 Medeo,Arial,sans-serif }
h1,h2,h3,p,figure,blockquote,dl,dd { margin:0 }
h1,h2,h3 { font-weight:820; line-height:.98; letter-spacing:-.052em }
h2 { font-size:clamp(44px,5.3vw,88px) }
h3 { font-size:clamp(27px,2.7vw,44px) }
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
button { color:inherit; font:inherit; cursor:pointer }
a:focus-visible,button:focus-visible,video:focus-visible,.collection-window:focus-visible { outline:3px solid var(--berry); outline-offset:4px }
[hidden] { display:none!important }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);white-space:nowrap }
.skip:focus { position:fixed; z-index:5; background:var(--white); padding:12px }
.wrap,.stage,.mast { padding-inline:var(--pad) }
.mast,footer,.brand,.mast nav,.back-top { display:flex; align-items:center }
.mast,footer { justify-content:space-between }
.mast { min-height:84px; gap:24px }
.brand { gap:10px; font-weight:800; font-size:20px; letter-spacing:-.04em }
.avatar { width:38px; aspect-ratio:1; object-fit:cover; object-position:50% 18%; border-radius:50%; filter:grayscale(1) }
.mast nav { gap:clamp(15px,2.6vw,42px) }
.mast nav a,footer a { padding-block:9px }
.mast nav a { font-size:16px; font-weight:570 }
.mast nav a:hover,.menu a:hover,.review-link:hover,.back-top:hover { color:var(--berry); text-decoration:underline; text-underline-offset:4px }
.stage { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:4%; padding-block:clamp(38px,4vw,68px) clamp(48px,6vw,100px) }
.intro { min-width:0 }
.intro h1 { font-size:clamp(58px,8.65vw,145px); line-height:.88; font-weight:860; letter-spacing:-.035em }
.lead { margin-top:clamp(28px,2.5vw,44px); max-width:34ch; font-size:clamp(20px,1.8vw,28px); line-height:1.28; letter-spacing:-.022em }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 22px; color:var(--ink); background:var(--pink); font-size:17px; font-weight:710; transition:transform .2s var(--ease) }
.button:hover { transform:translateY(-3px) }.button:active { transform:translateY(1px) }
.intro .button { margin-top:26px }
.icon { width:23px; height:23px; flex:none }
.prints { position:relative; padding:1% 12% 4% 2%; min-width:0 }
.identity,.snapshot { background:var(--white); padding:9px; text-align:center }
.identity { transform:rotate(3deg); position:relative }
.identity::before { content:""; position:absolute; top:-9px; left:32%; width:35%; height:24px; z-index:1; background:#ff9dcddb; transform:rotate(-5deg); clip-path:polygon(1% 0,100% 3%,98% 24%,100% 40%,98% 64%,100% 90%,1% 100%,2% 74%,0 55%,2% 29%) }
.identity img { width:100%; aspect-ratio:1.04; object-fit:cover; object-position:50% 47% }
.identity figcaption,.snapshot span { display:block; padding:7px 0 1px; font:italic 18px/1.25 Georgia,"Times New Roman",serif }
.snapshot { position:absolute; right:0; bottom:-3%; width:33%; transform:rotate(-9deg); transition:transform .25s var(--ease) }
.snapshot:hover,.snapshot:focus-visible { transform:rotate(-3deg) translateY(-3px) }
.snapshot img { width:100%; aspect-ratio:1.2; object-fit:cover; object-position:50% 35%; filter:grayscale(1) }
.snapshot span { font-size:clamp(14px,1.4vw,20px); white-space:nowrap }
.ribbon { position:relative; margin-block:6px; background:var(--ink); color:var(--paper); padding-block:clamp(12px,1.6vw,28px) }
.ribbon::before,.ribbon::after { content:""; position:absolute; inset-inline:0; height:10px; background:url("assets/media/paper-edge.svg") repeat-x left bottom }
.ribbon::before { bottom:calc(100% - 1px) }.ribbon::after { top:calc(100% - 1px); transform:rotate(180deg) }
.service-marquee { display:flex; overflow:clip }
.service-marquee span { flex:none; white-space:pre; font-size:clamp(24px,3.1vw,52px); line-height:1.1; text-transform:uppercase; font-weight:870; letter-spacing:-.04em }

.archive,.services,.live,.contact { padding-block:var(--gap) }
.archive-head { display:flex; align-items:center; justify-content:flex-start; gap:clamp(20px,4vw,68px); margin-bottom:32px }
.collection-window { min-width:0 }
.is-carousel .collection-window { overflow:clip; touch-action:pan-y pinch-zoom }
.is-carousel .collection-track { display:flex; align-items:flex-start; transform:translateX(calc(var(--slide,0) * -100%)); transition:transform .32s var(--ease) }
.collection-slide { display:grid; grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr); align-items:center; gap:clamp(24px,4vw,68px); min-width:0; background:var(--white); padding:clamp(18px,2.4vw,40px) }
.is-carousel .collection-slide { flex:0 0 100% }
.nav-demo:not(.is-carousel) .collection-slide+.collection-slide { margin-top:30px }
.story-art { position:relative; overflow:hidden }
.story-art img { width:100%; aspect-ratio:1; object-fit:cover; pointer-events:none }
.story-gesture { position:absolute; inset-inline:0; top:38%; transform:translateY(-38%); aspect-ratio:1; pointer-events:none; background-size:500% 100%; background-repeat:no-repeat }
.art-name { position:absolute; left:14px; bottom:15px; padding:4px 14px; background:var(--paper); transform:rotate(-4deg); font:italic 22px Georgia,serif }
.story-copy { min-width:0 }
.story-copy h3 { font-size:clamp(32px,3.5vw,60px) }
.story-byline { display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--muted); font-size:16px }
.menu-glyph,.menu-glyph svg { width:22px; height:22px; display:block }
.menu-glyph svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.story-copy dl { margin-top:22px; max-width:54ch }
.story-copy dt { margin-top:14px; font-size:16px; font-weight:750 }
.story-copy dd { margin-top:3px }
.pullquote,.agata-quote { margin-top:22px; padding:16px 20px; background:var(--blush) }
.pullquote blockquote,.agata-quote { font:italic clamp(20px,1.5vw,24px)/1.3 Georgia,serif }
.pullquote figcaption,.agata-quote cite { display:inline-block; margin:9px 12px 0 0; color:var(--muted); font:500 16px/1.4 Medeo,sans-serif }
.agata-quote cite { display:block }
.review-link,.menu a { font-size:16px; font-weight:700; text-decoration:underline; text-underline-offset:4px }
.collection-controls,.collection-dots,.collection-dots button { display:flex; align-items:center; gap:6px }
.collection-controls button { padding:0; border:0; background:transparent }
.collection-controls>button { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--white) }
.collection-controls button:disabled { opacity:.4; cursor:default }
.collection-controls .arrow-left { transform:rotate(90deg) }.collection-controls .arrow-right { transform:rotate(-90deg) }
.collection-dots button { min-height:44px; padding:6px 8px; font-size:16px }
.collection-dots span { width:5px; height:5px; border-radius:5px; background:var(--muted); transition:width .22s }
.collection-dots [aria-current] { font-weight:750 }.collection-dots [aria-current] span { width:15px; background:var(--berry) }
.collection-controls button:not(:disabled):hover { color:var(--berry) }.collection-controls>button:not(:disabled):hover { background:var(--pink);color:var(--ink) }
.services { background:var(--blush); display:grid; grid-template-columns:1fr 1.1fr; gap:7vw }
.aside p,.session-intro>p,.stub p { margin-top:24px; max-width:38ch }
.menu { display:grid; gap:80px }
.menu h3 { display:flex; align-items:center; gap:12px }
.tool-icon { width:.85em; height:.85em; color:var(--berry) }
.menu p { margin:12px 0; max-width:53ch }
.menu a { display:inline-block; padding-block:3px }
.live { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:7vw }
.session-intro h2 { display:flex; align-items:center; gap:.24em; font-size:clamp(34px,4.6vw,78px) }
.count { font-size:2.2em; line-height:.75; color:var(--berry) }
.selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:32px }
.selector button { display:block; text-align:left; font-size:16px; font-weight:630; line-height:1.22; padding:6px 6px 9px; border:0; background:var(--white); transition:transform .2s }
.selector button:hover { transform:translateY(-3px) }
.selector [aria-pressed="true"] { background:var(--pink) }
.selector img { width:100%; aspect-ratio:1.45; object-fit:cover; margin-bottom:9px }
.selector small { display:block; margin-top:3px; font-size:14px }
.play-icon { width:12px; height:12px; vertical-align:middle }
.viewer figure { max-width:580px; margin-inline:auto; background:var(--white); padding:9px }
.viewer figure+figure { margin-top:22px }.enhanced .viewer figure { margin-top:0 }
.viewer figure>img,.viewer video { display:block; width:100%; height:clamp(360px,34vw,540px); object-fit:cover }
.viewer video { object-fit:contain; background:var(--ink) }
.viewer figcaption { text-align:center; padding:8px 0 1px; font:italic 18px/1.3 Georgia,serif }
.contact { display:flex; align-items:center; justify-content:space-between; gap:32px; background:var(--ink); color:var(--paper) }
.contact h2 { font-size:clamp(56px,7vw,114px) }
.contact-action { display:grid; gap:12px; justify-items:center }
.contact-action span { font:italic 19px Georgia,serif }
footer { padding-block:24px }.back-top { gap:8px }
#review { color:var(--ink); border:0; width:min(980px,calc(100vw - 32px)); max-height:88svh; padding:0; background:var(--paper) }
#review::backdrop { background:rgb(25 17 23 / .76) }
body:has(#review[open]) { overflow:hidden }
.review-top { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 26px; background:var(--paper) }
.review-top h2 { font-size:32px }.close { width:44px; height:44px; font-size:28px; line-height:1; border:0; border-radius:50%; background:var(--pink) }
.review-body { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:24px; padding:0 26px 28px }
.review-body figcaption { margin-top:7px; color:var(--muted); font-size:16px }
.transcript p+p { margin-top:12px }.author { font-weight:720 }
@media (max-width:800px) {
  .mast { min-height:66px }
  .collection-slide { gap:22px; grid-template-columns:.78fr 1fr }
  .story-copy dl { margin-top:16px }
  .services,.live { gap:30px }
}
@media (max-width:640px) {
  :root { --pad:18px; --gap:54px }
  body { font-size:17px }
  .mast { min-height:60px; gap:10px; flex-wrap:wrap; padding-block:8px }
  .brand { font-size:16px; gap:6px }.avatar { width:28px }
  .mast nav { gap:11px }.mast nav a { font-size:14px }
  .stage { grid-template-columns:1fr; gap:28px; padding-block:25px 36px }
  .intro h1 { font-size:clamp(48px,15.4vw,98px); line-height:.89 }
  .lead { font-size:20px; margin-top:20px }
  .intro .button { margin-top:17px }.button { padding:13px 18px; font-size:16px }
  .prints { width:min(100%,440px); justify-self:center; padding:0 11% 2% 5% }
  .identity img { aspect-ratio:1.6; object-position:50% 46% }
  .identity,.snapshot { padding:6px }.identity figcaption { font-size:16px }
  .snapshot { width:27%; bottom:-2% }
  .archive-head { flex-wrap:wrap; gap:12px; margin-bottom:15px }
  .collection-controls { width:100%; justify-content:space-between }
  .collection-dots,.collection-dots button { gap:4px }.collection-dots button { padding-inline:5px }
  .collection-slide { grid-template-columns:1fr; padding:12px; gap:18px }
  .story-copy { padding:2px 3px 5px }
  .story-art img { aspect-ratio:1.55; object-position:50% 38% }
  .art-name { font-size:18px }.pullquote { padding:15px }
  .services,.live,.review-body { grid-template-columns:1fr }
  .services,.live,.contact { gap:24px }
  .aside p,.stub p,.session-intro>p { margin-top:16px }
  .menu { gap:42px }.selector { margin-top:20px }
  .selector img { aspect-ratio:1.8 }.viewer video,.viewer figure>img { height:min(112vw,64svh) }
  .contact { flex-direction:column; align-items:start }.contact-action { justify-items:start }
  .review-top { padding:14px 18px }.review-body { padding:0 18px 20px }
}
@media (prefers-reduced-motion:no-preference) {
  .service-marquee span { animation:run 32s linear infinite }
  @keyframes run { to { transform:translateX(-100%) } }
  .arrive { animation:arrive .45s ease-out var(--delay,0s) backwards }
  @keyframes arrive { from { translate:0 13px; opacity:.82 } }
  .enhanced .viewer figure:not([hidden]) { animation:arrive .25s ease-out }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none!important; animation:none!important }
  .story-gesture { display:none }
  .button:hover,.selector button:hover { transform:none }
  .snapshot:hover,.snapshot:focus-visible { transform:rotate(-9deg) }
}
.service-marquee b { display:inline-block; width:.64em; height:.64em; padding:0; margin-inline:.22em; background:var(--pink); clip-path:polygon(50% 0,62% 35%,98% 13%,76% 48%,100% 58%,67% 64%,73% 99%,50% 74%,28% 99%,33% 66%,0 58%,25% 48%,3% 13%,38% 35%) }