/* Studio Yori — shared primitives: resets, figure keyframes, nav, marquee. Layout stays inline. */
html{scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:hidden}
*{box-sizing:border-box}
body{margin:0;background:#F7F3EA;color:#1A1714;font-family:'Syne',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
x-dc{display:block}
a{color:#D2432A;text-decoration:none}
a:hover{color:#a5321d}
::selection{background:#1F6FE6;color:#F7F3EA}
img{max-width:100%;display:block}

/* nav */
nav a{transition:color .35s ease}
nav a:hover{color:#1A1714 !important}
#nav-toggle{display:none;background:none;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-size:24px;color:#1A1714;padding:2px 6px;line-height:1;z-index:130}
.nav-close{display:none}
.nav-on{color:#1A1714 !important;position:relative}
.nav-on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#1A1714}
@media (max-width:1040px){#nav-tagline{display:none}}
@media (max-width:820px){
  #nav-tagline{display:none}
  #nav-toggle{display:block}
  #nav-links{position:fixed;top:0;right:0;height:100vh;width:min(82vw,320px);background:#F7F3EA;border-left:1px solid #1A1714;flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;padding:48px;opacity:0;pointer-events:none;transition:opacity .4s ease;box-shadow:-20px 0 50px rgba(26,23,20,.14)}
  #nav-links.open{opacity:1;pointer-events:auto}
  #nav-links a{font-size:15px}
  .nav-close{display:block;position:absolute;top:22px;right:26px;background:none;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-size:26px;line-height:1;color:#1A1714}
}

/* reveal on scroll */
[data-rev]{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
[data-rev].in{opacity:1;transform:none}

/* stillness switch */
.no-motion *{animation:none !important}

/* hero flip tiles */
.tile{position:relative;overflow:hidden;background:#F1EADC;perspective:1300px;cursor:pointer}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.tile:nth-child(1):hover .flip,.tile:nth-child(1).flip-on .flip{transform:rotateY(180deg)}
.tile:nth-child(2):hover .flip,.tile:nth-child(2).flip-on .flip{transform:rotateX(180deg)}
.tile:nth-child(3):hover .flip,.tile:nth-child(3).flip-on .flip{transform:rotateY(-180deg)}
.tile:nth-child(4):hover .flip,.tile:nth-child(4).flip-on .flip{transform:rotateX(-180deg)}
.tile:nth-child(5):hover .flip,.tile:nth-child(5).flip-on .flip{transform:rotateX(180deg)}
.tile:nth-child(6):hover .flip,.tile:nth-child(6).flip-on .flip{transform:rotateY(-180deg)}
.tile:nth-child(7):hover .flip,.tile:nth-child(7).flip-on .flip{transform:rotateX(180deg)}
.tile:nth-child(8):hover .flip,.tile:nth-child(8).flip-on .flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden}
.back{transform:rotateY(180deg)}
.tile:nth-child(2) .back,.tile:nth-child(4) .back,.tile:nth-child(5) .back,.tile:nth-child(7) .back{transform:rotateX(180deg)}

/* offer flip cards */
.cc{position:relative;perspective:1100px;min-height:250px;cursor:pointer}
.cc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.72,.2,1)}
.cc:hover .cc-in,.cc:focus-within .cc-in{transform:rotateY(180deg)}
.cc:nth-child(even):hover .cc-in,.cc:nth-child(even):focus-within .cc-in{transform:rotateX(180deg)}
.cc-f,.cc-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.cc-b{transform:rotateY(180deg);background:#1A1714;color:#F1EADC}
.cc:nth-child(even) .cc-b{transform:rotateX(180deg)}
.cc-b ul{margin:0;padding:0;list-style:none}
.cc-b li{font-family:'Syne',sans-serif;font-weight:400;font-size:12.5px;line-height:1.35;padding:7px 0;border-bottom:1px solid rgba(241,234,220,.18)}
.cc-b li:last-child{border-bottom:none}

/* about — principles, portrait, ghost word */
@keyframes ab-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mc-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes mc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ab-portrait{transition:transform .8s cubic-bezier(.2,.7,.2,1);transform:rotate(-2deg)}
.ab-portrait:hover{transform:rotate(0deg) translateY(-6px)}
.prin{border-top:1px solid rgba(26,23,20,.16);padding:20px 0;cursor:default;outline:none}
.prin:last-of-type{border-bottom:1px solid rgba(26,23,20,.16)}
.prin-word{transition:color .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);display:inline-block;color:#1A1714}
.prin:hover .prin-word,.prin:focus-within .prin-word{color:var(--ac);transform:translateX(8px)}
.prin-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .7s cubic-bezier(.2,.7,.2,1),opacity .55s ease,margin-top .6s ease}
.prin:hover .prin-reveal,.prin:focus-within .prin-reveal{max-height:90px;opacity:1;margin-top:12px}

/* ways-to-work cards */
.sv{border:1px solid #1A1714;padding:26px 26px 30px;display:flex;flex-direction:column;background:#F7F3EA;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease}
.sv:hover{transform:translateY(-6px);box-shadow:0 16px 34px -18px rgba(26,23,20,.4)}
.sv ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.sv li{display:flex;align-items:center;gap:11px;font-family:'Syne',sans-serif;font-weight:400;font-size:14px;color:#3f3a32}
.sv li span{width:7px;height:7px;flex:none}

/* form */
.lbl{display:block;font-family:'Syne',sans-serif;font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:10px;color:#8a8272;margin-bottom:8px}
.field{width:100%;border:none;border-bottom:1px solid rgba(26,23,20,.28);background:transparent;font-family:'Syne',sans-serif;font-weight:400;font-size:16px;color:#1A1714;padding:12px 0;outline:none;transition:border-color .35s ease}
.field:focus{border-color:#1A1714}
.field::placeholder{color:#b3a992}
textarea.field{resize:vertical;min-height:110px;line-height:1.6}
.send{align-self:flex-start;cursor:pointer;font-family:'Syne',sans-serif;font-weight:600;font-size:14px;letter-spacing:.03em;color:#1A1714;background:transparent;border:1.5px solid #1A1714;padding:15px 30px;transition:background .35s ease,color .35s ease}
.send:hover{background:#1A1714;color:#F7F3EA}

/* marquee */
@keyframes y-marquee{to{transform:translateX(-50%)}}

/* figure rigging */
.lb{transform-box:fill-box;transform-origin:50% 0%}
@keyframes fig-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes act-toe{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes act-armReachL{0%,100%{transform:rotate(0)}50%{transform:rotate(118deg)}}
@keyframes act-armReachR{0%,100%{transform:rotate(0)}50%{transform:rotate(-118deg)}}
@keyframes act-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes act-legStrideP{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(32deg)}}
@keyframes act-legStrideN{0%,100%{transform:rotate(32deg)}50%{transform:rotate(-32deg)}}
@keyframes act-armSwP{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes act-armSwN{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes act-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes act-legLift{0%,100%{transform:rotate(0)}42%,72%{transform:rotate(52deg)}}
@keyframes act-balArmL{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
@keyframes act-balArmR{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
@keyframes act-fold{0%,100%{transform:rotate(0)}50%{transform:rotate(80deg)}}
@keyframes act-hop{0%,25%{transform:translateY(0)}33%{transform:translateY(6px)}58%{transform:translateY(-30px)}74%,100%{transform:translateY(0)}}
@keyframes act-jumpArmL{0%,25%,100%{transform:rotate(0)}58%{transform:rotate(-48deg)}}
@keyframes act-jumpArmR{0%,25%,100%{transform:rotate(0)}58%{transform:rotate(48deg)}}
@keyframes act-jumpLegL{0%,25%,100%{transform:rotate(0)}58%{transform:rotate(18deg)}}
@keyframes act-jumpLegR{0%,25%,100%{transform:rotate(0)}58%{transform:rotate(-18deg)}}

/* climbing rig */
@keyframes act-climbBody{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes act-climbArmA{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(16deg)}}
@keyframes act-climbArmB{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-24deg)}}
@keyframes act-climbLegA{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-14deg)}}
@keyframes act-climbLegB{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(28deg)}}
@keyframes act-crawlBody{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes act-crawlA{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}}
@keyframes act-crawlB{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-14deg)}}


/* ── tap-to-flip (touch) ── */
.cc.flipped .cc-in{transform:rotateY(180deg)}
.cc:nth-child(even).flipped .cc-in{transform:rotateX(180deg)}
.tile.flip-tap .flip{transform:rotateY(180deg)}

/* ── mobile pass ── */
@media (max-width:860px){
  .thr{display:none}
}
@media (max-width:760px){
  html{scroll-padding-top:61px}
  nav{padding:16px 20px !important}
  #statement,#branches,#ways,#work,#about,#contact{padding-left:20px !important;padding-right:20px !important}
  #statement{padding-top:32px !important;padding-bottom:42px !important}
  #statement > div{grid-template-columns:1fr !important;gap:30px !important}
  #statement h1{font-size:30px !important;line-height:1.08 !important;max-width:none !important}
  #statement h1 + p{margin-top:18px !important;line-height:1.72 !important}
  #statement > div > div:last-child{padding-top:26px !important;border-top:1px solid rgba(26,23,20,.18)}
  #statement > div > div:last-child p:first-of-type{font-size:21px !important}
  #statement > div > div:last-child p + p{margin-top:14px !important;line-height:1.72 !important}

  /* selected work — swipeable shelf, no auto-slide */
  .shelf-wrap{--bw:min(70vw,300px)}
  .shelf{overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf-track{--gap:26px}
  .shelf:active .shelf-track{animation-play-state:paused}
  .shelf-line,.shelf-shadow{display:none}

  /* about card sits flat on small screens */
  #about > div{transform:none !important;padding:26px 20px !important;box-shadow:0 14px 34px rgba(26,23,20,.26) !important}
  #about > div > div:nth-child(3) > div:first-child{transform:none !important}
  #about > div > div:last-child{grid-template-columns:1fr !important;gap:18px !important}

  /* case overlays */
  .ov{overflow-x:hidden}
  .ov-in{padding-left:20px !important;padding-right:20px !important}
  .ov-bar{padding:14px 62px 14px 20px !important}
  .ov-x{top:10px;right:12px;width:40px;height:40px}
  .ovhead{grid-template-columns:1fr !important;gap:18px !important}
  .ovr{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .ovr > div{grid-column:auto !important}
  .ovr > div:nth-child(1){padding-top:0 !important;padding-bottom:0 !important}
  .ovr > div:nth-child(2){padding-top:22px !important;padding-bottom:0 !important}
  .ovr > div:nth-child(3){padding-top:0 !important;padding-bottom:18px !important;grid-column:1 / -1 !important}
  .ovr > div:nth-child(3) > div{max-width:74%;margin:0 auto}

  /* contact */
  .ct-stage{padding:34px 26px 26px !important}
  .ct-walker{width:38px !important;height:58px !important}
  .ct-walker svg{height:58px !important;width:auto}
  .ct-form{gap:13px !important;padding:16px !important}
  .ct-chips{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
  .ct-chips label{display:block}
  .ct-chips em{display:block;text-align:center;padding:8px 6px;font-size:8.5px}
  .ct-fld textarea{min-height:64px}
  .ct-left{padding:0 0 32px !important}
}
@media (max-width:520px){
  .br{min-height:auto;padding:16px}
}


/* mobile-only pieces (hidden on desktop) */
.thr-v,.ab-m,.cc-nav,.ct-fig-m,.ab-flip,.br-fig{display:none}
@keyframes thr-flow{to{stroke-dashoffset:-36}}

@media (max-width:860px){
  #branches{min-height:100svh;justify-content:center}
  .thr-v{display:none}
  .thr-v svg{display:block;width:100%;height:100%;overflow:visible}
  .thr-v path{fill:none;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .thr-v g:first-of-type path{opacity:.5}
  .br-grid.thr-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-template-rows:repeat(2,minmax(0,1fr));gap:26px;height:min(62svh,520px);margin-top:clamp(20px,4vh,44px) !important}
  .thr-grid .br{min-height:0 !important;height:100%;padding:12px 14px 14px;gap:6px;justify-content:space-between}
  .br-fig{display:block;height:46px;flex:none}
  .br-fig svg{display:block;width:100%;height:100%;overflow:visible}
  .thr-grid .br h3{font-size:15.5px}
  .thr-grid .br p{font-size:12px;line-height:1.45}
}

@media (max-width:760px){
  /* nav clears the status bar / notch */
  nav{padding-top:max(16px,env(safe-area-inset-top)) !important}
  nav + div{height:calc(61px + env(safe-area-inset-top)) !important}

  /* ways to work — one screen, swipe between the three */
  #ways{min-height:100svh;justify-content:center;padding-top:34px !important;padding-bottom:34px !important}
  .cc-grid{display:flex !important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;gap:16px !important;scrollbar-width:none;margin:0 -20px;padding:6px 20px;align-items:stretch}
  .cc-grid::-webkit-scrollbar{display:none}
  .cc{flex:0 0 100%;min-height:0;height:min(52svh,430px);scroll-snap-align:center}
  .cc-f,.cc-b{padding:20px 18px;justify-content:space-between;gap:10px;overflow:hidden}
  .cc-f > div:nth-child(2) h3{font-size:22px !important}
  .cc-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
  .cc-nav button{width:46px;height:46px;border-radius:999px;border:1px solid #1A1714;background:transparent;color:#1A1714;font-family:'Syne',sans-serif;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .cc-nav button:active{background:#1A1714;color:#F7F3EA}
  .cc-nav span{font-family:'Syne',sans-serif;font-weight:600;letter-spacing:.18em;font-size:10px;color:#6f675a;min-width:56px;text-align:center}
  .ways-tail{display:none !important}

  /* about — mobile rewrite of the same content */
  .ab-grid{display:none !important}
  .ab-m{display:block}
  .ab-more{max-height:0;opacity:0;overflow:hidden;transition:max-height .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
  .ab-m.open .ab-more{max-height:420px;opacity:1}
  .ab-toggle{margin-top:14px;display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid rgba(26,23,20,.3);border-radius:999px;padding:10px 16px;font-family:'Syne',sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:9px;color:#1A1714;cursor:pointer}
  .ab-m.open .ab-toggle span{transform:rotate(180deg);display:inline-block}
  .ab-prin{display:none !important}
  .ab-flip{display:block;position:relative;height:128px;margin-top:26px;perspective:900px;cursor:pointer;border:1px solid #1A1714}
  .ab-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;transform-origin:50% 0%;transform:rotateX(-92deg);opacity:0;backface-visibility:hidden;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
  .ab-face.on{transform:rotateX(0deg);opacity:1}
  .ab-face.out{transform:rotateX(92deg);opacity:0}

  .ct-fig-m{display:none}
}