/* ============================================================
   Pocrea — Creative IT Partner
   Tokens (frozen, do not change) → reset → typography → wood
   → nav → components → sections → responsive → focus/reduced-motion
   ============================================================ */

:root{
  --wood-900:#1f160f;   /* 最深部・footer */
  --wood-800:#2b1f17;   /* 基調背景（エスプレッソ） */
  --wood-700:#3a2a1e;   /* カード・パネル */
  --wood-600:#4a3527;   /* ボーダー・木目ハイライト */
  --copper:#c8763a;     /* 主アクセント（刻印オレンジ） */
  --copper-bright:#e0904f; /* hover/active */
  --cream:#e9c9a3;      /* 本文 */
  --cream-soft:#f3ddc2; /* 見出し */
  --ink-muted:#b9a184;  /* 補助テキスト（14px 以上でのみ使用） */
  --leaf:#7fae6b;       /* 芽のグリーン（控えめに） */
  --heart:#d98a7a;      /* ハート */
  --focus:#ffd9a0;      /* フォーカスリング */
  --font-en-display:"Baloo 2", system-ui, sans-serif;
  --font-en-body:"Nunito", system-ui, sans-serif;
  --font-jp:"Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --maxw:1120px;
  --gap:clamp(1rem,3vw,2rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,p,ul,ol,figure{margin:0;}
ul,ol{list-style:none;padding:0;}
img,svg{display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;}
button,a,[role="button"]{cursor:pointer;}

/* ---------- Base + wood background (layer 1: base gradient) ---------- */
body{
  font-family:var(--font-jp);
  color:var(--cream);
  background:linear-gradient(180deg,#241a13,#2b1f17 40%,#241a13);
  line-height:1.9;
  overflow-x:hidden;
  min-height:100vh;
  /* layer 3: fine ribs */
  position:relative;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.06) 6px 7px);
  opacity:.5;
}

/* layer 2: grain overlay via inline SVG filter (works over file://) */
.wood-overlay{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  filter:url(#woodGrain);
  mix-blend-mode:overlay;
  opacity:.25;
}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- Typography ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gap);}
.wrap-narrow{max-width:760px;}

.section-head{
  font-family:var(--font-en-display);
  font-weight:800;
  line-height:1.1;
  margin-bottom:.75rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.section-head .en{
  font-size:clamp(1.8rem,4vw,2.8rem);
  color:var(--copper);
  text-shadow:0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(233,201,163,.15);
  letter-spacing:.01em;
}
.section-head .jp{
  font-family:var(--font-jp);
  font-weight:700;
  font-size:clamp(.95rem,1.6vw,1.1rem);
  color:var(--cream-soft);
}

.lead{
  max-width:70ch;
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--cream-soft);
  margin-bottom:1.5rem;
}

.card-head{
  font-family:var(--font-en-display);
  font-weight:700;
  display:flex;
  align-items:baseline;
  gap:.55rem;
  margin-bottom:.4rem;
}
.card-head .en{
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  color:var(--copper);
}
.card-head .jp{
  font-family:var(--font-jp);
  font-weight:700;
  font-size:.95rem;
  color:var(--cream-soft);
}
p{font-size:clamp(.98rem,1.2vw,1.06rem);}

/* ---------- Engrave helpers ---------- */
.engraved{color:var(--copper);text-shadow:0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(233,201,163,.15);}
.engraved-edge{
  border:1px solid rgba(200,118,58,.35);
  box-shadow:inset 0 1px 0 rgba(233,201,163,.10), inset 0 -2px 4px rgba(0,0,0,.45);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  background:var(--wood-700);color:var(--cream-soft);
  padding:.6rem 1rem;border-radius:8px;
  border:1px solid var(--copper);
  transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

/* ---------- Brand wordmark (Pocrea + sprout on 'a') ---------- */
.brand-word{
  font-family:var(--font-en-display);
  font-weight:800;
  letter-spacing:.005em;
  display:inline-block;
  color:var(--cream-soft);
}
.brand-a{position:relative;display:inline-block;}
.brand-sprout{
  position:absolute;
  bottom:78%;left:38%;
  width:.62em;height:.68em;
  transform:rotate(4deg);
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(31,22,15,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(200,118,58,.35);
}
.nav-inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:.6rem var(--gap);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand .brand-word{font-size:1.5rem;}
.brand{display:inline-flex;align-items:center;}

.nav-toggle{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
}
.nav-toggle svg{width:26px;height:26px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

.nav-menu ul{
  display:flex;flex-direction:column;gap:.25rem;
}
.nav-menu a{
  font-family:var(--font-en-body);
  font-weight:600;
  color:var(--cream);
  display:block;
  padding:.7rem 1rem;
  position:relative;
}
.nav-menu a::after{
  content:"";
  position:absolute;left:1rem;right:1rem;bottom:.45rem;height:2px;
  background:var(--copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.nav-menu a:hover::after,
.nav-menu a.is-active::after{transform:scaleX(1);}
.nav-menu a.is-active{color:var(--copper-bright);}

/* mobile dropdown default (mobile-first) */
.nav-menu{
  position:absolute;left:0;right:0;top:100%;
  background:rgba(31,22,15,.97);
  border-bottom:1px solid rgba(200,118,58,.35);
  padding:.5rem var(--gap) 1rem;
  display:none;
}
.nav-menu.is-open{display:block;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-en-body);
  font-weight:700;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.4rem;
  border-radius:12px;
  min-height:44px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn .btn-jp{font-family:var(--font-jp);font-size:.85rem;font-weight:700;}
.btn-primary{
  background:var(--copper);color:var(--wood-900);
  box-shadow:inset 0 1px 0 rgba(233,201,163,.25), 0 4px 12px rgba(0,0,0,.35);
}
.btn-primary:hover{background:var(--copper-bright);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(233,201,163,.3), 0 8px 18px rgba(0,0,0,.4);}
.btn-ghost{
  color:var(--copper);
  border:1px solid rgba(200,118,58,.55);
  box-shadow:inset 0 1px 0 rgba(233,201,163,.10), inset 0 -2px 4px rgba(0,0,0,.45);
}
.btn-ghost:hover{color:var(--copper-bright);border-color:var(--copper-bright);transform:translateY(-2px);}

/* ---------- Dotted heart separator ---------- */
.sep{
  display:flex;align-items:center;gap:1rem;
  margin:1.6rem 0;
}
.sep-line{flex:1;border-top:2px dotted var(--wood-600);}
.sep-heart{width:24px;height:22px;flex:none;}

/* ---------- Section spacing ---------- */
main > section{padding-block:clamp(3rem,7vw,5.5rem);position:relative;}
#hero{padding-top:clamp(2rem,5vw,3.5rem);}

/* ---------- Hero ---------- */
#hero{min-height:88vh;display:flex;align-items:center;}
.hero-inner{
  max-width:var(--maxw);margin-inline:auto;width:100%;
  padding-inline:var(--gap);
  display:flex;flex-direction:column-reverse;gap:var(--gap);align-items:center;
}
.hero-copy{text-align:center;}
.logo .brand-word{font-size:clamp(3rem,10vw,4.5rem);color:var(--cream-soft);}
.tagline{
  font-family:var(--font-en-display);font-weight:700;
  font-size:clamp(1.2rem,3vw,1.7rem);
  color:var(--copper);
  margin-top:.3rem;
  text-shadow:0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(233,201,163,.15);
}
.motif-line{
  font-family:var(--font-en-body);font-weight:700;
  color:var(--cream-soft);
  letter-spacing:.08em;
  font-size:clamp(1rem,2.2vw,1.25rem);
  margin-top:.5rem;
}
.hero-lead{
  font-size:clamp(1.15rem,2.6vw,1.55rem);
  color:var(--cream-soft);font-weight:500;
  margin-top:1.2rem;
}
.hero-sub{
  color:var(--cream);
  max-width:52ch;margin:1rem auto 0;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.8rem;}

.hero-art{width:min(320px,80vw);}
.hero-illustration{width:100%;height:auto;}

/* ---------- Concept ---------- */
#concept{overflow:hidden;}
.section-ring{
  position:absolute;right:-6%;top:8%;
  width:min(560px,70vw);height:auto;
  opacity:.12;z-index:0;pointer-events:none;
}
#concept .wrap{position:relative;z-index:1;}
.concept-grid{
  display:grid;grid-template-columns:1fr;gap:var(--gap);
  margin-top:.5rem;
}
.concept-card{
  background:var(--wood-700);
  border:1px solid rgba(200,118,58,.35);
  box-shadow:inset 0 1px 0 rgba(233,201,163,.10), inset 0 -2px 4px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.25);
  border-radius:16px;
  padding:1.6rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.concept-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(233,201,163,.12), 0 12px 26px rgba(0,0,0,.4);}
.concept-icon,.activity-icon{
  display:inline-flex;
  width:56px;height:56px;
  align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(200,118,58,.10);
  border:1px solid rgba(200,118,58,.30);
  margin-bottom:1rem;
}
.concept-icon svg,.activity-icon svg{width:34px;height:34px;filter:url(#engrave);}

/* ---------- Decorative circuit trace behind section heads (desktop only) ---------- */
#activities .wrap,
#works .wrap{position:relative;}
.head-trace{
  display:none;
  position:absolute;top:-1.5rem;left:0;
  width:220px;height:auto;
  opacity:.35;
  z-index:0;
  pointer-events:none;
}
.head-trace-right{left:auto;right:0;transform:scaleX(-1);}
#activities .section-head,
#works .section-head{position:relative;z-index:1;}
@media (min-width:1024px){
  .head-trace{display:block;}
}

/* ---------- Activities ---------- */
.activities-list{
  display:flex;flex-direction:column;gap:var(--gap);
  position:relative;margin-top:.5rem;
}
.activity-row{
  display:flex;gap:1.2rem;align-items:flex-start;
  background:var(--wood-700);
  border:1px solid rgba(200,118,58,.30);
  box-shadow:inset 0 1px 0 rgba(233,201,163,.10), inset 0 -2px 4px rgba(0,0,0,.45);
  border-radius:16px;
  padding:1.4rem 1.5rem;
  position:relative;
}
/* vertical circuit trace connecting rows */
.activity-row:not(:last-child)::after{
  content:"";
  position:absolute;left:2.05rem;bottom:calc(-1 * var(--gap));
  width:2px;height:var(--gap);
  background:repeating-linear-gradient(180deg,var(--copper) 0 6px,transparent 6px 11px);
  opacity:.5;
}
.activity-icon{margin-bottom:0;flex:none;}
.activity-body{flex:1;}

/* ---------- Works ---------- */
.works-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:var(--gap);
  margin-top:.5rem;
}
.work-card{
  background:var(--wood-700);
  border:1px solid rgba(200,118,58,.30);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(233,201,163,.10), 0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.work-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.42);}
.work-thumb{
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid rgba(200,118,58,.25);
  position:relative;
}
.work-thumb svg{width:46%;height:auto;filter:url(#engrave);}
/* category tints */
.work-thumb[data-cat="Course"]{background:linear-gradient(135deg,rgba(200,118,58,.18),rgba(58,42,30,.6));}
.work-thumb[data-cat="SNS"]{background:linear-gradient(135deg,rgba(127,174,107,.16),rgba(58,42,30,.6));}
.work-thumb[data-cat="Web"]{background:linear-gradient(135deg,rgba(224,144,79,.16),rgba(58,42,30,.6));}
.work-thumb[data-cat="Design"]{background:linear-gradient(135deg,rgba(217,138,122,.16),rgba(58,42,30,.6));}
.work-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.work-badges{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.chip{
  font-family:var(--font-en-body);font-weight:700;font-size:.8rem;
  color:var(--cream-soft);
  border:1px solid rgba(200,118,58,.45);
  border-radius:999px;padding:.2rem .7rem;
}
.badge-sample{
  font-size:.78rem;
  color:var(--wood-900);background:var(--copper);
  border-radius:999px;padding:.2rem .7rem;font-weight:700;
  font-family:var(--font-en-body);
}
.badge-sample .jp{font-family:var(--font-jp);}
.work-title{
  font-family:var(--font-en-display);font-weight:700;
  display:flex;flex-direction:column;gap:.1rem;
}
.work-title .en{color:var(--copper);font-size:1.15rem;}
.work-title .jp{font-family:var(--font-jp);font-weight:700;font-size:.95rem;color:var(--cream-soft);}
.work-desc{color:var(--cream);font-size:.95rem;flex:1;}
.work-link{
  align-self:flex-start;margin-top:.4rem;
  font-family:var(--font-en-body);font-weight:700;
  color:var(--copper);text-decoration:underline;text-underline-offset:3px;
}
.work-link:hover{color:var(--copper-bright);}
.work-disabled{
  align-self:flex-start;margin-top:.4rem;
  font-family:var(--font-en-body);font-weight:700;font-size:.9rem;
  color:var(--ink-muted);
  border:1px dashed rgba(185,161,132,.5);
  border-radius:10px;padding:.45rem .9rem;
  cursor:not-allowed;
}
.work-disabled .jp{font-family:var(--font-jp);}

/* ---------- Contact ---------- */
.contact-cta{margin-top:.5rem;}
.btn-mail{font-size:clamp(1rem,2.2vw,1.25rem);padding:1rem 1.6rem;}
.mail-icon{width:24px;height:24px;color:var(--wood-900);}
.sns-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem;}
.sns-link{
  width:52px;height:52px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:var(--wood-700);
  border:1px solid rgba(200,118,58,.35);
  box-shadow:inset 0 1px 0 rgba(233,201,163,.10), inset 0 -2px 4px rgba(0,0,0,.45);
  transition:transform .18s ease, border-color .18s ease;
}
.sns-link svg{width:26px;height:26px;}
.sns-link:hover{transform:translateY(-3px);border-color:var(--copper-bright);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--wood-900);
  border-top:1px solid rgba(200,118,58,.30);
  padding-block:clamp(2.5rem,5vw,3.5rem);
  margin-top:2rem;
}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;}
.footer-mark .brand-word{font-size:1.6rem;color:var(--cream-soft);}
.footer-motif{font-family:var(--font-en-body);font-weight:700;color:var(--copper);letter-spacing:.06em;}
.footer-meta{color:var(--ink-muted);font-size:.9rem;}
.footer-top{
  font-family:var(--font-en-body);font-weight:700;
  color:var(--copper);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;gap:.4rem;align-items:baseline;
}
.footer-top .footer-top-jp{font-family:var(--font-jp);font-size:.85rem;}
.footer-top:hover{color:var(--copper-bright);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
.concept-card.reveal:nth-child(2){transition-delay:.08s;}
.concept-card.reveal:nth-child(3){transition-delay:.16s;}
.activity-row.reveal:nth-child(2){transition-delay:.08s;}
.activity-row.reveal:nth-child(3){transition-delay:.16s;}

/* circuit trace pulse (decorative) */
@keyframes tracePulse{to{stroke-dashoffset:-40;}}

/* ---------- Focus ---------- */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}

/* ============================================================
   Responsive (mobile-first): 768 / 1024 / 1440
   ============================================================ */
@media (min-width:768px){
  .nav-toggle{display:none;}
  .nav-menu{
    position:static;display:block;background:none;border:none;padding:0;
  }
  .nav-menu ul{flex-direction:row;gap:.25rem;}
  .nav-menu a{padding:.5rem .9rem;}
  .nav-menu a::after{left:.9rem;right:.9rem;bottom:.15rem;}

  .works-grid{grid-template-columns:repeat(2,1fr);}

  /* Activities alternate left/right */
  .activity-row:nth-child(even){flex-direction:row-reverse;text-align:right;}
  .activity-row:nth-child(even) .card-head{flex-direction:row-reverse;}
  .activity-row:nth-child(even)::after{left:auto;right:2.05rem;}
}

@media (min-width:1024px){
  .hero-inner{
    flex-direction:row;
    display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:calc(var(--gap) * 1.5);
  }
  .hero-copy{text-align:left;}
  .hero-sub{margin-inline:0;}
  .hero-cta{justify-content:flex-start;}
  .hero-art{width:min(380px,40vw);justify-self:center;}

  .works-grid{grid-template-columns:repeat(3,1fr);}
  .concept-grid{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:1440px){
  :root{--gap:2rem;}
  .section-ring{width:600px;}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}