@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f1e7d3;--ink:#252a2b;--red:#c74b33;--blue:#233d57;--yellow:#edbd59;--muted:#665f53;--line:rgba(36,44,46,.22);scroll-behavior:smooth}*{box-sizing:border-box}html{scroll-snap-type:y proximity;scroll-padding-top:72px}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.17;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='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.21' filter='url(%23n)'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.skip{position:absolute;transform:translateY(-200%);z-index:100;background:var(--ink);color:white;padding:10px}.skip:focus{transform:translateY(0)}.topbar{height:76px;position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5.5vw,95px);background:rgba(241,231,211,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(36,44,46,.12)}.mark{font:700 32px 'Space Grotesk',sans-serif;letter-spacing:-.12em}.dot,.title-dot{color:var(--red)}.topbar nav{display:flex;gap:clamp(15px,3vw,42px)}.topbar nav a{font-size:13px;transition:opacity .2s}.topbar nav a:hover,.topbar nav .active{color:var(--red)}#menu-toggle{display:none}.mobile-menu{position:fixed;top:76px;left:0;right:0;background:var(--paper);z-index:19;padding:24px;border-bottom:1px solid var(--line);flex-direction:column;gap:25px}.mobile-menu:not([hidden]){display:flex}.chapter{min-height:100svh;scroll-snap-align:start;position:relative;isolation:isolate;overflow:hidden}.hero{padding:clamp(115px,13vh,180px) 7vw 70px;display:flex;align-items:center}.hero-disc{position:absolute;width:min(39vw,580px);aspect-ratio:1;border-radius:50%;background:#c44934;left:47%;top:14%;transform:translate3d(0,var(--discY,0px),0);z-index:-1;transition:transform .5s ease-out}.hero-type{position:relative;z-index:2;pointer-events:none}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.28em;color:var(--red);margin:0 0 24px}.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.085em;font-size:clamp(64px,10.4vw,190px);line-height:.9;margin:0}.hero h1 span{display:block}.profession{font-size:clamp(14px,1.65vw,23px);margin:36px 0 0;font-weight:500;letter-spacing:-.015em}.mid-dot{color:var(--red);margin:0 5px}.bonsai-wrap{position:absolute;width:min(48vw,710px);right:0;bottom:5%;transform:translate3d(var(--treeX,0px),var(--treeY,0px),0);transition:transform .6s ease-out;z-index:1;pointer-events:none}.bonsai{display:block;width:100%;height:auto;filter:drop-shadow(10px 25px 14px rgba(44,35,19,.12))}.vertical-note{position:absolute;right:4%;top:17%;writing-mode:vertical-rl;letter-spacing:.35em;color:var(--blue);font-size:12px}.scroll-cue{position:absolute;left:7vw;bottom:42px;font-size:12px;display:flex;gap:18px;align-items:center;text-transform:uppercase;letter-spacing:.2em;z-index:3}.scroll-cue span{font-size:24px}.paper-rail{position:absolute;right:3vw;bottom:40px;font-size:10px;letter-spacing:.12em;opacity:.55;writing-mode:vertical-rl}.about{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:center;gap:clamp(18px,2vw,34px);padding:110px clamp(28px,8vw,150px) 50px;background:#e8e1d1}.about-copy{position:relative;z-index:2;max-width:none;padding-right:clamp(6px,1vw,18px)}.about h2,.contact h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(60px,6vw,108px);letter-spacing:-.08em;line-height:.99;margin:0 0 28px}.about h2 em,.contact h2 em{font-style:normal;color:var(--red)}.bodycopy{max-width:650px}.bodycopy p{font-size:clamp(15px,1.08vw,18px);line-height:1.68;margin:0 0 15px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.facts div{display:flex;flex-direction:column;gap:4px}.facts strong{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(25px,2.2vw,36px);letter-spacing:-.05em;line-height:1}.facts .fact-number{font-size:1.46em;letter-spacing:-.08em}.facts span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.portrait-scene{position:relative;align-self:end;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:18px;min-width:0}.portrait-visual{height:min(58vh,610px);min-height:350px;position:relative;display:flex;align-items:end;justify-content:center}.portrait-disc{position:absolute;width:85%;aspect-ratio:1;border-radius:50%;background:#27485c;left:7%;top:14%;transform:translateY(var(--portraitY,0px));transition:transform .6s ease-out}.portrait-lines{position:absolute;inset:15% 0 6% 10%;border-top:1px solid rgba(220,194,151,.6);border-left:1px solid rgba(220,194,151,.6);transform:rotate(-5deg)}.portrait{width:min(112%,620px);max-height:103%;object-fit:contain;object-position:bottom;position:relative;z-index:2;transform:translateY(2%);filter:drop-shadow(8px 10px 8px rgba(9,24,30,.1))}.portrait-ground{height:10px;position:absolute;bottom:0;left:0;right:0;background:var(--red);z-index:3}.facts-side{padding-top:16px;border-top:1px solid var(--line);max-width:520px;align-self:center;width:100%}.section-side{position:absolute;left:20px;top:45%;writing-mode:vertical-rl;font-size:12px;letter-spacing:.45em;color:var(--red)}.contact{padding:145px 9vw 50px;display:flex;align-items:center;background:#263d4f;color:#f4e8d2}.contact-sun{position:absolute;right:-12vw;top:8%;border-radius:50%;height:65vw;width:65vw;max-width:900px;max-height:900px;background:#b84937;opacity:.95;z-index:-1}.contact-inner{position:relative;z-index:1;width:min(100%,1000px)}.contact-intro{font-size:clamp(16px,2vw,24px);margin:0 0 25px}.contact h2{font-size:clamp(86px,13vw,220px);margin:0 0 70px}.contact h2 em{color:#f3c76c}.contact-links{display:flex;flex-direction:column;gap:15px;max-width:580px}.contact-links>a,.email-row,.awaiting{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(255,255,255,.35);padding:10px 0;font-size:clamp(17px,2vw,26px)}.contact-links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.email-row a{overflow-wrap:anywhere}.email-row button{border:1px solid rgba(255,255,255,.55);background:none;color:inherit;padding:7px 12px;border-radius:100px;font-size:12px;white-space:nowrap}.awaiting{color:#c7c3bb}.awaiting small{font-size:12px}.contact footer{position:absolute;bottom:30px;left:9vw;right:9vw;display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#e2d6c2}.floating-controls{position:fixed;right:20px;bottom:18px;z-index:25}.floating-controls button{border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:11px;padding:8px 13px;border-radius:50px}.reveal{opacity:0;transform:translateY(32px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}.reveal.in-view{opacity:1;transform:translateY(0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:850px){html{scroll-snap-type:none}.topbar nav{gap:15px}.hero{padding:140px 5vw 80px;align-items:flex-start}.hero h1{font-size:clamp(58px,11vw,100px)}.hero-disc{width:64vw;top:31%;left:38%}.bonsai-wrap{width:78vw;right:-9%;bottom:7%}.about{grid-template-columns:1fr;gap:0;padding:115px 7vw 20px}.about-copy{max-width:none;padding-right:0}.portrait-scene{width:min(100%,550px);justify-self:center;margin-top:26px;gap:14px}.portrait-visual{height:520px;min-height:0}.portrait{max-height:100%}.facts-side{max-width:none}.contact{padding:160px 7vw 100px}.contact-sun{width:100vw;height:100vw;top:35%;right:-45%}}
@media(max-width:540px){.topbar{height:68px;padding:0 20px}.topbar nav{display:none}#menu-toggle{display:block;background:none;border:0;font-size:13px}.hero{padding:132px 22px 80px;min-height:100svh}.hero h1{font-size:clamp(48px,12.2vw,73px)}.profession{margin-top:20px;max-width:250px;line-height:1.5}.eyebrow{font-size:11px}.hero-disc{width:87vw;left:23%;top:39%}.bonsai-wrap{width:100vw;right:-19%;bottom:9%}.scroll-cue{left:23px;bottom:30px}.vertical-note,.paper-rail{display:none}.about{padding:110px 24px 24px}.about h2{font-size:60px}.bodycopy p{font-size:15px;line-height:1.65}.facts{gap:9px;grid-template-columns:1fr}.facts strong{font-size:26px}.facts .fact-number{font-size:1.4em}.facts span{font-size:10px}.portrait-scene{max-width:420px}.portrait-visual{height:400px}.contact{padding:120px 24px 110px}.contact h2{font-size:clamp(67px,16vw,110px);margin-bottom:50px}.contact-links>a,.email-row,.awaiting{font-size:18px}.contact footer{left:24px;right:24px;bottom:22px;font-size:10px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto!important}html{scroll-snap-type:none!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}body.reduced-motion{scroll-behavior:auto}body.reduced-motion .reveal{opacity:1;transform:none;transition:none}body.reduced-motion .hero-disc,body.reduced-motion .bonsai-wrap,body.reduced-motion .portrait-disc{transform:none;transition:none}body.reduced-motion{scroll-snap-type:none}

/* Traduções discretas das inscrições japonesas — tipografia e cores do próprio tema. */
.jp-translation{position:relative;display:inline-block;cursor:help;outline-offset:5px}
.hero-type .jp-translation{pointer-events:auto}
.jp-translation::after{content:attr(data-translation);position:absolute;inset:auto auto calc(100% + 11px) 50%;transform:translate(-50%,5px);writing-mode:horizontal-tb;white-space:nowrap;max-width:min(80vw,280px);padding:8px 11px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:12px;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none;box-shadow:0 7px 18px rgba(36,44,46,.13);opacity:0;visibility:hidden;pointer-events:none;z-index:50;transition:opacity .15s ease,transform .15s ease,visibility .15s}
.jp-translation:hover::after,.jp-translation:focus-visible::after,.jp-translation:focus::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.vertical-note .jp-translation::after,.section-side .jp-translation::after{inset:50% auto auto auto;left:auto;right:calc(100% + 12px);transform:translateY(calc(-50% + 5px));}
.section-side .jp-translation::after{left:calc(100% + 12px);right:auto}
.vertical-note .jp-translation:hover::after,.vertical-note .jp-translation:focus::after,.section-side .jp-translation:hover::after,.section-side .jp-translation:focus::after{transform:translateY(-50%)}
@media(prefers-reduced-motion:reduce){.jp-translation::after{transition:none}}

/* Contact section: retain poster-scale typography without pushing links below the fold. */
@media (min-width: 851px) {
  .contact {
    min-height: 100svh;
    padding: 96px 9vw 62px;
  }
  .contact-intro { margin-bottom: 12px; font-size: clamp(16px,1.5vw,21px); }
  .contact h2 { font-size: clamp(70px,9vw,148px); line-height: .92; margin-bottom: clamp(20px,3vh,34px); }
  .contact-links { gap: 3px; }
  .contact-links > a, .contact .email-row, .contact .awaiting { padding: 8px 0; font-size: clamp(17px,1.6vw,23px); }
  .contact footer { bottom: 22px; }
  .contact-sun { width: min(59vw,790px); height: min(59vw,790px); top: 10%; }
}
@media (min-width: 851px) and (max-height: 720px) {
  .contact { padding-top: 86px; padding-bottom: 48px; }
  .contact h2 { font-size: clamp(58px, min(8vw, 15vh), 118px); margin-bottom: 14px; }
  .contact-intro { margin-bottom: 8px; }
  .contact-links > a, .contact .email-row, .contact .awaiting { padding: 5px 0; }
  .contact footer { bottom: 12px; }
}

/* Keep the side caption beside the heading and the bonsai below the title on narrow screens. */
@media (min-width: 541px) and (max-width: 850px) {
  .hero h1 { font-size: clamp(58px, 10vw, 76px); }
  .profession { max-width: 265px; line-height: 1.5; }
  .bonsai-wrap { width: min(60vw, 400px); right: -3%; bottom: 3%; }
  .about .section-side { top: 112px; left: 16px; }
  .contact { padding-top: 110px; }
  .contact h2 { margin-bottom: 34px; }
  .contact footer { bottom: 66px; }
  .contact footer a { margin-right: 140px; }
}
@media (max-width: 540px) {
  .hero { padding-top: 112px; }
  .bonsai-wrap { width: 86vw; right: -12%; bottom: 3%; }
  .about { padding-top: 32px; }
  .about .section-side {
    position: static; writing-mode: horizontal-tb;
    font-size: 11px; font-weight: 700; letter-spacing: .28em;
    margin: 0 0 24px;
  }
  .about .section-side .jp-translation::after {
    inset: auto auto calc(100% + 11px) 0; transform: translateY(5px);
  }
  .about .section-side .jp-translation:hover::after,
  .about .section-side .jp-translation:focus::after { transform: translateY(0); }
  .contact { padding-top: 105px; }
  .contact h2 { margin-bottom: 32px; }
  .contact footer { bottom: 66px; flex-direction: column; align-items: flex-start; }
}

/* Keep the mobile illustration together, below the introductory text. */
.hero-art { display: contents; }
.hero-art .bonsai-wrap { width: min(43vw, 640px); right: 2%; }
@media (max-width: 850px) {
  .hero-art .bonsai-wrap { width: min(60vw, 400px); right: -3%; }
}
@media (max-width: 540px) {
  .hero { flex-direction: column; justify-content: space-between; gap: 20px; padding: 96px 22px 66px; }
  .hero h1 .title-dot { display: inline; }
  .profession { max-width: none; }
  .profession-role, .profession-details { display: block; }
  .profession-separator { display: none; }
  .hero-art { display: block; position: relative; isolation: isolate; width: min(100%, 42svh); aspect-ratio: 1; align-self: center; flex: none; margin-block: auto; }
  .hero-art .hero-disc { width: 94%; left: 6%; top: 0; transform: none; }
  .hero-art .bonsai-wrap { width: 100%; right: -4%; bottom: -5%; transform: none; }
}

/* Portrait and facts share one responsive composition. */
.portrait-scene {
  width: min(100%, 520px); justify-self: center; align-self: center;
  display: flex; flex-direction: column; gap: 0; margin-top: 0;
}
.portrait-visual {
  width: 100%; height: auto; min-height: 0; aspect-ratio: 1.2;
  position: relative; isolation: isolate; overflow: hidden;
}
.portrait-disc {
  background: #14242d;
  width: 66.3%; height: auto; aspect-ratio: 1; left: 16.85%;
  top: auto; bottom: 12%; transform: none; transition: none;
}
.portrait {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: contain; object-position: center bottom; transform: none;
}
.portrait-ground {
  position: relative; inset: auto; width: 100%; height: auto;
  background: transparent; color: var(--ink); z-index: 3;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px 0 20px;
}
.portrait-fact { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.portrait-fact + .portrait-fact { border-left: 1px solid var(--line); }
.portrait-fact strong {
  font: 500 clamp(38px, 3.5vw, 52px)/.95 'Space Grotesk', sans-serif;
  letter-spacing: -.06em; font-variant-numeric: lining-nums;
}
.fact-unit, .fact-description {
  font-family: inherit; font-size: 10px; font-weight: 400;
  line-height: 1.4; letter-spacing: .14em; color: inherit;
}
.fact-unit { margin-top: 5px; }
.fact-description { margin-top: 0; }
@media (min-width: 851px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-top: 78px; padding-bottom: 32px; min-height: calc(100svh - 76px); }
}
@media (max-width: 850px) {
  .about { padding-top: 24px; padding-bottom: 20px; }
  .portrait-scene { width: min(100%, 440px); margin-top: 28px; }
}
@media (max-width: 540px) {
  .portrait-ground { padding: 16px 0 18px; }
  .portrait-fact strong { font-size: 38px; }
}

/* Section transitions use the visible-area threshold in home.js. */
html { scroll-snap-type: none; }
@media (max-width: 850px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: none; scroll-padding-top: 76px; }
  .chapter { scroll-snap-align: start; scroll-snap-stop: normal; }
}
@media (max-width: 540px) {
  html { scroll-padding-top: 68px; }
}

.trajectory-cta {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:52px;
  margin-top:19px;
  padding:14px 19px;
  background:var(--ink);
  color:var(--paper);
  font:600 14px/1.2 'Space Grotesk',sans-serif;
  transition:background .2s ease,transform .2s ease;
}
.trajectory-cta:hover { background:var(--red); transform:translateY(-2px); }
.trajectory-cta:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.trajectory-cta span { font-size:19px; line-height:1; }