/* Dr. Wagner Okai v3 · "Atlas & Pincel"
   His personal annotated atlas: Western anatomical engravings meet Japanese brush, ensō and hanko.
   Loaded after styles.css + v2.css. Motion only under html.js and never under prefers-reduced-motion. */
@property --lr{syntax:'<length>';inherits:true;initial-value:0px}
:root{
  --script:'Caveat','Segoe Print','Bradley Hand',cursive;
  --tape:rgba(205,186,148,.62);--tape-blue:rgba(42,71,166,.20);--tape-red:rgba(184,58,38,.22);
  --shadow-paper:0 1px 1px rgba(21,33,58,.06),0 8px 18px -6px rgba(21,33,58,.18),0 22px 40px -22px rgba(21,33,58,.25);
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V9L234 12 229 8 223 13 216 9 211 14 204 10 197 13 191 8 185 12 178 9 172 14 165 10 159 12 152 8 146 13 139 10 133 14 126 9 120 12 113 8 107 13 100 10 94 14 87 9 81 12 74 8 68 13 61 10 55 14 48 9 42 12 35 8 29 13 22 10 16 14 9 9 4 12 0 9Z'/%3E%3C/svg%3E");
  --blob:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='18' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3Ccircle cx='50' cy='50' r='30' filter='url(%23f)'/%3E%3C/svg%3E");
}
body{background-image:none}
main{overflow-x:clip}

/* ---------- hand, notes, tape, prints, polaroids, stamps ---------- */
.hand{font-family:var(--script);font-weight:600;color:var(--red);line-height:1.05;letter-spacing:.005em}
.vlabel{position:absolute;writing-mode:vertical-rl;transform:rotate(180deg);font:600 .78rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;pointer-events:none}
.vlabel::before{content:"";display:inline-block;width:1px;height:42px;background:currentColor;margin-bottom:14px;opacity:.6;vertical-align:middle}
.tape{position:absolute;z-index:3;width:118px;height:30px;background:var(--tape);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 6px,transparent 6px 13px);
  clip-path:polygon(0 8%,3% 0,6% 10%,9% 0,91% 0,94% 9%,97% 0,100% 10%,98% 30%,100% 50%,97% 70%,100% 90%,97% 100%,94% 91%,91% 100%,9% 100%,6% 92%,3% 100%,0 92%,2% 72%,0 50%,3% 30%);
  box-shadow:0 1px 2px rgba(0,0,0,.06);pointer-events:none}
.tape.blue{background-color:var(--tape-blue)}.tape.red{background-color:var(--tape-red)}
.tape.tl{top:-13px;left:-26px;transform:rotate(-38deg)}.tape.tr{top:-13px;right:-26px;transform:rotate(36deg)}
.tape.tc{top:-15px;left:50%;transform:translateX(-50%) rotate(-3deg)}.tape.bl{bottom:-12px;left:-22px;transform:rotate(30deg)}
.print{position:relative;margin:0;background:var(--card);padding:10px;box-shadow:var(--shadow-paper);transform:rotate(var(--tilt,0deg));
  -webkit-mask:var(--torn) bottom/100% 15px repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 14px) no-repeat;
  mask:var(--torn) bottom/100% 15px repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 14px) no-repeat;padding-bottom:22px}
.print img{display:block;width:100%;height:100%;object-fit:cover}
.print-wrap{position:relative;transform:rotate(var(--tilt,0deg))}
.print-wrap > .print{transform:none}
.polaroid{position:relative;margin:0;display:block;background:#FFFDF8;padding:11px 11px 0;box-shadow:var(--shadow-paper);transform:rotate(var(--tilt,0deg));color:var(--ink);text-decoration:none;border:0;font:inherit;text-align:left}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--paper-2)}
.polaroid figcaption,.polaroid .pc{display:block;font:600 1.3rem/1.15 var(--script);color:var(--ink-2);padding:10px 4px 14px;min-height:54px}
button.polaroid,a.polaroid{cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
button.polaroid:hover,a.polaroid:hover{transform:rotate(0deg) translateY(-4px) scale(1.02);box-shadow:0 2px 2px rgba(21,33,58,.06),0 24px 40px -18px rgba(21,33,58,.35)}
.polaroid .play-dot{position:absolute;right:20px;top:calc(11px + (100% - 76px) - 52px);width:44px;height:44px;border-radius:50%;background:rgba(255,253,248,.94);display:grid;place-items:center;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.polaroid .play-dot svg{width:15px;height:15px;margin-left:2px}
.stamp{width:64px;height:64px;display:block;position:relative;z-index:4;filter:drop-shadow(0 1px 0 rgba(184,58,38,.25));pointer-events:none}
.stamp-wrap{position:relative;display:inline-block;width:64px;height:64px}
.stamp-wrap::before{content:"";position:absolute;inset:-26px;z-index:3;pointer-events:none;opacity:.0;
  background:radial-gradient(circle at 18% 30%,var(--red) 0 2.2px,transparent 3px),radial-gradient(circle at 82% 22%,var(--red) 0 1.6px,transparent 2.4px),radial-gradient(circle at 88% 74%,var(--red) 0 2.6px,transparent 3.4px),radial-gradient(circle at 12% 80%,var(--red) 0 1.4px,transparent 2.2px),radial-gradient(circle at 50% 4%,var(--red) 0 1.2px,transparent 2px),radial-gradient(circle at 96% 48%,var(--red) 0 1.1px,transparent 1.9px)}
.js .stamp-wrap .stamp{opacity:0;transform:scale(2.1) rotate(-14deg)}
.js .stamp-wrap.in .stamp{animation:v3stamp .55s cubic-bezier(.3,1.5,.5,1) both}
.js .stamp-wrap.in::before{animation:v3splash .7s ease-out .12s both}
@keyframes v3stamp{0%{opacity:0;transform:scale(2.1) rotate(-14deg)}60%{opacity:1;transform:scale(.93) rotate(2deg)}100%{opacity:1;transform:rotate(-4deg)}}
@keyframes v3splash{0%{opacity:0;transform:scale(.6)}35%{opacity:.85}100%{opacity:.55;transform:none}}

/* marginalia: hand-drawn strokes that draw themselves when they enter the viewport */
.mg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.mg path,.mg-line path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mg path.thin,.mg-line path.thin{stroke-width:1.6}
.mg-note{position:absolute;z-index:5;margin:0;font:600 clamp(1.25rem,1.9vw,1.6rem)/1.02 var(--script);color:var(--red);transform:rotate(var(--r,-4deg));pointer-events:none;white-space:nowrap}
.js .mg path,.js .mg-line path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease-io)}
.js .in .mg path,.js .mg.in path,.js .mg-line.in path{stroke-dashoffset:0}
.js .in .mg path:nth-child(2),.js .mg.in path:nth-child(2),.js .mg-line.in path:nth-child(2){transition-delay:.55s}
.js .in .mg path:nth-child(3),.js .mg.in path:nth-child(3){transition-delay:.85s}
.js .mg-note{clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.1s var(--ease-io) .9s}
.js .in .mg-note,.js .mg-note.in{clip-path:inset(-20% -10% -20% -2%)}
.hl{position:relative;white-space:nowrap}
.hl .mg-line{position:absolute;left:-2%;right:-2%;bottom:-.18em;height:.5em;width:104%;overflow:visible;pointer-events:none}

/* ensō (brush circle) */
.enso{display:block;width:100%;height:auto;overflow:visible}
.enso .stroke{fill:none;stroke:var(--ink);stroke-width:20;stroke-linecap:round}
.enso .dry{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;opacity:.45}
.enso .ring-text{font:600 15px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;fill:var(--ink-3)}
.js .enso[data-draw] .stroke,.js .enso[data-draw] .dry{stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}

/* sections: torn top edge instead of a straight line */
.sec-alt{border-top:0}
.sec-alt::before{content:"";position:absolute;left:0;right:0;top:-13px;height:14px;width:auto;transform:none;border:0;background:var(--paper-2);
  -webkit-mask:var(--torn) top/240px 14px repeat-x;mask:var(--torn) top/240px 14px repeat-x;transform:scaleY(-1)}

/* paper notes (replaces boxed cards across pages) */
.symptom,.layer,.funnel div,.callout,.book aside .card,.city{border:0;border-radius:3px;background:var(--card);box-shadow:var(--shadow-paper);position:relative}
.symptoms > :nth-child(odd),.layers > :nth-child(odd),.funnel > :nth-child(odd){transform:rotate(-.7deg)}
.symptoms > :nth-child(even),.layers > :nth-child(even),.funnel > :nth-child(even){transform:rotate(.8deg)}
.symptom::after,.layer::after,.funnel div::after,.callout::after{content:"";position:absolute;top:-12px;left:50%;width:96px;height:24px;transform:translateX(-50%) rotate(-2deg);background:var(--tape);
  clip-path:polygon(0 8%,4% 0,8% 10%,92% 0,96% 9%,100% 10%,98% 50%,100% 90%,96% 100%,92% 91%,8% 100%,4% 92%,0 92%,2% 50%)}
.symptoms > :nth-child(3n+2)::after,.layers > :nth-child(2)::after{background:var(--tape-blue);transform:translateX(-50%) rotate(3deg)}
.symptom .k{display:inline-block;font:600 1.45rem/1 var(--script);letter-spacing:0;text-transform:none;color:var(--red);background:none;padding:0;position:relative}
.symptom .k::after{content:"";position:absolute;left:-10px;right:-10px;top:-8px;bottom:-8px;border:1.6px solid var(--red);border-radius:50% 46% 52% 44%/58% 50% 46% 52%;transform:rotate(-3deg);opacity:.7}
.layer{padding:38px 30px 30px}
@media (max-width:560px){.layer{padding:34px 22px 24px}}
.layer b,.funnel b{font:600 1.35rem/1 var(--script);letter-spacing:0;text-transform:none;color:var(--red)}

/* ---------- custom cursor + page transitions ---------- */
.ink-cursor{position:fixed;left:0;top:0;z-index:100001;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s,border-radius .25s;will-change:transform}
.ink-cursor.on{opacity:.85}
.ink-cursor.brush{width:14px;height:24px;margin:-24px 0 0 -2px;background:var(--red);border-radius:50% 50% 50% 50%/70% 70% 30% 30%;transform-origin:50% 100%}
.ink-cursor.brush::after{content:"";position:absolute;left:50%;bottom:-3px;width:3px;height:4px;margin-left:-1.5px;border-radius:0 0 2px 2px;background:var(--red)}
@media (hover:hover) and (pointer:fine){html.has-cursor .ink-cursor{display:block}}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.9s}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:v3wipe .9s cubic-bezier(.7,0,.2,1) both;-webkit-mask:var(--blob) 50% 55%/0% 0% no-repeat;mask:var(--blob) 50% 55%/0% 0% no-repeat}
@keyframes v3wipe{from{-webkit-mask-size:0% 0%;mask-size:0% 0%}to{-webkit-mask-size:360% 360%;mask-size:360% 360%}}
.site-head{view-transition-name:site-head}

/* =====================================================================
   HOME · hero sumi-e (ink bleeds in after the intro docks)
   ===================================================================== */
.hero-cover.sumi{min-height:calc(100svh - var(--head));max-height:none;display:flex;align-items:center;padding:0;overflow:hidden;background:var(--paper)}
.hero-cover.sumi::after{display:none}
.sumi-fig-wrap{position:absolute;inset:0;pointer-events:none}
.sumi-fig{position:absolute;top:0;bottom:0;right:0;height:100%;aspect-ratio:2200/1238;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.sumi-fig > img{display:block;width:100%;height:100%;mix-blend-mode:multiply}
.sumi-fig .mg-note{left:79.5%;top:80%;font-size:clamp(1.3rem,1.6vw,1.65rem)}
.sumi-in{position:relative;z-index:2;width:100%}
.sumi-copy{max-width:min(640px,54vw);padding:clamp(40px,6vh,72px) 0 clamp(48px,7vh,80px) clamp(0px,3vw,40px);position:relative}
.sumi .vlabel{left:max(6px,calc((100vw - var(--wrap))/2 - 26px));top:50%;transform:translateY(-50%) rotate(180deg)}
.sumi h1{font-size:inherit;line-height:1;margin:0 0 30px;letter-spacing:-.03em}
.sumi h1 .l{display:block;padding-right:.18em;width:max-content;max-width:100%}
.sumi h1 .l1{font:600 clamp(3.4rem,7.4vw,7rem)/.95 var(--serif);letter-spacing:-.035em}
.sumi h1 .l2{font:italic 500 clamp(2.2rem,4.3vw,4rem)/1.05 var(--serif);color:var(--blue);padding-left:clamp(28px,6vw,96px)}
.sumi h1 .l3{font:600 clamp(.95rem,1.3vw,1.15rem)/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 2px;padding-left:4px}
.sumi h1 .l4{position:relative;font:italic 600 clamp(4.2rem,9.6vw,9.2rem)/.92 var(--serif);letter-spacing:-.04em;color:var(--red);padding-left:clamp(10px,3vw,48px)}
.sumi h1 .l4 em{color:inherit}
.sumi h1 .brush-u{position:absolute;left:clamp(6px,2.4vw,40px);right:4%;bottom:-.06em;width:calc(100% - 4% - clamp(6px,2.4vw,40px));height:.24em;overflow:visible}
.sumi h1 .brush-u path{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;opacity:.9}
.sumi .lead{max-width:26em;margin:0}
.sumi-note{max-width:30em}
@media (min-width:861px){.sumi-fig{right:-5vw;height:96%;top:2%}}
.sumi .btns{margin-top:26px}
.sumi-note{display:flex;gap:10px;align-items:baseline;margin:22px 0 0;color:var(--ink-3);font-size:1rem}
.sumi-note b{font:600 1.35rem/1 var(--script);color:var(--red)}
/* entrance */
.js:not(.hero-go) .sumi .ink{opacity:0}
.js:not(.hero-go) .sumi .ink-img{opacity:0}
.js:not(.hero-go) .sumi .ink,.js:not(.hero-go) .sumi .ink-img{animation:v3safe .6s ease 14s forwards}
@keyframes v3safe{to{opacity:1}}
.hero-go .sumi .ink-img{animation:v3bleed 2.2s cubic-bezier(.3,.6,.2,1) both;-webkit-mask:var(--blob) 72% 44%/0% 0% no-repeat;mask:var(--blob) 72% 44%/0% 0% no-repeat}
.hero-done .sumi .ink-img{-webkit-mask:none;mask:none;animation:none}
@keyframes v3bleed{0%{opacity:0;filter:blur(10px);-webkit-mask-size:0% 0%;mask-size:0% 0%}30%{opacity:1}100%{opacity:1;filter:none;-webkit-mask-size:340% 340%;mask-size:340% 340%}}
.hero-go .sumi .ink{animation:v3inkline 1.5s cubic-bezier(.3,.6,.2,1) both;-webkit-mask:linear-gradient(90deg,#000 0 33%,transparent 66%) 100% 0/300% 100% no-repeat;mask:linear-gradient(90deg,#000 0 33%,transparent 66%) 100% 0/300% 100% no-repeat}
.hero-done .sumi .ink{-webkit-mask:none;mask:none;animation:none}
@keyframes v3inkline{0%{opacity:0;filter:blur(12px);-webkit-mask-position:100% 0;mask-position:100% 0}35%{opacity:1}100%{opacity:1;filter:none;-webkit-mask-position:0 0;mask-position:0 0}}
.hero-go .sumi .ink.e1{animation-delay:.45s}.hero-go .sumi .ink.e2{animation-delay:.75s}.hero-go .sumi .ink.e3{animation-delay:1.05s}
.hero-go .sumi .ink.e4{animation-delay:1.3s}.hero-go .sumi .ink.e5{animation-delay:1.9s}.hero-go .sumi .ink.e6{animation-delay:2.2s}.hero-go .sumi .ink.e7{animation-delay:2.5s}
.hero-go .sumi .ink-img{animation-delay:.1s}
.js .sumi .brush-u path{stroke-dasharray:1;stroke-dashoffset:1}
.hero-go .sumi .brush-u path{transition:stroke-dashoffset 1.1s var(--ease-io) 2.2s;stroke-dashoffset:0}
.js .sumi .mg path{transition-delay:2.9s}
.js .sumi .mg path:nth-child(2){transition-delay:3.5s}
.js .sumi .mg-note{transition-delay:3.9s}
@media (max-width:860px){
  .hero-cover.sumi{display:block;min-height:0}
  .sumi-fig-wrap{position:relative;inset:auto;height:min(98vw,560px);overflow:hidden}
  .sumi-fig{left:50%;right:auto;transform:translateX(-71%);-webkit-mask-image:none;mask-image:none}
  .sumi-fig .mg-note{left:77%;top:83%;font-size:1.22rem}
  .sumi-copy{max-width:none;padding:0 0 52px}
  .sumi .vlabel{display:none}
  .sumi h1{margin-top:-6px}
  .sumi h1 .l1{font-size:clamp(3rem,15.4vw,4.4rem)}
  .sumi h1 .l2{font-size:clamp(1.9rem,9.4vw,2.8rem);padding-left:30px}
  .sumi h1 .l3{font-size:.86rem;letter-spacing:.24em}
  .sumi h1 .l4{font-size:clamp(3.8rem,19vw,5.6rem);padding-left:6px}
  .sumi .btns{padding-right:0}
  .sumi .btns .btn{flex:1 1 100%}
}

/* ink ribbon (replaces the marquee box) */
.marquee.ribbon{background:var(--ink);border:0;transform:rotate(-1.6deg);margin:clamp(40px,6vw,72px) -2vw;padding:16px 0;position:relative;z-index:2;box-shadow:0 10px 26px -14px rgba(21,33,58,.6)}
.marquee.ribbon span{color:#F6F2EA;font:italic 500 clamp(1.15rem,1.8vw,1.5rem)/1 var(--serif)}
.marquee.ribbon span::after{content:"";display:inline-block;width:14px;height:14px;margin:0 22px 0 26px;border:2.4px solid var(--red);border-radius:50% 48% 52% 46%;border-top-color:transparent;transform:rotate(30deg);vertical-align:middle}

/* =====================================================================
   HOME · O atlas (guided tour + interactive plate + x-ray lens, one engraving, one place)
   ===================================================================== */
.atlas{padding:0;position:relative;background:var(--paper)}
.atlas .vlabel{left:max(6px,calc((100vw - var(--wrap))/2 - 26px));top:56px;transform:rotate(180deg);z-index:3}
.plate{position:relative;background:var(--card);padding:14px 14px 0;box-shadow:var(--shadow-paper);transform-origin:0 0}
.plate .tape.tl{left:-30px;top:-10px}.plate .tape.tr{right:-30px;top:-10px}
.plate-art{position:relative;aspect-ratio:1120/1400;overflow:hidden;background:#F7F3EA}
.plate-art > img{display:block;width:100%;height:100%;mix-blend-mode:multiply}
.plate-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:10px 2px 12px;font:italic 500 1rem/1.2 var(--serif);color:var(--ink-2)}
.plate-cap span{font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.plate .tour-svg,.plate .face{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.plate .tour-svg .seg{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.plate .tour-svg .node{fill:var(--card);stroke:var(--red);stroke-width:2.6;opacity:0;transform-box:fill-box;transform-origin:center}
.plate .tour-svg .ring{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.plate .face .chain{stroke-width:3}
/* x-ray lens: a second treatment of the same plate, revealed through a circle */
.xray{position:absolute;inset:0;isolation:isolate;pointer-events:none;
  -webkit-mask:radial-gradient(circle var(--lr) at var(--lx,50%) var(--ly,40%),#000 calc(100% - 2px),transparent 100%);
  mask:radial-gradient(circle var(--lr) at var(--lx,50%) var(--ly,40%),#000 calc(100% - 2px),transparent 100%);transition:--lr .45s var(--ease)}
.xray img{display:block;width:100%;height:100%;filter:invert(1) hue-rotate(180deg) contrast(1.15)}
.xray::after{content:"";position:absolute;inset:0;background:#E2462F;mix-blend-mode:color}
.xray svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.xray svg text{font:600 46px/1 var(--script);fill:#FFF3E6}
.xray svg path{fill:none;stroke:#FFD9C8;stroke-width:2.4}
.xray svg circle{fill:#FFF3E6}
.lens-ring{position:absolute;left:0;top:0;width:calc(var(--lr) * 2);height:calc(var(--lr) * 2);border-radius:50%;border:2px solid var(--red);box-shadow:0 0 0 5px rgba(255,253,248,.55),0 6px 24px rgba(21,33,58,.35);transform:translate(calc(var(--lx,50%) - var(--lr)),calc(var(--ly,40%) - var(--lr)));pointer-events:none;z-index:5;opacity:0;transition:opacity .3s,width .45s var(--ease),height .45s var(--ease)}
.plate.lens-on{--lr:84px}
.plate.lens-on .lens-ring{opacity:1}
.plate.lens-on .plate-art{cursor:none;touch-action:none}
.lens-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 10px;border-radius:999px;border:1.5px dashed var(--red);background:transparent;color:var(--red);font:600 .95rem/1 var(--sans);cursor:pointer}
.lens-btn svg{width:24px;height:24px}
.lens-btn[aria-pressed=true]{background:var(--red);color:#fff;border-style:solid}
.lens-hint{font:600 1.25rem/1.1 var(--script);color:var(--ink-3);margin:8px 0 0}
.atlas .hot{opacity:0;pointer-events:none;transition:opacity .5s}
.atlas.at-end .hot,.atlas:not(.atlas-on) .hot{opacity:1;pointer-events:auto}
.atlas .hot .tag{display:none}
.atlas .hot i{width:18px;height:18px}
/* beats + kicker as annotated notes */
.beat-n{font:600 1.5rem/1 var(--script);color:var(--red);letter-spacing:0}
.beat-note{font:600 1.3rem/1.1 var(--script);color:var(--ink-3);margin:10px 0 0}
.atlas-end h2{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.02;margin-bottom:.3em}
.atlas-end .chips{margin-top:12px}
.atlas-end .chips.map-chips{display:flex}
.atlas-end .map-panel{border:0;border-radius:3px;box-shadow:var(--shadow-paper);background:var(--card);transform:rotate(.4deg)}
.atlas-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:14px}
.atlas-kicker .k-t{font:600 clamp(2.5rem,4.8vw,4.4rem)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 14px;color:var(--ink)}
.atlas-kicker .k-t em{color:var(--red)}
.atlas-kicker .k-s{color:var(--ink-2);font-weight:300;font-size:1.12rem;max-width:24em;margin:0}
.atlas-cue{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font:600 1.35rem/1 var(--script);color:var(--ink-3)}
.atlas-cue svg{width:28px;height:44px}
.atlas-cue path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
.atlas-skip,.atlas-prog,.atlas-fade{display:none}

/* static atlas (no JS, reduced motion, short screens) */
.atlas:not(.atlas-on) .atlas-stage{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,110px) 20px clamp(56px,8vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);grid-template-areas:"end plate" "beats plate";gap:24px clamp(32px,5vw,72px);align-items:start;position:relative}
.atlas:not(.atlas-on) .plate{grid-area:plate;transform:rotate(-1.6deg);max-width:500px;justify-self:center;width:100%;margin-top:20px}
.atlas:not(.atlas-on) .atlas-end{grid-area:end}
.atlas:not(.atlas-on) .atlas-kicker{display:none}
.atlas:not(.atlas-on) .atlas-beats{grid-area:beats;list-style:none;margin:8px 0 0;padding:20px 0 0;border-top:1px dashed var(--ink-3);display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.atlas:not(.atlas-on) .beat-t{font-size:1.4rem}
.atlas:not(.atlas-on) .tour-svg .seg,.atlas:not(.atlas-on) .tour-svg .ring{stroke-dashoffset:0}
.atlas:not(.atlas-on) .tour-svg .node{opacity:1}
@media (max-width:860px){
  .atlas:not(.atlas-on) .atlas-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"end" "plate" "beats"}
  .atlas:not(.atlas-on) .plate{max-width:400px}
  .atlas:not(.atlas-on) .atlas-beats{grid-template-columns:1fr}
}
/* pinned atlas */
.atlas.atlas-on{height:340vh}
.atlas-on .atlas-stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));overflow:hidden}
.atlas-on .plate{position:absolute;left:0;top:0;will-change:transform}
.atlas-on .atlas-fade{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0,var(--paper) 30%,rgba(246,242,234,.86) 40%,rgba(246,242,234,0) 56%)}
.atlas-on .atlas-beats{list-style:none;margin:0;padding:0}
.atlas-on .beat,.atlas-on .atlas-kicker,.atlas-on .atlas-end{position:absolute;z-index:2;opacity:0;visibility:hidden}
.atlas-on .beat,.atlas-on .atlas-kicker{left:max(20px,calc((100vw - var(--wrap))/2 + 20px));top:50%;width:min(38%,500px);transform:translateY(-50%)}
.atlas-on .beat-t{font:600 clamp(2.6rem,5vw,4.6rem)/1.02 var(--serif);letter-spacing:-.025em;margin:0}
.atlas-on .beat-t em{font-style:italic;color:var(--red)}
.atlas-on .beat-s{font-size:clamp(1.05rem,1.4vw,1.2rem);margin-top:16px;max-width:22em}
.atlas-on .atlas-end{left:max(20px,calc((100vw - var(--wrap))/2 + 20px));top:50%;width:min(44%,540px);transform:translateY(-50%);max-height:calc(100% - 40px);display:flex;flex-direction:column}
.atlas-on .atlas-end .map-panel{flex:0 1 auto;min-height:0;overflow:auto}
.atlas-on .atlas-end h2{font-size:clamp(2rem,3.2vw,2.8rem)}
.atlas-on .atlas-skip{display:inline-flex;position:absolute;z-index:3;left:max(20px,calc((100vw - var(--wrap))/2 + 20px));bottom:20px;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,253,248,.9);color:var(--ink);font:600 .95rem/1 var(--sans);text-decoration:none}
.atlas-skip svg{width:14px;height:14px}
.atlas-on .atlas-prog{display:flex;position:absolute;z-index:3;right:22px;top:50%;transform:translateY(-50%);flex-direction:column;gap:12px}
.atlas-prog span{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-3);transition:background .4s,border-color .4s,transform .4s}
.atlas-prog span.on{background:var(--red);border-color:var(--red);transform:scale(1.3)}
@media (max-width:860px){
  .atlas.atlas-on{height:330vh}
  .atlas-on .atlas-fade{background:none}
  .atlas-on .beat,.atlas-on .atlas-kicker{left:0;right:0;width:auto;top:auto;bottom:0;transform:none;padding:80px 16px 82px;background:linear-gradient(180deg,rgba(246,242,234,0) 0,rgba(246,242,234,.95) 64px,var(--paper) 100%)}
  .atlas-on .beat-t{font-size:clamp(2.1rem,9.6vw,3rem)}
  .atlas-on .beat-s{font-size:1.02rem;margin-top:8px}
  .atlas-kicker .k-t{font-size:clamp(2.1rem,9.4vw,2.9rem)}
  .atlas-kicker .k-s{font-size:1.02rem}
  .atlas-on .atlas-end{left:16px;right:16px;width:auto;top:var(--endTop,52%);bottom:10px;transform:none;display:flex;flex-direction:column;min-height:0}
  .atlas-on .atlas-end .eyebrow{display:none}
  .atlas-on .atlas-end h2{font-size:1.65rem;margin:0 0 4px}
  .atlas-on .atlas-end .chips{flex-wrap:nowrap;overflow-x:auto;margin:8px -16px 0;padding:2px 16px 6px;scrollbar-width:none}
  .atlas-on .atlas-end .chip{flex:none}
  .atlas-on .atlas-end .map-panel{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px;margin-top:8px;transform:none}
  .atlas-on .atlas-end .lens-hint{display:none}
  .atlas-on .atlas-tools{margin-top:6px}
  .atlas-on .atlas-skip{left:16px;bottom:16px}
  .atlas-on .atlas-prog{right:10px;top:16px;transform:none}
  .atlas .vlabel{display:none}
}

/* =====================================================================
   HOME · doors as a collage of taped prints
   ===================================================================== */
.collage-doors{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;align-items:start;margin-top:12px;padding-bottom:20px}
.door-print{position:relative;display:block;color:var(--ink);text-decoration:none;background:var(--card);padding:12px 12px 22px;box-shadow:var(--shadow-paper);transform:rotate(var(--tilt));transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.door-print:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 2px 2px rgba(21,33,58,.06),0 30px 50px -24px rgba(21,33,58,.4);color:var(--ink);z-index:5}
.door-print .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.door-print .ph img{width:100%;height:100%;object-fit:cover}
.door-print h3{margin:16px 6px 4px;font-size:1.65rem}
.door-print p{margin:0 6px;color:var(--ink-2)}
.door-print .hand{display:inline-block;margin:10px 6px 0;font-size:1.4rem}
.door-print .num{position:absolute;right:16px;top:-20px;font:italic 500 3.4rem/1 var(--serif);color:var(--red);z-index:4;text-shadow:0 0 0 #fff}
.collage-doors .d1{grid-column:1 / span 5;--tilt:-2.4deg;z-index:2}
.collage-doors .d2{grid-column:5 / span 4;margin-top:120px;--tilt:2.8deg;z-index:3}
.collage-doors .d3{grid-column:9 / span 4;margin-top:-10px;--tilt:-1.2deg;z-index:1}
.doors-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
@media (max-width:860px){
  .collage-doors{display:flex;flex-direction:column;gap:0}
  .collage-doors .door-print{width:86%}
  .collage-doors .d1{align-self:flex-start;margin-top:0}
  .collage-doors .d2{align-self:flex-end;margin-top:-22px}
  .collage-doors .d3{align-self:flex-start;margin-top:-18px;margin-left:4%}
}

/* HOME · voice around an ensō */
.voice3{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:center}
.enso-box{position:relative;max-width:470px;width:100%;justify-self:center}
.enso-box .polaroid{position:absolute;left:50%;top:50%;width:44%;transform:translate(-50%,-50%) rotate(-4deg)}
.enso-box .polaroid .pc{font-size:1.15rem;min-height:0;padding:8px 2px 10px}
.enso-box .tape{width:84px;height:24px}
.voice3 .quote3{font:500 clamp(1.8rem,3.4vw,2.9rem)/1.18 var(--serif);letter-spacing:-.015em;color:var(--ink);margin:0}
.voice3 .quote3 em{color:var(--red)}
.voice3 .by{display:flex;align-items:center;gap:16px;margin-top:26px}
.voice3 .by img.sig{height:62px;width:auto}
@media (max-width:860px){.voice3{grid-template-columns:minmax(0,1fr)}.enso-box{max-width:340px}}

/* HOME · video index (notebook tabs + loosely pinned cards) */
.vtabs.idx{display:flex;flex-wrap:wrap;gap:0;border-bottom:1.5px solid var(--ink);margin-bottom:34px}
.vtabs.idx .chip{border-radius:10px 10px 0 0;border:1.5px solid var(--ink);border-bottom:0;margin:0 -1px 0 0;background:var(--paper-2);min-height:46px}
.vtabs.idx .chip[aria-pressed=true]{background:var(--ink);color:#fff}
.vgrid.pinned{gap:34px 22px}
.vgrid.pinned .vcard{background:#FFFDF8;padding:9px 9px 12px;box-shadow:var(--shadow-paper);transform:rotate(var(--t,0deg));transition:transform .5s var(--ease)}
.vgrid.pinned .vcard:nth-child(4n+1){--t:-1.6deg}.vgrid.pinned .vcard:nth-child(4n+2){--t:1.2deg}.vgrid.pinned .vcard:nth-child(4n+3){--t:-.6deg}.vgrid.pinned .vcard:nth-child(4n){--t:1.8deg}
.vgrid.pinned .vcard:hover{transform:rotate(0) translateY(-4px)}
.vgrid.pinned .vcard .poster{border-radius:2px;box-shadow:none}
.vgrid.pinned .vcard .cap{margin:10px 4px 0;font-size:1rem}
.vgrid.pinned .vcard .cat{margin:4px 4px 0}

/* HOME · cities as two tickets joined by a red route */
.route{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,10vw,150px);align-items:start}
.route .city{padding:28px 26px 26px;border-radius:3px;transform:rotate(var(--tilt));
  -webkit-mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.route .city:first-child{--tilt:-1.4deg}.route .city:last-child{--tilt:1.6deg;margin-top:60px}
.route .city .stamp-wrap{position:absolute;right:20px;top:20px}
.route .city .label{font:600 1.45rem/1 var(--script);letter-spacing:0;text-transform:none;color:var(--red)}
.route .city h3{padding-right:76px}
.route .city svg.citymap{display:none}
.route-line{position:absolute;left:30%;right:30%;top:40%;height:160px;width:40%;overflow:visible;pointer-events:none;z-index:2}
.route-line .mg-note{left:28%;top:-34px;--r:-3deg}
@media (max-width:860px){.route{grid-template-columns:minmax(0,1fr);gap:56px}.route .city:last-child{margin-top:0}.route-line{left:40%;top:45%;width:30%;height:90px}.route-line .mg-note{left:62%;top:6px}}

/* HOME · P.S. sticky note */
.ps{position:relative;max-width:620px;margin:0 auto;background:#FBF4DF;padding:44px 40px 36px;box-shadow:var(--shadow-paper);transform:rotate(-1.6deg)}
.ps .tape{left:50%;top:-15px;transform:translateX(-50%) rotate(-4deg)}
.ps .hand.big{font-size:2.6rem;display:block;margin-bottom:6px}
.ps h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.ps .stamp-wrap{position:absolute;right:26px;bottom:24px}
@media (max-width:560px){.ps{padding:40px 22px 30px}.ps .stamp-wrap{display:none}}

/* =====================================================================
   INNER PAGES · collage opening (print + polaroid + marginalia)
   ===================================================================== */
.co{position:relative;padding:clamp(36px,6vw,90px) 0 clamp(64px,8vw,110px);border-bottom:0;overflow:hidden}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center;position:relative}
.co.flip .co-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.co.flip .co-media{order:-1}
.co h1{font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.03em}
.co h1 .ind{display:inline;padding-left:0}
.co .lead{max-width:32em}
.co-media{position:relative;padding:24px 10px 40px}
.co-media .print{--tilt:2deg}
.co.flip .co-media .print{--tilt:-2deg}
.co-media .print .ph{aspect-ratio:3/2;overflow:hidden}
.co-media .polaroid{position:absolute;width:clamp(132px,15vw,190px);z-index:6}
.co-media .polaroid .pc{font-size:1.12rem;min-height:0;padding:7px 2px 9px}
.co-media .stamp-wrap{position:absolute;z-index:7}
.co .vlabel{left:max(6px,calc((100vw - var(--wrap))/2 - 26px));top:90px}
.entry-jump.hand-jump{gap:6px 18px}
.entry-jump.hand-jump a{font:600 1.35rem/1.2 var(--script);border-bottom:0;color:var(--red);display:inline-flex;align-items:center;min-height:44px}
.entry-jump.hand-jump a::after{display:none}
.entry-jump.hand-jump a::before{content:"→";font-family:var(--sans);font-size:1rem;margin-right:6px;color:var(--ink-3)}
@media (max-width:860px){
  .co-grid,.co.flip .co-grid{grid-template-columns:minmax(0,1fr)}
  .co-media,.co.flip .co-media{order:-1;padding:18px 4px 30px}
  .co .vlabel{display:none}
}
/* sinais: the four oval scenes as a long taped strip */
.strip-print{--tilt:-1.2deg;max-width:1100px;margin:34px auto 0}
.strip-print .ph{aspect-ratio:3.1/1;overflow:hidden}
.strip-print .ph img{object-position:50% 66%}
.strip-notes{position:absolute;inset:0;pointer-events:none}
@media (max-width:640px){.strip-print .ph{aspect-ratio:1.9/1}.strip-print .ph img{object-position:50% 70%}}

/* sinais · handwritten checklist on a notebook sheet */
.notebook-sheet{position:relative;background:#FFFDF8;box-shadow:var(--shadow-paper);padding:34px 28px 30px 80px;
  background-image:linear-gradient(90deg,transparent 42px,rgba(184,58,38,.45) 42px 43.5px,transparent 43.5px),repeating-linear-gradient(180deg,transparent 0 35px,rgba(42,71,166,.13) 35px 36px);background-position:0 0,0 18px}
.notebook-sheet .check-group{border:0;padding:0;margin:0 0 22px;background:none;box-shadow:none}
.notebook-sheet .check-group h2{font:600 1.9rem/1.1 var(--script);color:var(--ink);margin:0 0 6px;letter-spacing:0}
.notebook-sheet .check-group h2 small{font:500 .92rem/1 var(--sans);color:var(--ink-3);letter-spacing:.04em;margin-left:8px}
.notebook-sheet .opts{display:flex;flex-direction:column;gap:2px}
.notebook-sheet .opt{background:transparent;border:0;border-radius:0;box-shadow:none;padding:6px 0;min-height:44px;font-size:1.06rem;color:var(--ink);text-align:left}
.notebook-sheet .opt:hover{background:rgba(42,71,166,.05)}
.notebook-sheet .opt .box{width:28px;height:28px;border:0;background:none;border-radius:0;position:relative;flex:none}
.notebook-sheet .opt .box svg{width:28px;height:28px;opacity:1;color:inherit}
.notebook-sheet .opt .box .sq{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}
.notebook-sheet .opt .box .tick{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease-io)}
.notebook-sheet .opt[aria-pressed=true]{background:transparent;border:0;color:var(--ink)}
.notebook-sheet .opt[aria-pressed=true] .box{background:none;border:0}
.notebook-sheet .opt[aria-pressed=true] .box .tick{stroke-dashoffset:0}
.notebook-sheet .opt[aria-pressed=true] > span:last-child{text-decoration:underline wavy rgba(184,58,38,.45) 1.5px;text-underline-offset:5px}
.result.note-card{background:#FBF4DF;border:0;border-radius:2px;box-shadow:var(--shadow-paper);transform:rotate(1.2deg);padding-top:40px}
.result.note-card .tape{left:50%;top:-14px;transform:translateX(-50%) rotate(3deg)}
.result.note-card h2{font:600 2rem/1.05 var(--script);color:var(--red)}
.result.note-card .stamp-wrap{position:absolute;right:18px;top:18px}
@media (max-width:560px){.notebook-sheet{padding:26px 16px 22px 44px;background-image:linear-gradient(90deg,transparent 22px,rgba(184,58,38,.45) 22px 23.5px,transparent 23.5px),repeating-linear-gradient(180deg,transparent 0 35px,rgba(42,71,166,.13) 35px 36px)}.result.note-card{transform:none}}

/* marcar · appointment card */
.appt{position:relative;background:#FFFDF8;box-shadow:var(--shadow-paper);padding:24px 24px 26px 46px;transform:rotate(-.5deg);
  -webkit-mask:radial-gradient(circle 6px at 14px 14px,transparent 98%,#000) 0 0/100% 28px repeat-y;mask:radial-gradient(circle 6px at 14px 14px,transparent 98%,#000) 0 0/100% 28px repeat-y}
.appt::before{content:"";position:absolute;left:30px;top:0;bottom:0;border-left:1.5px dashed var(--rule)}
.appt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:18px}
.appt-head .t{font:600 .78rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.appt-head .t b{display:block;font:italic 600 1.5rem/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:4px}
.appt #assistant-embed .wo-panel{box-shadow:none;border:1px solid var(--rule)}
.book aside .card{transform:rotate(var(--t,0deg))}
.book aside .card:nth-child(1){--t:1deg}.book aside .card:nth-child(2){--t:-.8deg}.book aside .card:nth-child(3){--t:.6deg}
.book aside .card h3{font:600 1.7rem/1.05 var(--script);color:var(--red)}
@media (max-width:560px){.appt{padding:18px 14px 20px 34px;transform:none}.appt::before{left:24px}}

/* rno · hero film framed as a taped plate */
.hero-cover.rno-plate{min-height:0;padding:clamp(36px,6vw,80px) 0 clamp(56px,7vw,96px);display:block}
.hero-cover.rno-plate::after{display:none}
.rno-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.rno-grid .hero-text{max-width:none;padding:0}
.rno-grid h1{font-size:clamp(2.4rem,4.4vw,3.9rem)}
.rno-film{position:relative;--tilt:-1.6deg}
.rno-film .print{padding:10px 10px 22px}
.rno-film .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper)}
.hero-cover.rno-plate .hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.rno-film .hero-pp{z-index:6}
@media (max-width:860px){.rno-grid{grid-template-columns:minmax(0,1fr)}.rno-film{order:-1}.hero-cover.rno-plate .hero-art{aspect-ratio:auto}}

/* =====================================================================
   SOBRE · a notebook page (most personal page of the site)
   ===================================================================== */
.nb{position:relative;background-color:var(--paper);
  background-image:linear-gradient(90deg,transparent calc(max(20px,(100vw - var(--wrap))/2) - 18px),rgba(184,58,38,.38) calc(max(20px,(100vw - var(--wrap))/2) - 18px) calc(max(20px,(100vw - var(--wrap))/2) - 16.5px),transparent 0),repeating-linear-gradient(180deg,transparent 0 37px,rgba(42,71,166,.09) 37px 38px)}
.nb-open{padding:clamp(40px,7vw,100px) 0 clamp(70px,9vw,130px)}
.nb-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,6vw,96px);align-items:center}
.nb-photos{position:relative;min-height:440px;max-width:460px;width:100%;justify-self:center}
.nb-photos .p1{position:absolute;left:4%;top:0;width:min(250px,62%);--tilt:-4deg;z-index:2}
.nb-photos .p2{position:absolute;right:0;top:46%;width:min(190px,46%);--tilt:5deg;z-index:3}
.nb-photos .stamp-wrap{position:absolute;left:min(230px,56%);top:min(232px,52%);z-index:5}
.nb-photos .mg-note{left:2%;bottom:-4px;--r:-6deg;font-size:1.5rem}
.nb-hi{font:600 clamp(1.7rem,2.6vw,2.2rem)/1 var(--script);color:var(--red);display:block;margin-bottom:6px;transform:rotate(-2deg);transform-origin:left}
.nb h1{font-size:clamp(2.8rem,6vw,5.6rem);line-height:.98;letter-spacing:-.035em;margin-bottom:.35em}
.nb h1 .l2{display:block;padding-left:clamp(30px,7vw,120px);font-style:italic;color:var(--blue);font-weight:500}
.nb h1 .l1,.nb h1 .l2{white-space:nowrap}
#sobre-h{font-size:clamp(2.2rem,4.1vw,4.3rem)}
#sobre-h .l1{display:block}
#sobre-h .l2{padding-left:clamp(18px,3vw,56px)}
@media (max-width:560px){#sobre-h{font-size:clamp(1.9rem,8.6vw,2.6rem)}}
.nb .lead{max-width:31em}
.nb .vlabel{left:max(6px,calc((100vw - var(--wrap))/2 - 54px));top:110px}
@media (max-width:860px){
  .nb{background-image:linear-gradient(90deg,transparent 8px,rgba(184,58,38,.38) 8px 9.5px,transparent 0),repeating-linear-gradient(180deg,transparent 0 37px,rgba(42,71,166,.09) 37px 38px)}
  .nb-grid{grid-template-columns:minmax(0,1fr)}
  .nb-photos{min-height:380px;max-width:360px}
  .nb-photos{min-height:420px}
  .nb-photos .stamp-wrap{left:auto;right:6%;top:6px}
  .nb-photos .mg-note{left:6%;bottom:-6px}
  .nb .vlabel{display:none}
}
/* statement in brush type */
.iceberg{padding:clamp(70px,10vw,140px) 0;text-align:left}
.iceberg .big{font:italic 500 clamp(2.5rem,7vw,6.4rem)/1.02 var(--serif);letter-spacing:-.035em;color:var(--ink);margin:0;max-width:12em}
.iceberg .big .hl{color:var(--red)}
.iceberg .after{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(36px,5vw,64px);align-items:start}
.iceberg .after p{color:var(--ink-2);font-size:1.12rem}
.iceberg .after .hand{font-size:1.7rem;transform:rotate(-2deg);display:block;margin-top:2px}
.iceberg .verb{font:500 clamp(1.3rem,2vw,1.6rem)/1.35 var(--serif);color:var(--ink);margin:0 0 18px}
@media (max-width:860px){.iceberg .after{grid-template-columns:minmax(0,1fr)}}
/* life & work strip */
.lifestrip-sec{padding-top:clamp(40px,6vw,80px)}
.lifestrip{display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 20px 40px;margin:0 -20px;scrollbar-width:thin;overscroll-behavior-x:contain}
.lifestrip > *{flex:none;width:clamp(180px,19vw,230px);scroll-snap-align:center}
.lifestrip > :nth-child(1){--tilt:-3deg}.lifestrip > :nth-child(2){--tilt:2.4deg;margin-top:36px}.lifestrip > :nth-child(3){--tilt:-1.4deg;margin-top:8px}.lifestrip > :nth-child(4){--tilt:3deg;margin-top:44px}.lifestrip > :nth-child(5){--tilt:-2.2deg;margin-top:14px}
.lifestrip .polaroid img{aspect-ratio:1}
.life-foot{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;margin-top:6px}
.life-foot .hand{font-size:1.7rem}
/* journey around an ensō */
.journey{padding:clamp(70px,9vw,120px) 0}
.journey-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:start}
.j-enso{position:sticky;top:calc(var(--head) + 40px);max-width:460px;width:100%;justify-self:center}
.j-enso .pt{fill:var(--paper);stroke:var(--ink-3);stroke-width:2;transition:fill .5s,stroke .5s,r .5s}
.j-enso .pt.on{fill:var(--red);stroke:var(--red)}
.j-enso .pt-n{font:italic 600 22px/1 var(--serif);fill:var(--ink-3);transition:fill .5s}
.j-enso .pt-n.on{fill:var(--red)}
.j-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:52%}
.j-center .n{display:block;font:italic 500 3rem/1 var(--serif);color:var(--red)}
.j-center .t{display:block;font:600 1.6rem/1.05 var(--script);color:var(--ink);margin-top:6px}
.j-mini{display:none}
.chap{min-height:62vh;padding:20px 0 70px;position:relative}
.chap:last-child{min-height:0;padding-bottom:0}
.chap .ch-n{font:600 1.7rem/1 var(--script);color:var(--red);display:block;margin-bottom:10px}
.chap h2{font-size:clamp(2rem,3.6vw,3rem)}
.chap p{color:var(--ink-2)}
.notes4{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;position:relative}
.notes4 li{background:#FFFDF8;box-shadow:var(--shadow-paper);padding:22px 20px 18px;position:relative;transform:rotate(var(--t))}
.notes4 li:nth-child(1){--t:-1.4deg}.notes4 li:nth-child(2){--t:1.2deg;margin-top:28px}.notes4 li:nth-child(3){--t:.8deg}.notes4 li:nth-child(4){--t:-1.6deg;margin-top:28px}
.notes4 b{font:italic 500 2.2rem/1 var(--serif);color:var(--blue);display:block;margin-bottom:6px}
.notes4 h3{font-size:1.25rem;margin-bottom:.3em}
.notes4 p{margin:0;font-size:1rem}
.index-card{position:relative;background:#FFFDF8;box-shadow:var(--shadow-paper);padding:30px 28px 26px;margin-top:22px;transform:rotate(-.6deg);
  background-image:linear-gradient(180deg,transparent 64px,rgba(184,58,38,.4) 64px 65.5px,transparent 0),repeating-linear-gradient(180deg,transparent 0 33px,rgba(42,71,166,.1) 33px 34px);background-position:0 0,0 66px}
.index-card .crosp{position:absolute;right:22px;top:16px;font:700 .82rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:2px solid var(--red);padding:7px 10px;transform:rotate(-6deg);opacity:.85;border-radius:3px}
.index-card .ic-t{font:600 1.7rem/1 var(--script);color:var(--ink);margin:0 0 30px}
.index-card ul{list-style:none;margin:0;padding:0}
.index-card li{padding:6px 0 6px 26px;position:relative;color:var(--ink);line-height:1.6}
.index-card li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:10px;border:1.6px solid var(--blue);border-radius:50%}
.pinned-cities{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:26px}
.pinned-cities .pc-card{position:relative}
.pinned-cities .print .ph{aspect-ratio:3/4;overflow:hidden}
.pinned-cities .pc-card:nth-child(1) .print{--tilt:-2.2deg}
.pinned-cities .pc-card:nth-child(2) .print{--tilt:2deg}
.pinned-cities .pc-card:nth-child(2){margin-top:40px}
.pinned-cities .ph img.l{object-position:0% 50%;width:200%;max-width:none}
.pinned-cities .ph img.r{object-position:100% 50%;width:200%;max-width:none;margin-left:-100%}
.pinned-cities .hand{display:block;font-size:1.6rem;margin:16px 0 4px}
.pinned-cities address{font-style:normal;color:var(--ink-2);line-height:1.55}
.pinned-cities .btns{margin-top:14px;gap:8px 14px}
.pinned-cities .btns .btn{min-height:46px;padding:10px 18px;font-size:.95rem}
@media (max-width:860px){
  .journey-grid{grid-template-columns:minmax(0,1fr)}
  .j-enso{display:none}
  .j-mini{display:flex;position:sticky;top:calc(var(--head) + 6px);z-index:20;align-items:center;gap:12px;margin:0 0 18px;padding:8px 14px 8px 8px;width:max-content;max-width:100%;border-radius:999px;background:rgba(255,253,248,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(21,33,58,.12)}
  .j-mini svg{width:44px;height:44px;flex:none}
  .j-mini .t{font:600 1.3rem/1 var(--script);color:var(--ink)}
  .j-mini .n{font:italic 600 1.1rem/1 var(--serif);color:var(--red)}
  .chap{min-height:0;padding-bottom:64px}
  .notes4{grid-template-columns:1fr}
  .notes4 li:nth-child(n){margin-top:0}
}
@media (max-width:560px){.pinned-cities{grid-template-columns:1fr}.pinned-cities .pc-card:nth-child(2){margin-top:0}}
/* film strip of his Shorts */
.filmstrip-wrap{position:relative;background:#1A1714;padding:30px 0;margin-top:30px;transform:rotate(-1deg);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.filmstrip-wrap::before,.filmstrip-wrap::after{content:"";position:absolute;left:0;right:0;height:14px;background:radial-gradient(circle,transparent 0,transparent 0) ,repeating-linear-gradient(90deg,transparent 0 10px,#F6F2EA 10px 22px,transparent 22px 34px);
  -webkit-mask:repeating-linear-gradient(90deg,transparent 0 12px,#000 12px 24px);mask:repeating-linear-gradient(90deg,transparent 0 12px,#000 12px 24px);opacity:.85}
.filmstrip-wrap::before{top:8px}.filmstrip-wrap::after{bottom:8px}
.filmstrip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,16vw,190px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px;scrollbar-width:none;overscroll-behavior-x:contain}
.filmstrip::-webkit-scrollbar{display:none}
.filmstrip:focus-visible{outline:2.5px solid #F6F2EA;outline-offset:-4px}
.filmstrip .vcard{scroll-snap-align:start;color:#F6F2EA}
.filmstrip .vcard .poster{border-radius:4px;box-shadow:none}
.filmstrip .vcard .cap{color:#F6F2EA;font-size:.98rem}
.filmstrip .vcard .cat{color:#C9C2B4}
.film-ctrl{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.film-ctrl button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.film-ctrl button:hover{background:var(--ink);color:#fff}
.film-ctrl svg{width:18px;height:18px}
/* closing letter */
.letter{max-width:720px;margin:0 auto;position:relative;background:#FFFDF8;box-shadow:var(--shadow-paper);padding:clamp(34px,5vw,60px);transform:rotate(.6deg)}
.letter .tape{left:50%;top:-14px;transform:translateX(-50%) rotate(-2deg)}
.letter h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.letter .sign{display:flex;align-items:center;gap:18px;margin-top:22px}
.letter .sign img.sig{height:84px;width:auto}

@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root){animation:none;-webkit-mask:none;mask:none}
  .js .stamp-wrap .stamp{opacity:1;transform:rotate(-4deg)}
  .js .stamp-wrap::before{opacity:.5}
  .js .mg path,.js .mg-line path,.js .sumi .brush-u path,.notebook-sheet .opt .box .tick{transition:none}
  .js .mg path,.js .mg-line path,.js .sumi .brush-u path{stroke-dashoffset:0}
  .js .mg-note{clip-path:none;transition:none}
  .js .enso[data-draw] .stroke,.js .enso[data-draw] .dry{stroke-dashoffset:0}
  .js:not(.hero-go) .sumi .ink,.js:not(.hero-go) .sumi .ink-img{opacity:1;animation:none}
  .door-print,.polaroid,.vgrid.pinned .vcard{transition:none}
  .xray{transition:none}
  .ink-cursor{display:none!important}
}
/* real photos of Wagner: framed tighter on the face (and away from any chest logo) inside the instant-photo */
.zw{display:block;overflow:hidden;aspect-ratio:1;background:var(--paper-2)}
.zw img,.polaroid .zw img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform:scale(var(--z,1.3));transform-origin:50% var(--zy,25%)}
.polaroid .play-dot{top:auto;bottom:70px;right:18px}
.nb-photos .p1 .zw{aspect-ratio:4/5}

/* Sobre ensō v2 (Alex 2026-10-06: idea good, drawing confusing): thin brush ring, labels beside each point, no ring text */
.enso .stroke{stroke-width:9}
.enso .dry{stroke-width:2.5;opacity:.28}
.j-enso{max-width:620px}
.j-enso .pt{fill:var(--paper);stroke:var(--ink-3);stroke-width:2}
.j-enso .pt.done{fill:var(--paper);stroke:var(--red);stroke-width:2.5}
.j-enso .pt.on{fill:var(--red);stroke:var(--red);r:11}
.j-enso .pt-n{font:600 15px/1 var(--sans);letter-spacing:.06em;fill:var(--ink-3);transition:fill .5s,opacity .5s;opacity:.7}
.j-enso .pt-n .pl-n{font:italic 600 19px/1 var(--serif);fill:var(--ink-3)}
.j-enso .pt-n.done{opacity:.9}
.j-enso .pt-n.on{fill:var(--ink);opacity:1}
.j-enso .pt-n.on .pl-n,.j-enso .pt-n.done .pl-n{fill:var(--red)}
.j-center .k{display:block;font:600 .78rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

/* Tooth cursor (Alex 2026-10-06, option 2): real CSS cursor on fine pointers; replaces the ink follower */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:url("cursor-dente.svg") 20 6,auto}
  a,button,[role=button],label,summary,select,.hot,.polaroid,.chip{cursor:url("cursor-dente-link.svg") 20 6,pointer}
  input[type=text],textarea{cursor:text}
  .ink-cursor{display:none!important}
}

/* Hero calm (Alex 2026-10-06: too many voices): one sentence, one serif, only "mastiga" in red italic */
.sumi .calm-h{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.04;letter-spacing:-.015em;text-transform:none;margin:18px 0 22px;max-width:13ch}
.sumi .calm-h .l{display:block;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;margin:0;padding:0;transform:none}
.sumi .calm-h em{font-style:italic;font-weight:500;color:var(--red)}
.sumi .lead{max-width:44ch}
.sumi .eyebrow{letter-spacing:.22em}

/* phones: keep the last on-page link clear of the chat button */
@media (max-width:560px){.hero-jump{padding-right:150px}}