/* Layout: a hand-drawn storybook. Each section is a colored band with a wobbly edge; text keeps one left edge inside each band. */
:root {
  --ink:#1B1B18; --paper:#F6F5F0; --soft:#55544D;
  --leaf:#D7E9D9;   /* sprout tint */
  --sand:#EADCC6;   /* seed tint */
  --sprout:#2C7A4B; --seed:#8A5A2B;
  --head:"Lexend Exa", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; --body:"Lexend", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; --geo:"Noto Sans Georgian", sans-serif;
  color-scheme: light;
}
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.7 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.band { position:relative; }
.band::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .36  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.inner { position:relative; max-width:1080px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
.wave { display:block; width:100%; height:56px; margin-top:-55px; position:relative; z-index:1; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid var(--seed); outline-offset:3px; border-radius:6px; }
svg.logo, svg.icon { display:block; height:100%; width:auto; color:var(--ink); }
.doodle path, .doodle circle { vector-effect:non-scaling-stroke; }
.scene .sway path { stroke-width:4.4; }

/* header */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:24px; }
.top .home { height:26px; display:block; }
.top nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.top nav a { font:700 12px/1 var(--head); letter-spacing:.06em; text-decoration:none; padding:10px 12px; border-radius:999px; }
.top nav a:hover { background:rgba(27,27,24,.07); }

/* hero */
.hero { padding-block:8px 120px; }
.scene { display:block; width:100%; max-width:860px; height:auto; margin:0 auto; color:var(--ink); }
.thesis { font:800 clamp(28px, 5vw, 56px)/1.12 var(--head); letter-spacing:-.02em; margin:24px 0 16px; max-width:15em; text-wrap:balance; }
.thesis em { font-style:normal; color:var(--sprout); }
.sub { margin:0; max-width:30em; color:var(--soft); font-size:clamp(17px,2vw,20px); }

/* sections */
.sec { padding-block:72px 120px; }
.eyebrow { font:700 12px/1 var(--head); letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; color:var(--seed); }
h2 { font:800 clamp(28px, 4.4vw, 48px)/1.12 var(--head); letter-spacing:-.02em; margin:0 0 48px; max-width:16em; text-wrap:balance; }
h3 { font:700 20px/1.3 var(--head); margin:0 0 8px; letter-spacing:-.01em; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.card .pic { height:150px; display:flex; align-items:flex-end; margin-bottom:16px; }
.card .pic svg { height:100%; width:auto; color:var(--ink); }
.card p { margin:0 0 12px; }
.card ul { margin:0; padding:0; list-style:none; font-size:15px; display:grid; gap:4px; color:var(--soft); }
.card li::before { content:"→ "; color:var(--sprout); font-weight:600; }

/* case studies: two columns of cards. Each card reads who -> problem -> why -> built -> fit. */
.lead { margin:-24px 0 48px; max-width:34em; color:var(--soft); }
.cases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.case { background:#fff; border:2px solid rgba(27,27,24,.12); border-radius:20px; padding:24px; display:flex; flex-direction:column; }
.case .who { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--seed); }
.case h3 { margin-bottom:16px; }
.case dl { margin:0; display:grid; gap:12px; }
.case dt { font:700 12px/1.2 var(--head); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.case dd { margin:4px 0 0; font-size:15px; color:var(--soft); }
.case .fit { margin:16px 0 0; padding-top:16px; border-top:2px dashed rgba(27,27,24,.2); font-size:15px; }
.case .fit b { display:block; font:700 12px/1.2 var(--head); letter-spacing:.06em; text-transform:uppercase; color:var(--sprout); margin-bottom:4px; }
.case .tech { margin-top:auto; padding-top:16px; font-size:13px; font-weight:600; color:var(--seed); }
.ask { margin:40px 0 0; font-size:17px; } .ask a { color:var(--sprout); font-weight:700; }

.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.steps .pic { height:170px; display:flex; align-items:flex-end; margin-bottom:12px; }
.steps .pic svg { height:100%; width:auto; color:var(--ink); }
.steps .n { font:800 14px/1 var(--head); color:var(--seed); display:block; margin-bottom:8px; }
.steps p { margin:0; color:var(--soft); font-size:15px; }

.roots { margin:0; display:grid; gap:0; }
.root { display:grid; grid-template-columns:9rem minmax(0,1fr); gap:24px; align-items:baseline; padding-block:24px; border-top:2px dashed rgba(27,27,24,.25); }
.root dt { font:800 34px/1.1 var(--head); } .root dt.geo { font-family:var(--geo); font-size:30px; }
.root dd { margin:0; max-width:32em; } .root .say { display:block; font-size:13px; color:var(--seed); font-weight:600; margin-bottom:2px; }

.contact { color:#fff; }
.contact .eyebrow { color:#F3D9B1; }
.mail-row { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.mail { font:800 clamp(30px, 6vw, 64px)/1.05 var(--head); letter-spacing:-.02em; user-select:all; overflow-wrap:anywhere; }
.round { display:inline-flex; align-items:center; gap:10px; font:700 15px/1 var(--body); color:#fff; background:var(--seed); border:0; border-radius:999px; padding:14px 20px 14px 22px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.round:active { transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.round .arr { width:26px; height:26px; border-radius:50%; background:#fff; color:var(--seed); display:grid; place-items:center; font-weight:700; }
.contact .note { margin:20px 0 0; opacity:.85; }
.contact .wave-pic { position:absolute; right:max(20px, env(safe-area-inset-right,0px)); bottom:24px; height:180px; color:#fff; }
.contact .wave-pic svg { height:100%; width:auto; color:#fff; }

footer { color:#F6F5F0; }
footer .inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; padding-block:40px 48px; font-size:13px; }
footer .fl { height:30px; color:#F6F5F0; } footer .fl svg { color:#F6F5F0; }

@media (max-width:820px) {
  .cards { grid-template-columns:minmax(0,1fr); gap:48px; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px; }
  .cases { grid-template-columns:minmax(0,1fr); gap:16px; }
  .case { padding:20px; }
  .root { grid-template-columns:6rem minmax(0,1fr); gap:16px; } .root dt { font-size:26px; } .root dt.geo { font-size:22px; }
  .contact .wave-pic { position:static; height:130px; margin-top:32px; }
  .top nav a { padding:8px 8px; font-size:11px; }
  .hero { padding-bottom:96px; } .sec { padding-block:56px 104px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sway { animation:sway 3.6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:50% 100%; }
  @keyframes sway { from { transform:rotate(-2.5deg); } to { transform:rotate(2.5deg); } }
}

/* Japanese: no negative tracking on headings, break at phrase boundaries where supported */
.thesis, h2, h3, .mail { letter-spacing:0; word-break:auto-phrase; }
.eyebrow { letter-spacing:.08em; }

/* news: a dated list. Date on the left, title on the right, one left edge. */
.news { list-style:none; margin:0; padding:0; max-width:46em; }
.news li { border-top:2px dashed rgba(27,27,24,.25); }
.news li:last-child { border-bottom:2px dashed rgba(27,27,24,.25); }
.news a { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:16px; align-items:baseline; padding-block:16px; text-decoration:none; }
.news a:hover .nt { text-decoration:underline; text-underline-offset:4px; }
.news time { font:700 14px/1.4 var(--head); color:var(--seed); }
.news .nt { font-weight:600; }
.news .tag { display:inline-block; margin-right:8px; font:700 12px/1 var(--head); color:var(--sprout); }
.more { margin:24px 0 0; } .more a { color:var(--sprout); font-weight:700; }

/* news pages */
.page { padding-block:24px 120px; }
.page h1 { font:800 clamp(26px, 4.4vw, 44px)/1.3 var(--head); margin:8px 0 24px; max-width:22em; word-break:auto-phrase; }
.page .meta { margin:0; font:700 14px/1.4 var(--head); color:var(--seed); }
.article { max-width:36em; }
.article p { margin:0 0 24px; }
.article ul { margin:0 0 24px; padding-left:1.4em; display:grid; gap:8px; }
.article li::marker { color:var(--sprout); }
.go { display:inline-flex; align-items:center; gap:10px; font:700 15px/1 var(--body); color:#fff; background:var(--sprout); border-radius:999px; padding:14px 20px 14px 22px; text-decoration:none; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.go .arr { width:26px; height:26px; border-radius:50%; background:#fff; color:var(--sprout); display:grid; place-items:center; }
.back { margin:48px 0 0; } .back a { color:var(--sprout); font-weight:700; }
@media (max-width:820px) { .news a { grid-template-columns:minmax(0,1fr); gap:4px; } }

/* privacy page */
.policy { max-width:40em; }
.policy h2 { font:700 22px/1.4 var(--head); margin:40px 0 8px; }
.policy p { margin:0 0 16px; }
.policy a { color:var(--sprout); }
.ptable { width:100%; border-collapse:collapse; font-size:15px; margin:0 0 16px; }
.ptable th, .ptable td { text-align:left; padding:8px 8px 8px 0; border-bottom:1px solid rgba(27,27,24,.15); vertical-align:top; }
.ptable th { font-weight:700; }
.ptable td:first-child { white-space:nowrap; font-family:ui-monospace,monospace; font-size:14px; }
.tcf { display:inline-flex; gap:4px; align-items:center; }