/* bechua.tech — white/paper "MUJI" design. Source of truth: handoff/bechua-final.html + spec v1.0 */

/* ---------- Fonts (self-hosted, Latin subset, SIL OFL 1.1 — see fonts/OFL.txt) ---------- */
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/noto-sans-jp-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-jp-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-jp-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/noto-serif-jp-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-serif-jp-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens (spec §4.1) ---------- */
:root{
  --paper:#F7F6F3;--white:#FFFFFF;--charcoal:#3A3A38;--granite:#5F5E5A;
  --stone:#6E6C67;         /* text-safe stone (4.85:1) */
  --stone-line:#8C8A85;    /* decorative only — never text */
  --hair:#DAD8D2;--brick:#7F0019;--ring:#5F5E5A;
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --serif:"Noto Serif JP",Georgia,serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background:var(--paper);color:var(--charcoal);font-family:var(--sans);font-weight:400;font-size:15.5px;line-height:1.8;letter-spacing:.01em}
@media (min-width:768px){body{font-size:16px}}
img,svg{display:block;flex-shrink:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;letter-spacing:inherit}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
section{scroll-margin-top:84px}
.skip{position:absolute;left:8px;top:-100px;z-index:70;background:var(--charcoal);color:var(--white);padding:10px 16px;text-decoration:none;font-size:.88rem}
.skip:focus{top:8px}

/* ---------- Scroll progress ---------- */
#progress{position:fixed;top:0;left:0;right:0;height:1px;background:var(--granite);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* ---------- Header (spec §3) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,246,243,.94);border-bottom:1px solid transparent;transition:border-color .4s}
.site-header.scrolled{border-bottom-color:var(--hair)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;max-width:1120px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;min-width:0;min-height:44px;text-decoration:none}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem;font-weight:500;letter-spacing:.14em;color:var(--charcoal)}
.desk-nav{display:none}
.desk-nav a{position:relative;padding:6px 10px;font-size:.85rem;letter-spacing:.06em;color:var(--granite);text-decoration:none;transition:color .3s}
.desk-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.desk-nav a:hover{color:var(--charcoal)}
.desk-nav a:hover::after{transform:scaleX(1)}
.desk-nav a.active{color:var(--charcoal)}
.desk-nav a.active::after{transform:scaleX(1);background:var(--brick)}
.hdr-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-link{display:none;width:44px;height:44px;place-items:center;color:var(--granite);transition:color .3s}
.icon-link:hover{color:var(--charcoal)}
.btn-login{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;white-space:nowrap;text-decoration:none;
  font-size:.85rem;letter-spacing:.08em;color:var(--charcoal);background:transparent;border:1px solid var(--charcoal);border-radius:0;transition:background .3s,color .3s}
.btn-login:hover{background:var(--charcoal);color:var(--white)}
.burger{width:44px;height:44px;display:grid;place-content:center;gap:5px}
.burger span{display:block;width:18px;height:1px;background:currentColor;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu: hidden from AT/keyboard when closed (visibility), max-height .3s */
.mobile-nav{display:flex;flex-direction:column;overflow:hidden;max-height:0;visibility:hidden;background:var(--paper);
  transition:max-height .3s ease,visibility 0s linear .3s}
.mobile-nav.open{max-height:420px;visibility:visible;border-bottom:1px solid var(--hair);transition:max-height .3s ease,visibility 0s}
.mobile-nav a{display:flex;align-items:center;min-height:48px;padding:0 20px;text-decoration:none;font-size:.95rem;letter-spacing:.06em;color:var(--granite);border-top:1px solid var(--hair)}
.mobile-nav a.active{color:var(--charcoal)}
.m-icons{display:flex;gap:8px;border-top:1px solid var(--hair);padding:0 8px}
.m-icons a{border:0;gap:8px;padding:0 12px;font-size:.85rem}

@media (min-width:1024px){
  .desk-nav{display:flex;gap:4px}
  .icon-link{display:grid}
  .burger,.mobile-nav{display:none}
}

/* ---------- Layout ---------- */
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap,.hdr-inner{padding:0 24px}}
@media (min-width:1280px){.wrap,.hdr-inner{padding:0 32px}}

/* Reveal: only hidden when scripting is available, so no-JS visitors still see everything */
@media (scripting:enabled){
  .js [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s ease}
  .js [data-reveal].in{opacity:1;transform:none}
}

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-height:46px;padding:0 22px;
  font-size:.88rem;letter-spacing:.08em;text-decoration:none;border:1px solid var(--charcoal);border-radius:0;transition:background .3s,color .3s,border-color .3s}
.btn-primary span,.btn-ghost span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-primary{background:var(--charcoal);color:var(--white)}
.btn-primary:hover{background:var(--granite);border-color:var(--granite)}
.btn-ghost{background:transparent;color:var(--charcoal)}
.btn-ghost:hover{background:var(--white)}
.btn-ghost.copied{border-color:var(--brick);color:var(--brick)}

/* ---------- Hero (spec §5.3, §7) ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:88px 0 72px}
@media (min-width:1024px){.hero{padding:136px 0 104px}}
.hero>.wrap{position:relative;z-index:1}
.hello{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--stone)}
.hero h1{font-size:clamp(1.65rem,5.4vw,2.35rem);font-weight:400;letter-spacing:.06em;line-height:1.4;margin:14px 0 8px}
.hero .role{font-size:clamp(.92rem,2.6vw,1.02rem);color:var(--granite);letter-spacing:.08em}
.hero .lead{max-width:34em;margin:24px auto 0;color:var(--granite);font-weight:300}
.hero .hello,.hero h1,.hero .role,.hero .lead{text-shadow:0 0 6px #F7F6F3,0 0 14px #F7F6F3,0 0 22px #F7F6F3}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.hero .btn-ghost{background:var(--paper)}
.hero .btn-ghost:hover{background:var(--white)}
.stats{display:grid;grid-template-columns:1fr 1fr;max-width:840px;margin:56px auto 0;border-top:1px solid var(--hair)}
.stats div{padding:22px 8px;border-bottom:1px solid var(--hair);background:rgba(247,246,243,.9)}
.stats div:nth-child(odd){border-right:1px solid var(--hair)}
@media (min-width:768px){
  .stats{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--hair)}
  .stats div{border-bottom:0;border-right:1px solid var(--hair)}
  .stats div:last-child{border-right:0}
}
.stats strong{display:block;font-family:var(--serif);font-weight:300;font-size:1.35rem;letter-spacing:.04em;color:var(--charcoal)}
.stats span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* Terrain layer */
.wire{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 40% 50% at 50% 46%,transparent 0%,transparent 55%,#000 100%),linear-gradient(#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 40% 50% at 50% 46%,transparent 0%,transparent 55%,#000 100%),linear-gradient(#000 70%,transparent 100%);
  mask-composite:intersect}
@media (max-width:767px){.wire{opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 60% 34% at 50% 46%,transparent 0%,transparent 60%,#000 100%),linear-gradient(#000 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 60% 34% at 50% 46%,transparent 0%,transparent 60%,#000 100%),linear-gradient(#000 75%,transparent 100%)}}
.wire canvas{position:absolute;left:0;top:0}

/* ---------- Sections ---------- */
.sec{padding:64px 0;border-top:1px solid var(--hair)}
@media (min-width:1024px){.sec{padding:96px 0}}
.sec-grid{display:grid;gap:20px}
@media (min-width:1024px){.sec-grid{grid-template-columns:220px 1fr;gap:56px}}
.label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.sec h2{font-family:var(--serif);font-weight:300;font-size:1.3rem;letter-spacing:.08em;margin-top:6px;color:var(--charcoal)}
.profile-text{font-weight:300;font-size:1.02rem;max-width:40em;color:var(--charcoal)}

/* Timeline (spec §5.6) */
.tl{position:relative;padding-left:22px}
.tl-track{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--hair)}
.tl-fill{position:absolute;inset:0;background:var(--stone-line);transform-origin:top;transform:scaleY(0);transition:transform .3s linear}
.tl-item{position:relative;border-bottom:1px solid var(--hair)}
.tl-item:first-child{border-top:1px solid var(--hair)}
.tl-dot{position:absolute;left:-22px;top:24px;width:9px;height:9px;background:var(--paper);border:1px solid var(--stone)}
.tl-item.current .tl-dot{background:var(--brick);border-color:var(--brick)}
.tl-toggle{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;min-height:48px;padding:18px 4px;text-align:left}
.tl-toggle:hover .tl-role{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.tl-toggle .chev{grid-column:2;grid-row:1/4;align-self:center;color:var(--stone);transition:transform .5s ease}
.tl-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.tl-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-dates{font-size:.78rem;letter-spacing:.1em;color:var(--stone)}
.tl-tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);border:1px solid var(--hair);padding:0 8px}
.tl-role{font-size:1.02rem;font-weight:500}
.tl-org{color:var(--granite);font-size:.92rem;font-weight:300}
.tl-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s ease}
.tl-panel.open{grid-template-rows:1fr}
.tl-panel>div{overflow:hidden}
.tl-panel:not(.open)>div{visibility:hidden;transition:visibility 0s .6s}
.tl-panel ul{padding:0 4px 20px}
.tl-panel li{position:relative;margin-top:8px;padding-left:16px;color:var(--granite);font-weight:300}
.tl-panel li::before{content:"";position:absolute;left:2px;top:.9em;width:6px;height:1px;background:var(--stone)}

/* Education */
.card{padding:22px 0;border-bottom:1px solid var(--hair)}
.edu{display:flex;gap:16px}
.edu:first-child{border-top:1px solid var(--hair)}
.edu-ic{color:var(--stone);padding-top:4px}
.edu-dates{font-size:.78rem;letter-spacing:.1em;color:var(--stone)}
.edu h3{font-size:1rem;font-weight:500;margin:2px 0}
.edu-school{color:var(--granite);font-weight:300}
.edu-notes{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px}
.edu-notes li{font-size:.84rem;color:var(--granite);font-weight:300}

/* Skills (spec §5.7–5.9) */
.filters{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:18px}
.filter{min-height:44px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.filter:hover{color:var(--charcoal)}
.filter[aria-pressed="true"]{color:var(--charcoal);border-bottom-color:var(--charcoal)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--hair);background:var(--white);font-size:.88rem;padding:8px 14px;color:var(--charcoal);transition:border-color .3s,opacity .5s}
.chip:hover{border-color:var(--granite)}
.dim{opacity:.32}
.sub-h{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);font-weight:400;margin:40px 0 4px}
.certs{display:grid}
@media (min-width:640px){.certs{grid-template-columns:1fr 1fr;column-gap:32px}}
.cert{display:flex;gap:12px;align-items:flex-start;padding:16px 0;transition:opacity .5s}
.cert-ic{color:var(--stone)}
.cert strong{display:block;font-weight:500;font-size:.95rem}
.cert small{display:block;color:var(--stone);font-size:.8rem}
.langs{display:flex;flex-wrap:wrap;gap:0 28px;padding-top:12px}
.lang{font-size:.95rem}
.lang small{margin-left:8px;color:var(--stone);font-size:.78rem;letter-spacing:.08em}

/* Contact */
.contact-line{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,3.4vw,1.35rem);margin-bottom:24px;letter-spacing:.04em}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Projects empty state (swap for a grid later) */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 20px;border:1px solid var(--hair);background:var(--white)}
.empty-ic{color:var(--stone)}
.empty-ic svg{width:32px;height:32px}
.empty h3{font-weight:400;font-size:1.02rem;letter-spacing:.1em}
.empty p{max-width:42ch;color:var(--granite);font-weight:300;font-size:.92rem}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1040px;margin:0 auto;padding:32px 16px 40px;
  color:var(--stone);font-size:.78rem;letter-spacing:.08em;border-top:1px solid var(--hair)}
.site-footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-footer a:hover{color:var(--charcoal)}
@media (min-width:640px){.site-footer{padding:32px 24px 40px}}
@media (min-width:1280px){.site-footer{padding:32px 32px 40px}}

/* ---------- Reduced motion (spec §7) ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}