/* ==========================================================================
   原木材料diy木工坊 — Shared Site Layout v1.1.0
   Template: link colors_and_type.css THEN this file on every page.
   ========================================================================== */

/* === BASE RESET === */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-width:320px;
  font-family:var(--font-sans);color:var(--fg-1);
  -webkit-font-smoothing:antialiased;
  background:
    /* subtle warm light pools */
    radial-gradient(circle at 18% -6%,rgba(196,138,78,.20),transparent 0 22%),
    radial-gradient(circle at 86% 14%,rgba(180,135,82,.12),transparent 0 18%),
    radial-gradient(ellipse 70% 40% at 78% 48%,rgba(216,169,118,.08),transparent 60%),
    radial-gradient(ellipse 60% 35% at 15% 78%,rgba(180,120,60,.06),transparent 60%),
    /* faint horizontal wood-grain streaks — long, soft, site-wide */
    repeating-linear-gradient(0deg,
      rgba(134,96,58,.035) 0px,
      rgba(134,96,58,.035) 1px,
      transparent 1px,
      transparent 6px),
    repeating-linear-gradient(0deg,
      rgba(74,48,32,.06) 0px,
      rgba(74,48,32,.06) 2px,
      transparent 2px,
      transparent 21px),
    /* base warm coffee */
    linear-gradient(180deg,#1a120c 0%,#1e150e 38%,#180f0a 72%,#140d09 100%);
}
/* Fine paper-grain texture — warmer and slightly more visible for vintage-photo feel */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;
  background:
    linear-gradient(rgba(245,210,168,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,210,168,.22) 1px,transparent 1px);
  background-size:140px 140px;mix-blend-mode:overlay;}
/* Soft vignette — much lighter than before, so base stays browner and less gloomy */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at center,transparent 58%,rgba(20,10,4,.38) 100%),
    linear-gradient(180deg,rgba(90,55,30,.06),rgba(20,12,6,.18));}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-serif);font-weight:600;line-height:1.08;color:var(--fg-1)}
p{margin:0;color:var(--fg-2);line-height:1.8}
ul,ol,dl{margin:0;padding:0;list-style:none}

/* === SHELL & PROGRESS === */
.shell{position:relative;z-index:1;overflow:clip}
.progress{position:fixed;top:0;left:0;z-index:90;width:calc(var(--scroll,0)*100%);height:2px;
  background:linear-gradient(90deg,var(--wood-300),rgba(255,243,224,.92));
  box-shadow:0 0 24px rgba(200,155,102,.45)}

/* === HEADER === */
.header{position:fixed;inset:1rem 1rem auto;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(var(--max-width),calc(100% - 2rem));margin:0 auto;padding:.85rem 1.1rem .85rem 1.35rem;
  border:1px solid rgba(243,231,215,.1);border-radius:999px;
  background:var(--bg-surface);backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,240,215,.06);
  transition:background .25s,border-color .25s,box-shadow .25s}
body.scrolled .header{background:var(--bg-surface-strong);border-color:rgba(248,234,217,.18);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,240,215,.07)}
.brand{font-size:.98rem;font-weight:800;letter-spacing:.08em;display:inline-flex;align-items:center;gap:10px;color:var(--fg-1)}
.brand img{width:20px;height:20px}
.nav{display:flex;align-items:center;gap:.35rem}
.nav a{color:var(--fg-1);font-size:.94rem;padding:.55rem .85rem;border-radius:999px;transition:color .18s,background .18s}
.nav a:not(.cta):hover{background:rgba(243,231,215,.08)}
.nav .cta{margin-left:.5rem;display:inline-flex;align-items:center;min-height:2.6rem;padding:.7rem 1.1rem;
  border:1px solid rgba(243,231,215,.22);border-radius:999px;background:rgba(243,231,215,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg-1);font-weight:700;
  transition:transform .4s var(--ease-standard),background .2s,border-color .2s}
.nav .cta:hover{transform:translateY(-2px);background:rgba(243,231,215,.14);border-color:rgba(243,231,215,.35)}
@media(max-width:820px){.nav a:not(.cta){display:none}.header{padding:.6rem 1rem}}

/* === SHARED LAYOUT === */
.wrap{position:relative;z-index:1;width:min(var(--max-width),calc(100% - 2rem));margin:0 auto}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.92rem 1.38rem;
  border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;
  transition:transform .4s var(--ease-standard),background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--paper-100);color:var(--ink-900)}
.btn-primary:hover{background:var(--paper-100)}
.btn-secondary{border:1px solid rgba(243,231,215,.18);background:rgba(255,255,255,.06);color:var(--fg-1)}
.btn-secondary:hover{border-color:rgba(243,231,215,.3);background:rgba(255,255,255,.1)}

.section{padding:clamp(5rem,10vw,8rem) 0}
.heading{max-width:56rem}
.heading.narrow{max-width:44rem}
.heading h2{margin-top:1rem;font-size:clamp(2.4rem,5vw,4.8rem)}
.heading p:last-child{margin-top:1rem;max-width:40rem}

[data-reveal]{opacity:0;transform:translateY(44px);transition:opacity .8s ease,transform .9s var(--ease-strong);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}

/* === FOOTER === */
.footer{padding:1.5rem 0 3rem;width:min(var(--max-width),calc(100% - 2rem));margin:0 auto;position:relative;z-index:1}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.footer p{color:var(--fg-4);font-size:.84rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem}
.footer-links a{color:var(--fg-4);font-size:.82rem;transition:color .2s;text-decoration:underline;text-underline-offset:.2em}
.footer-links a:hover{color:var(--fg-2)}
.site-version{color:var(--fg-4);font-size:.72rem;font-family:monospace;opacity:.5}

/* === SUBPAGE HERO === */
.page-hero{position:relative;padding:9.5rem 0 4rem;overflow:hidden}
.page-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 70% 0%,rgba(200,155,102,.13) 0%,transparent 55%),
    radial-gradient(ellipse at 5% 100%,rgba(111,78,45,.10) 0%,transparent 45%)}
.page-hero-inner{position:relative;z-index:1}
.page-hero h1{
  margin-top:1rem;font-size:clamp(2.6rem,6vw,5rem);max-width:20ch;
  background:linear-gradient(130deg,var(--paper-200) 35%,rgba(200,155,102,.75));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero-sub{margin-top:1rem;font-family:var(--font-serif);font-size:1.12rem;color:var(--fg-3);max-width:38rem;line-height:1.7}
.page-hero-rule{margin-top:3rem;height:1px;background:linear-gradient(90deg,rgba(200,155,102,.5),rgba(200,155,102,.15),transparent)}

/* === POLICY SECTIONS === */
.policy-content{padding:3.5rem 0 7rem}
.policy-grid{display:grid;gap:1.25rem}
.policy-block{
  position:relative;overflow:hidden;padding:2rem 2.4rem;
  border:1px solid var(--line-1);border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  transition:border-color .3s,background .3s}
.policy-block:hover{border-color:rgba(200,155,102,.22);background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(200,155,102,.025))}
.policy-block::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(200,155,102,.6),transparent);opacity:.6}
.policy-num{font-size:.75rem;font-weight:800;letter-spacing:.2em;color:var(--wood-300);
  text-transform:uppercase;margin-bottom:.75rem}
.policy-block h2{font-size:1.35rem;margin-bottom:1.15rem;color:var(--fg-1);font-family:var(--font-serif)}
.policy-block p{font-size:1rem;line-height:1.85;color:var(--fg-2)}
.policy-block p+p{margin-top:.9rem}
.policy-block ol,.policy-block ul{padding:0;margin-top:1rem;display:grid;gap:.55rem;counter-reset:li}
.policy-block li{display:grid;grid-template-columns:2rem 1fr;gap:.4rem;font-size:1rem;line-height:1.75;color:var(--fg-2)}
.policy-block ol li::before{counter-increment:li;content:counter(li)".";color:var(--wood-500);font-weight:700;font-size:.88rem;padding-top:.1em}
.policy-block ul li::before{content:"—";color:var(--wood-500);font-weight:700}

@media(max-width:820px){
  .policy-block{padding:1.5rem 1.35rem}
  .page-hero{padding:8rem 0 3rem}
}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}