/* Shakado top-page body sections.
   Hero implementation remains isolated in styles.css / coffee.js. */

:root{
  --body-max:1180px;
  --read-max:760px;
  --section-y:clamp(96px,12vw,168px);
}

.body-section{
  min-height:auto;
  padding:var(--section-y) var(--safe-x);
  overflow:hidden;
}
.body-shell{max-width:var(--body-max);margin:0 auto;position:relative;z-index:2}
.section-head{max-width:var(--read-max)}
.body-section .section-label{margin:0;color:var(--muted)}
.body-section h2{
  margin:18px 0 28px;
  font-size:clamp(2.8rem,6vw,6.2rem);
  line-height:.98;
  letter-spacing:-.05em;
  font-weight:760;
}
.body-section .section-intro,
.body-section p{
  font-size:clamp(16px,1.55vw,20px);
  line-height:1.9;
}
.body-section .section-intro{margin:0;color:var(--muted)}
.body-section .section-intro.compact{margin-top:10px}
.text-link,.large-link{
  display:inline-block;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
.text-link:focus-visible,.large-link:focus-visible,.product-visual-link:focus-visible,.paper:focus-visible,.email-link:focus-visible{
  outline:2px solid var(--fg);outline-offset:5px;
}

/* SHOP */
.shop-section{padding-bottom:clamp(110px,13vw,170px)}
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.3vw,32px);
  margin-top:clamp(56px,7vw,88px);
}
.product-card{min-width:0}
.product-visual-link{display:block;color:inherit;text-decoration:none;border-radius:24px}
.product-visual{
  position:relative;
  aspect-ratio:4/3;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:color-mix(in srgb,var(--bg) 94%,var(--fg) 6%);
}
.product-copy{padding:22px 4px 0}
.product-kicker{
  margin:0 0 8px!important;
  color:var(--muted);
  font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:.14em;
}
.product-card h3{margin:0 0 12px;font-size:clamp(24px,2.1vw,34px);letter-spacing:-.035em}
.product-card .product-copy>p:not(.product-kicker){
  margin:0 0 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}
.section-end-link{margin-top:clamp(64px,8vw,104px)}
.large-link{font-size:clamp(22px,3vw,38px);letter-spacing:-.03em}

/* SlideSwan visual */
.demo-desktop{position:absolute;inset:12%;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.demo-dot{position:absolute;top:10px;width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.45}
.demo-dot.d1{left:11px}.demo-dot.d2{left:21px}.demo-dot.d3{left:31px}
.demo-window{
  position:absolute;left:15%;top:26%;width:58%;height:48%;
  border:1.5px solid var(--fg);border-radius:8px;background:var(--bg);
  box-shadow:0 8px 22px rgb(0 0 0 / .06);
  animation:slideSwanMove 4.8s cubic-bezier(.55,.02,.34,1) infinite;
}
.demo-window::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;border-bottom:1px solid var(--line)}
.demo-window-line{position:absolute;left:13%;top:39%;width:62%;border-top:1px solid var(--muted);opacity:.45}
.demo-window-line.short{top:57%;width:39%}
.drag-mark{position:absolute;right:12%;bottom:14%;font:700 18px/1 ui-monospace,monospace;color:var(--muted);opacity:.65}
@keyframes slideSwanMove{0%,18%,100%{transform:translateX(0)}45%,68%{transform:translateX(31%)}}

/* CowriteAudio visual */
.waveform{position:absolute;left:9%;right:9%;top:38%;height:26%;display:flex;align-items:center;gap:3px}
.waveform span{flex:1;height:var(--h);min-width:2px;background:var(--fg);opacity:.56;border-radius:999px}
.audio-marker{position:absolute;top:22%;bottom:19%;left:17%;width:1px;background:var(--fg)}
.audio-marker::before{content:"";position:absolute;left:-3px;top:-1px;width:7px;height:7px;border-radius:50%;background:var(--fg)}
.audio-selection{position:absolute;top:28%;bottom:25%;left:38%;width:23%;background:color-mix(in srgb,var(--coffee) 12%,transparent);border-left:1px solid var(--coffee);border-right:1px solid var(--coffee)}
.audio-visual::after{
  content:"";position:absolute;top:18%;bottom:18%;left:11%;width:1px;background:var(--coffee);
  animation:audioPlayhead 5.2s ease-in-out infinite;
}
@keyframes audioPlayhead{0%,12%{left:11%}78%,100%{left:79%}}

/* Cup Chirp visual */
.radar-visual{display:grid;place-items:center}
.radar-grid{position:absolute;width:56%;aspect-ratio:1;border:1px solid var(--line);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.radar-grid.r1{transform:scale(.36)}.radar-grid.r2{transform:scale(.68)}.radar-grid.r3{transform:scale(1)}
.radar-axis{position:absolute;width:1px;height:56%;background:var(--line);left:50%;top:22%;transform-origin:50% 50%}
.radar-axis.a2{transform:rotate(60deg)}.radar-axis.a3{transform:rotate(-60deg)}
.radar-shape{
  width:53%;aspect-ratio:1;
  background:color-mix(in srgb,var(--coffee) 28%,transparent);
  border:1px solid var(--coffee);
  clip-path:polygon(50% 7%,82% 31%,90% 70%,52% 88%,20% 72%,13% 31%);
  animation:radarBreathe 4.6s ease-in-out infinite;
}
@keyframes radarBreathe{0%,20%,100%{transform:scale(.9);opacity:.64}55%,76%{transform:scale(1);opacity:.9}}

.product-card:hover .product-visual{border-color:color-mix(in srgb,var(--fg) 34%,transparent)}

/* WORK */
.work-section{
  position:relative;
  min-height:110svh;
  background:color-mix(in srgb,var(--bg) 97%,#d7d5c8 3%);
}
.work-shell{max-width:1000px}
.work-head{max-width:690px;margin-bottom:clamp(70px,10vw,140px)}
.work-list{display:grid;gap:0;max-width:900px;margin-left:auto}
.work-item{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(22px,4vw,60px);
  padding:clamp(42px,6vw,78px) 0;
  border-top:1px solid var(--line);
}
.work-item:last-child{border-bottom:1px solid var(--line)}
.work-index{margin:3px 0 0!important;color:var(--muted);font:700 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.12em}
.work-item h3{margin:0 0 18px;font-size:clamp(26px,3.5vw,48px);letter-spacing:-.04em}
.work-item p{max-width:680px;margin:0 0 12px;color:color-mix(in srgb,var(--fg) 72%,var(--muted));font-size:clamp(15px,1.45vw,18px)}
.reveal-line{opacity:.24;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease}
.reveal-line.is-visible{opacity:1;transform:none}
.work-landscape{
  --work-blur:8px;
  position:absolute;inset:0;
  overflow:hidden;
  filter:blur(var(--work-blur));
  transform:scale(1.025);
  opacity:.40;
  pointer-events:none;
  transition:filter .16s linear,opacity .8s ease;
}
.work-sun{position:absolute;right:13%;top:13%;width:clamp(70px,9vw,130px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--fg) 26%,transparent);border-radius:50%}
.mountain{position:absolute;left:-6%;right:-6%;bottom:18%;height:38%;background:color-mix(in srgb,var(--fg) 13%,transparent);clip-path:polygon(0 86%,17% 56%,28% 72%,46% 21%,59% 63%,73% 35%,100% 85%,100% 100%,0 100%)}
.mountain-back{bottom:29%;opacity:.35;transform:scale(.92)}
.mountain-front{opacity:.58}
.river{position:absolute;left:50%;bottom:-8%;width:15%;height:55%;border-left:1px solid color-mix(in srgb,var(--fg) 24%,transparent);border-right:1px solid color-mix(in srgb,var(--fg) 24%,transparent);transform:translateX(-50%) perspective(500px) rotateX(12deg) skewX(-7deg);opacity:.72}
.bird{position:absolute;font:700 24px/1 serif;color:var(--muted);opacity:.35}
.bird-1{top:31%;left:22%}.bird-2{top:23%;left:29%;font-size:16px}

/* ABOUT */
.about-section{padding-bottom:clamp(140px,16vw,220px)}
.about-board{
  position:relative;
  max-width:960px;
  min-height:clamp(640px,72vw,830px);
  margin:40px auto 0;
  border:1px solid var(--line-soft);
  border-radius:32px;
  background:color-mix(in srgb,var(--bg) 97%,white 3%);
  overflow:hidden;
}
.about-copy{
  position:absolute;
  inset:clamp(44px,8vw,110px);
  max-width:660px;
  z-index:1;
}
.about-copy h2{
  margin:12px 0 30px;
  font-size:clamp(2.3rem,5.1vw,5rem);
}
.about-copy h2 span{display:block;margin-top:8px;font-size:.48em;letter-spacing:-.02em;font-weight:650}
.about-place{margin:0!important;color:var(--muted);font:700 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.12em;text-transform:uppercase}
.about-copy>p:not(.about-place){max-width:620px;margin:0 0 18px;color:var(--muted);font-size:clamp(16px,1.5vw,19px)}
.about-copy .text-link{margin-top:8px}
.paper-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.paper{
  position:absolute;
  width:clamp(180px,25vw,300px);
  aspect-ratio:1.38;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
  border-radius:3px;
  background:#f1efe8;
  color:var(--fg);
  box-shadow:0 12px 34px rgb(0 0 0 / .08);
  cursor:grab;
  pointer-events:auto;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  text-align:left;
  user-select:none;
  will-change:transform,left,top;
}
.paper.is-dragging{cursor:grabbing;box-shadow:0 20px 44px rgb(0 0 0 / .13)}
.paper-a{left:8%;top:8%;transform:rotate(-7deg)}
.paper-b{left:36%;top:5%;transform:rotate(5deg)}
.paper-c{right:5%;top:22%;transform:rotate(-4deg)}
.paper-d{left:15%;top:42%;transform:rotate(4deg)}
.paper-e{left:46%;top:45%;transform:rotate(-6deg)}
.paper-f{right:9%;bottom:5%;transform:rotate(7deg)}
.paper-tag{display:block;font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;color:var(--muted)}
.paper-rule{display:block;width:76%;border-top:1px solid var(--line);margin-top:27px}.paper-rule.short{width:47%;margin-top:13px}
.paper-mark{position:absolute;right:22px;bottom:20px;font-size:12px;color:var(--coffee)}
.paper-grid{position:absolute;left:22px;right:22px;top:50px;bottom:24px;background:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:18px 18px}
.paper-wave,.paper-wave::before{position:absolute;left:22px;right:22px;top:52%;height:28px;background:repeating-linear-gradient(90deg,transparent 0 7px,var(--fg) 7px 8px,transparent 8px 12px);clip-path:polygon(0 45%,7% 20%,14% 68%,21% 31%,28% 52%,35% 7%,42% 74%,49% 36%,56% 61%,63% 18%,70% 79%,77% 31%,84% 57%,91% 13%,100% 48%,100% 57%,0 57%);opacity:.42}
.paper-wave.wide{top:46%;height:42px}
.paper-mini-table{position:absolute;left:22px;right:22px;top:52px;bottom:25px;border:1px solid var(--line);background:repeating-linear-gradient(0deg,transparent 0 21px,var(--line-soft) 21px 22px),linear-gradient(90deg,transparent 0 28%,var(--line) 28% 28.5%,transparent 28.5% 67%,var(--line) 67% 67.5%,transparent 67.5%)}
.paper-frame{position:absolute;left:22px;right:22px;top:52px;bottom:24px;border:1px solid var(--line);background:linear-gradient(150deg,transparent 0 47%,color-mix(in srgb,var(--fg) 8%,transparent) 47% 70%,transparent 70%),linear-gradient(25deg,transparent 0 48%,color-mix(in srgb,var(--fg) 7%,transparent) 48% 70%,transparent 70%)}
.about-hint{max-width:960px;margin:13px auto 0!important;text-align:right;color:var(--muted);font:700 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.13em}

/* CONTACT */
.contact-section{min-height:84svh;display:flex;align-items:center;padding-top:clamp(120px,15vw,190px);padding-bottom:72px}
.contact-shell{width:100%}
.contact-section h2{max-width:930px;margin-bottom:36px;font-size:clamp(3rem,7.2vw,7.5rem)}
.contact-section> .body-shell > p:not(.section-label):not(.copyright){max-width:650px;color:var(--muted);font-size:clamp(16px,1.5vw,19px)}
.contact-links{margin-top:clamp(54px,7vw,90px)}
.email-link{display:inline-block;color:inherit;text-decoration:none;font-size:clamp(26px,5vw,64px);line-height:1.05;letter-spacing:-.04em;border-bottom:1px solid currentColor;padding-bottom:5px}
.contact-sub-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px}
.copyright{margin:clamp(110px,15vw,180px) 0 0!important;color:var(--muted);font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.14em}

@media (max-width:900px){
  .product-grid{grid-template-columns:1fr;gap:56px}
  .product-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:24px;align-items:center}
  .product-copy{padding:0}
  .product-visual{aspect-ratio:16/10}
  .about-board{min-height:760px}
}

@media (max-width:700px){
  .body-section{padding-top:96px;padding-bottom:108px}
  .body-section h2{font-size:clamp(2.6rem,13vw,4.6rem)}
  .product-grid{margin-top:50px;gap:58px}
  .product-card{display:block}
  .product-copy{padding:20px 2px 0}
  .product-visual{aspect-ratio:4/3}
  .work-item{grid-template-columns:42px 1fr;gap:14px}
  .work-landscape{opacity:.30}
  .about-board{min-height:720px;border-radius:24px}
  .about-copy{inset:42px 30px;max-width:none}
  .paper{width:clamp(155px,55vw,230px);padding:18px}
  .paper-a{left:2%;top:10%}.paper-b{left:39%;top:7%}.paper-c{right:-7%;top:28%}.paper-d{left:5%;top:47%}.paper-e{left:45%;top:54%}.paper-f{right:-2%;bottom:2%}
  .about-hint{text-align:left}
  .contact-section{min-height:76svh}
  .contact-section h2{font-size:clamp(2.8rem,14vw,5.5rem)}
  .email-link{font-size:clamp(23px,7vw,40px)}
}

@media (max-width:460px){
  .paper-layer .paper-e,.paper-layer .paper-f{display:none}
  .about-board{min-height:690px}
  .paper{width:58vw;max-width:210px}
}

@media (prefers-reduced-motion: reduce){
  .demo-window,.audio-visual::after,.radar-shape{animation:none!important}
  .reveal-line{opacity:1;transform:none}
  .work-landscape{filter:none!important}
  .paper{transition:none!important}
}

/* v0.6.1 — CONTACT copy-address behavior */
button.email-link,
button.text-link.copy-address{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border-left:0;
  border-right:0;
  border-top:0;
  font:inherit;
  cursor:pointer;
}
button.email-link{border-bottom:1px solid currentColor}
button.text-link.copy-address{padding:0;color:inherit;border-bottom:1px solid currentColor}
.copy-status{min-width:4.5em;color:var(--muted);font:700 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;align-self:center}