/* Full-screen opening canvas. Content may grow on short screens and at text zoom. */
.hero{min-height:calc(100svh - 82px);display:flex;flex-direction:column;isolation:isolate;--pointer-x:0px;--pointer-y:0px;--glow-x:68%;--glow-y:38%}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 48% 62% at var(--glow-x) var(--glow-y),#ff784a12,transparent 80%)}
.hero .ruler{flex-shrink:0}.hero-top{padding-top:clamp(20px,3.5svh,44px)}
.hero-composition{flex:1;display:flex;align-items:center;margin:clamp(35px,6svh,84px) 0 clamp(35px,5svh,70px);min-height:210px}
.hero-type{width:78%;padding:14px 12px 18px;transform:translate(calc(var(--pointer-x)*-.25),calc(var(--pointer-y)*-.25));transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hero h1{font-size:clamp(7rem,min(21vw,35svh),24rem);display:flex;letter-spacing:-.085em;line-height:.9;white-space:nowrap}
.hero .letter{display:inline-block;animation:letter-arrive .95s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter-index)*90ms + 120ms)}
.letter:nth-child(1){--letter-index:0}.letter:nth-child(2){--letter-index:1}.letter:nth-child(3){--letter-index:2}.letter:nth-child(4){--letter-index:3}.letter:nth-child(5){--letter-index:4}
.hero .note{top:50%;width:25%;min-width:190px;transform:translate(var(--pointer-x),calc(-50% + var(--pointer-y))) rotate(7deg);animation:note-drift 7s ease-in-out infinite;transition:none}

.hero-bottom{padding-bottom:clamp(24px,4svh,48px)}.hero-top,.hero-bottom,.canvas-foot{animation:canvas-arrive .85s ease-out both}.hero-bottom{animation-delay:.35s}.canvas-foot{animation-delay:.5s}
.hero-controls{display:flex;align-items:center;gap:26px}.motion-toggle{background:none;border:0;color:var(--muted);font:inherit;text-transform:uppercase;letter-spacing:inherit;cursor:pointer;padding:4px 0}.motion-toggle:hover{color:var(--orange)}.motion-toggle[hidden]{display:none}.scroll-cue{display:inline-flex;align-items:center;gap:12px}.scroll-cue span{display:inline-block;font-size:1rem;color:var(--orange);animation:scroll-nudge 2s ease-in-out infinite}
.hero.motion-paused *{animation-play-state:paused!important}.hero.motion-paused .hero-type{transform:none;transition:none}.hero.motion-paused::before{background:radial-gradient(ellipse at 68% 38%,#ff784a0d,transparent 70%)}
@keyframes letter-arrive{from{opacity:0;transform:translateY(35%) rotate(6deg);filter:blur(7px)}to{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}
@keyframes canvas-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes note-drift{0%,100%{transform:translate(var(--pointer-x),calc(-50% + var(--pointer-y))) rotate(7deg)}50%{transform:translate(calc(var(--pointer-x) - 5px),calc(-50% + var(--pointer-y) - 10px)) rotate(4deg)}}


@keyframes scroll-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
/* The work gallery continues the graphite canvas, with warm orange diagram accents. */
.work-section{background:#20211f;color:var(--ink);border-top:1px solid var(--line)}
.section-heading .orange{color:var(--orange)}.section-summary{color:var(--muted)}
.project-frame{border-color:#62615a;background:#252623}.project-frame:hover{box-shadow:9px 9px 0 #ff784a24;border-color:var(--orange)}
.frame-bar{border-color:#62615a;color:#cbc8bd}.frame-bar .cross{color:var(--orange)}
.work-section .project-art{background:#2d2723;background-image:radial-gradient(ellipse at 90% 0%,#ff784a1c,transparent 60%)}
.work-section .art-heading>.small,.work-section .art-caption,.work-section .path-label,.work-section .concept-label{color:#dbb9a7}
.work-section .art-heading strong{color:#f4e7dc}.work-section .path-node{background:#e9ddd1;border-color:#bf9b85;color:#28211c;box-shadow:5px 7px 0 #0002}.work-section .path-node small{color:#635043}
.work-section .node-symbol{border-color:#aa7f65}.work-section .path-selected{background:var(--orange);border-color:var(--orange);color:#211a15}.work-section .path-selected small{color:#4d2819}.work-section .path-selected .node-symbol{background:#211a15;color:#ff956d;border-color:#211a15}.work-section .node-check{color:#211a15}
.work-section .path-line{background:#b47956}.work-section .path-options>div{background:#3b3028;color:#f2e3d5;border-color:#86644d}.work-section .path-options span{color:#ffac82}
.project-caption p{color:#b7b7ab}.tags span{border-color:#68685e;color:#d6d6cb}.open-case>span{color:var(--orange)}.work-end{color:var(--muted)}
@media(min-width:1600px){.hero h1{font-size:clamp(17rem,min(21vw,35svh),24rem)}}
@media(max-width:900px){.hero h1{font-size:clamp(7rem,min(21vw,35svh),17rem)}.hero .note{width:25%;min-width:170px}.hero-type{width:77%}}
@media(max-width:600px){.hero{min-height:calc(100svh - 70px)}.hero-top{padding-top:22px}.hero-composition{flex:1;display:block;min-height:285px;padding-bottom:185px;margin:40px 0 20px}.hero-type{width:100%;padding:7px 5px 10px}.hero h1{font-size:25vw}.hero .note{top:auto;bottom:0;right:5px;width:168px;min-width:0;padding:19px 16px 17px;animation-name:note-drift-mobile}.hero .note p{font-size:1.25rem;line-height:1.2;margin:0 0 12px}.hero .note .small{font-size:.75rem}.hero .note-pin{font-size:2.5rem;top:-16px}.hero-bottom{padding-bottom:22px}.hero-bottom p{font-size:.95rem;margin-top:8px}.work-link{margin-top:18px;gap:6px}.hero-controls{gap:18px;justify-content:space-between;width:100%}.canvas-foot{padding:14px 0;gap:8px}.canvas-foot>span{display:none}.hero-top p{font-size:.65rem}.index-tag{font-size:.65rem}.open-case{border-top-color:#62615a}}
@keyframes note-drift-mobile{0%,100%{transform:translate(0,0) rotate(7deg)}50%{transform:translate(-4px,-7px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.hero *, .hero *::before,.hero *::after{animation:none!important;transition:none!important}.hero-type{transform:none!important}.hero .note{transform:translateY(-50%) rotate(7deg)}.hero::before{background:radial-gradient(ellipse at 68% 38%,#ff784a0d,transparent 70%)}}
@media(prefers-reduced-motion:reduce) and (max-width:600px){.hero .note{transform:rotate(7deg)}}
/* Gentle canvas motion; the name remains stable and easy to read. */
.hero::before{animation:hero-glow 10s ease-in-out infinite;transform-origin:70% 40%}
.hero .ruler{position:relative;overflow:hidden}.hero .ruler::after{content:'';position:absolute;left:0;top:0;width:18%;height:2px;background:linear-gradient(90deg,transparent,#ff784aa0,transparent);animation:ruler-sweep 14s ease-in-out infinite;pointer-events:none}
.hero .selection-corner{animation:frame-breathe 5.5s ease-in-out infinite}.hero .selection-corner.tr,.hero .selection-corner.bl{animation-delay:1.3s}
.hero .index-tag{animation:index-rock 9s ease-in-out infinite;transform-origin:center}
.hero .period{animation:letter-arrive .95s cubic-bezier(.16,1,.3,1) 480ms both,period-warmth 6s ease-in-out 1.5s infinite}
.hero.motion-paused::before,.hero.motion-paused .ruler::after{animation-play-state:paused}
@keyframes hero-glow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes ruler-sweep{0%,100%{transform:translateX(-100%);opacity:0}10%,90%{opacity:.8}50%{transform:translateX(560%);opacity:.8}}
@keyframes frame-breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #ff784a00}50%{transform:scale(1.3);box-shadow:0 0 0 4px #ff784a0d}}
@keyframes index-rock{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes period-warmth{0%,100%{text-shadow:0 0 0 #ff784a00}50%{text-shadow:0 0 24px #ff784a45}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero .ruler::after{animation:none!important}.hero .ruler::after{display:none}.hero .selection-corner{transform:none}.hero .period{text-shadow:none}}
/* Full name types in once on entry, with its finished space reserved. */
.hero h1{display:block}.hero .name-line{display:flex;width:max-content;max-width:100%;position:relative}.hero .last-name{font-size:clamp(2rem,7.3vw,8rem);letter-spacing:-.06em;line-height:1.15;margin-top:12px;color:var(--ink)}
.hero .letter,.hero .period{visibility:hidden;animation:name-type .01s step-end both;animation-delay:calc(220ms + var(--type-index)*110ms);transform:none;filter:none}
.hero .period{color:var(--orange)}
@keyframes name-type{from{visibility:hidden}to{visibility:visible}}

.hero.motion-paused .letter{animation:none!important;visibility:visible}.hero.motion-paused .last-name::after{display:none}
@media(max-width:900px){.hero .last-name{font-size:7.3vw}}
@media(max-width:600px){.hero .last-name{font-size:8.9vw;margin-top:9px;line-height:1.2}.hero-composition{min-height:375px}}
@media(prefers-reduced-motion:reduce){.hero .letter{visibility:visible}}

/* A caret travels with each typed character, then blinks at the final period. */
.hero .letter{position:relative}
.hero .letter::after{content:"";position:absolute;left:100%;top:14%;height:72%;width:3px;margin-left:5px;background:var(--orange);pointer-events:none;animation:caret-step 110ms step-end both;animation-delay:calc(230ms + var(--type-index)*110ms)}
.hero .last-name .letter:last-child::after{animation:caret-blink 900ms step-end infinite;animation-delay:calc(230ms + var(--type-index)*110ms);animation-fill-mode:backwards}
@keyframes caret-step{from{opacity:1}to{opacity:0}}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero.motion-paused .letter::after{display:none}
@media(max-width:600px){.hero .letter::after{width:2px;margin-left:3px}}
@media(prefers-reduced-motion:reduce){.hero .letter::after{display:none}}

/* Two clear paths from the opening canvas. */
.hero-links{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;width:min(58%,630px)}.hero-links .work-link{min-width:0;margin-top:0}.hero-links .work-link>span:last-child{gap:12px}.hero-links .small{font-size:.65rem}.hero-links .round-icon{flex-shrink:0}
@media(max-width:1000px){.hero-bottom{align-items:start}.hero-links{grid-template-columns:1fr;gap:20px;width:45%}}
@media(max-width:600px){.hero-links{width:100%;margin-top:26px;gap:22px}.hero-links .work-link{font-size:1rem}.hero-links .small{font-size:.65rem}}

/* A compact opening composition for phones, with every element in normal flow. */
@media(max-width:600px){
  .hero{min-height:calc(100svh - 70px);padding:0 6%;background-size:28px 28px}
  .hero .ruler{height:25px}.hero .ruler span{padding-top:10px}.hero .ruler span:nth-child(even){visibility:hidden}
  .hero-top{padding-top:20px;gap:18px;align-items:center}.hero-top p{font-size:.56rem;line-height:1.65;max-width:190px}.hero .cross{font-size:1rem;margin-right:5px}
  .hero .index-tag{font-size:.55rem;padding:7px 10px;white-space:nowrap;animation:none;transform:none}
  .hero-composition{display:grid;gap:20px;flex:1;align-content:center;min-height:0;margin:38px 0 22px;padding:0}
  .hero-type{padding:12px 10px 14px;transform:none}.hero .selection-label{top:-25px;font-size:.6rem}
  .hero h1{font-size:25vw}.hero .last-name{font-size:8.6vw;margin-top:8px}
  .hero .note{position:relative;inset:auto;width:100%;min-width:0;transform:none;animation:none;padding:14px 16px;box-shadow:none}
  .hero .note p{font-size:1.22rem;line-height:1.25;margin:0 0 7px}.hero .note p br{display:none}.hero .note p br::after{content:' '}
  .hero .note .small{font-size:.56rem;letter-spacing:.06em}
  .hero-bottom{display:block;padding-bottom:20px}.hero-bottom p{font-size:.9rem;line-height:1.55;margin-top:8px;max-width:34ch}.hero-bottom p br{display:none}.hero-bottom .orange{font-size:.6rem}
  .hero-links{grid-template-columns:1fr 1fr;width:100%;gap:12px;margin-top:20px}
  .hero-links .work-link{border:1px solid var(--line);padding:11px 12px;font-size:.8rem;line-height:1.5;min-height:70px;justify-content:center}
  .hero-links .small{display:none}.hero-links .work-link>span:last-child{gap:8px}.hero-links .round-icon{width:24px;height:24px;font-size:1.05rem}
  .hero .canvas-foot{padding:13px 0;font-size:.56rem}.hero-controls{gap:12px}.hero .scroll-cue{gap:8px}
}