/* Takanuri Labs — shared styles for the one-screen pages (light + dark). */
:root {
  --bg: #f5f3ec; --grid: #e6e3d8; --surface: #faf8f2; --ink: #1d1f1b; --text: #4b4b44; --muted: #85857d; --line: #dedbcf; --rule: #1d1f1b;
  --accent: #1d7a57; --dot: #8fdcb9; --ring: #1d7a57; --track: #eceae2;
  --mint-soft: #e3f5ec; --mint-c: #8fdcb9; --mint-k: #1d7a57; --mint-deep: #11402f;
  --rose-soft: #fce8ef; --rose-c: #f5bcd0; --rose-k: #b0426a; --rose-deep: #5a1f36;
  --amber-soft: #fcf1d6; --amber-c: #f6d58e; --amber-k: #8a5a0e; --amber-deep: #4a3207;
  --blue-soft: #e6edfc; --blue-c: #b9cdf6; --blue-k: #3b62b8; --blue-deep: #1c326b;
  --btn-bg: #1d1f1b; --btn-ink: #f5f3ec;
  --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H.5V48' fill='none' stroke='%23e6e3d8'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #131518; --grid: #1f2226; --surface: #1b1e22; --ink: #ecebe4; --text: #b3b2a9; --muted: #7f7f77; --line: #2b2f34; --rule: #ecebe4;
  --accent: #8fdcb9; --dot: #8fdcb9; --ring: #8fdcb9; --track: #2a2e33;
  --mint-soft: #182b24; --mint-c: #3f8a6c; --mint-k: #8fdcb9; --mint-deep: #0d1f18;
  --rose-soft: #2e1d25; --rose-c: #94566d; --rose-k: #f5bcd0; --rose-deep: #1f1016;
  --amber-soft: #2c2516; --amber-c: #9c8047; --amber-k: #f6d58e; --amber-deep: #1c1609;
  --blue-soft: #1a2233; --blue-c: #58709f; --blue-k: #b9cdf6; --blue-deep: #0f1626;
  --btn-bg: #8fdcb9; --btn-ink: #131518;
  --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H.5V48' fill='none' stroke='%231e2125'/%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* square scrollbar in the page's own palette */
html { scrollbar-width: thin; scrollbar-color: var(--muted) var(--bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--line); }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
html, body { margin: 0; }
body {
  min-height: 100svh; background-color: var(--bg); color: var(--text);
  font: 15px/1.55 Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background-image: var(--grid-img); background-size: 48px 48px;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: var(--dot); color: #11402f; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes rise { 0%, 12% { transform: scaleY(.3); } 45%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.3); } }
@keyframes sweep { from { stroke-dashoffset: 760; } to { stroke-dashoffset: -760; } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes link { 0%, 30% { stroke-dashoffset: 30; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
@keyframes flip { 0%, 40% { transform: rotateY(0); } 55%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bar { transform-box: fill-box; transform-origin: bottom; animation: rise 4.8s ease-in-out infinite; }
.led { animation: blink 1.8s ease-in-out infinite; }
.edge { stroke-dasharray: 30; animation: link 4.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- page frame: one screen ---------- */
.page { min-height: 100svh; max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) clamp(18px, 3vh, 32px);
        display: grid; grid-template-rows: auto auto auto 1fr; grid-template-columns: minmax(0, 1fr); }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(16px, 2.6vh, 26px) 0; font-size: 14px; font-weight: 600; }
.nav .home { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.nav .home svg.sym { width: 30px; height: 30px; }
.nav .home .back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.nav .home .back svg { width: 14px; height: 14px; }
.nav .links { display: flex; align-items: center; gap: 30px; color: var(--text); }
.nav .links a:hover { color: var(--ink); }
.nav .right { display: flex; align-items: center; gap: 12px; }
.nav .enter { font-weight: 700; color: var(--ink); padding: 7px 4px; }
.nav .cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--btn-ink); background: var(--btn-bg); padding: 8px 15px; }
.nav .cta svg { width: 14px; height: 14px; }
.theme button svg { width: 15px; height: 15px; }
.theme button[aria-pressed="true"] { background: var(--mint-soft); color: var(--accent); }

.s-ring { stroke: var(--ring); } .s-dot { fill: var(--dot); } .s-moon { fill: var(--ring); }

/* ---------- wordmark ---------- */
.word { display: flex; align-items: flex-end; gap: clamp(10px, 1.4vw, 18px); padding-top: clamp(30px, 6.5vh, 80px); animation: enter .8s both; }
.wm { font-weight: var(--w); letter-spacing: 0; line-height: 0.82; white-space: nowrap; color: var(--ink); font-size: min(22.4vw, 26vh, 306px); }
/* Per-pair spacing for "takanuri", measured on Figtree ink bounds so every gap reads the same
   (a uniform tracking made t/a and k/a overlap and r/i touch while a/n stayed open).
   Each weight has its own set; --ir is the space between the ink of the i and its advance,
   so "labs" can start right where the i ends. */
:root { --w: 900; --k1: -.035em; --k2: -.056em; --k3: -.021em; --k4: -.058em; --k5: -.049em; --k6: -.059em; --k7: -.032em; --ir: .05em; }
:root.w800 { --w: 800; --k1: -.044em; --k2: -.065em; --k3: -.022em; --k4: -.067em; --k5: -.054em; --k6: -.069em; --k7: -.033em; --ir: .056em; }
:root.w700 { --w: 700; --k1: -.047em; --k2: -.078em; --k3: -.028em; --k4: -.080em; --k5: -.064em; --k6: -.084em; --k7: -.039em; --ir: .062em; }
:root.w600 { --w: 600; --k1: -.053em; --k2: -.089em; --k3: -.032em; --k4: -.091em; --k5: -.070em; --k6: -.095em; --k7: -.043em; --ir: .065em; }
.wm .k1, .mwm .k1 { margin-left: var(--k1); } .wm .k2, .mwm .k2 { margin-left: var(--k2); }
.wm .k3, .mwm .k3 { margin-left: var(--k3); } .wm .k4, .mwm .k4 { margin-left: var(--k4); }
.wm .k5, .mwm .k5 { margin-left: var(--k5); } .wm .k6, .mwm .k6 { margin-left: var(--k6); }
.wm .k7, .mwm .k7 { margin-left: var(--k7); }
.wm .labs { font-size: .145em; font-weight: 800; letter-spacing: -0.01em; color: var(--accent); margin-left: calc(var(--ir) / -0.145 + 0.14em); }
.base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.wm .i { position: relative; display: inline-block; }
.wm .dot { position: absolute; left: 50%; top: -0.07em; width: 0.25em; height: 0.25em; margin-left: -0.125em; border-radius: 50%; background: var(--dot); }
.wm .ring { position: absolute; left: 50%; top: 0.055em; width: 0.58em; height: 0.58em; margin: -0.29em 0 0 -0.29em; border-radius: 50%;
            border: 0.02em solid var(--ring); border-right-color: transparent; border-bottom-color: transparent; animation: orbit 10s linear infinite; }
.wm .ring::after { content: ""; position: absolute; left: 12%; top: 12%; width: 0.07em; height: 0.07em; margin: -0.035em; border-radius: 50%; background: var(--ring); }
.word .side { padding-bottom: clamp(8px, 1.6vh, 20px); display: flex; flex-direction: column; gap: 10px; }
.word .tag { font-size: clamp(24px, 3.4vh, 38px); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.word .side span { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.5; }

/* ---------- lede ---------- */
.lede { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(18px, 3vh, 30px); padding-top: clamp(14px, 2.2vh, 22px); border-top: 1.5px solid var(--rule); animation: enter .8s .08s both; }
.lede h1 { margin: 0; font-size: clamp(22px, 3.6vh, 34px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.lede h1 span { color: var(--accent); }
.lede p { margin: 2px 0 0; font-size: clamp(14px, 1.9vh, 16px); color: var(--text); }
.lede .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 10px 16px; }
.btn svg { width: 14px; height: 14px; }
.btn-main { background: var(--btn-bg); color: var(--btn-ink); }
.btn-soft { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

.a-mint { --soft: var(--mint-soft); --c: var(--mint-c); --k: var(--mint-k); --deep: var(--mint-deep); }
.a-rose { --soft: var(--rose-soft); --c: var(--rose-c); --k: var(--rose-k); --deep: var(--rose-deep); }
.a-amber { --soft: var(--amber-soft); --c: var(--amber-c); --k: var(--amber-k); --deep: var(--amber-deep); }
.a-blue { --soft: var(--blue-soft); --c: var(--blue-c); --k: var(--blue-k); --deep: var(--blue-deep); }
/* svg paint classes so illustrations follow the theme */
.f-k { fill: var(--k); } .f-c { fill: var(--c); } .f-s { fill: var(--surface); } .f-d { fill: var(--deep); } .f-soft { fill: var(--soft); }
.s-k { stroke: var(--k); } .s-c { stroke: var(--c); } .s-l { stroke: var(--line); } .s-s { stroke: var(--surface); }
.sweep { stroke-dasharray: 70 760; animation: sweep 4s linear infinite; }

/* ---------- footer line ---------- */
/* the last block fills the screen so the footer sits at the same place on every page */
.page > div:last-child { display: flex; flex-direction: column; }
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: auto; padding-top: clamp(12px, 2vh, 20px); font-size: 13px; color: var(--muted); }
.foot b { color: var(--ink); font-weight: 700; }


@media (max-width: 900px) {
  .nav .links { display: none; }
  .lede { grid-template-columns: 1fr; gap: 10px; }
  .word .side span { display: none; }
}
@media (max-width: 560px) {
  .nav .home .back { font-size: 0; gap: 0; } .nav .home .back svg { width: 18px; height: 18px; }
  .nav .cta { padding: 8px 12px; font-size: 13px; }
  .nav .enter { display: none; }
  .foot { flex-direction: column; }
}

/* ---------- mini wordmark: the brand wherever the name appears in text ---------- */
.mwm { display: inline-flex; align-items: baseline; gap: 0; padding-top: 0.3em; white-space: nowrap; color: var(--ink); vertical-align: baseline; }
.mwm .t { font-weight: var(--w); letter-spacing: 0; position: relative; }
.mwm .t .i { margin-right: calc(var(--ir) * -1 + 0.04em); }
/* same geometry as the big wordmark: ring 0.58em centred 0.055em below the top of the i box */
.mwm .i { position: relative; display: inline-block; line-height: 0.82; }
.mwm .mdot { position: absolute; left: 50%; top: calc(0.055em - 0.36em); width: 0.72em; height: 0.72em; transform: translateX(-50%); overflow: visible; }
.mwm b { font-size: max(0.3em, 7.5px); font-weight: 800; letter-spacing: 0; color: #1d7a57; }
.foot .mwm { font-size: 26px; }
.lede .mwm { display: inline; font-size: 1.08em; padding-top: 0; line-height: 0; }

/* nav isotype = the dot + orbit of the i */
.iso { width: 34px; height: 34px; }
.iso-dot { fill: var(--dot); } .iso-ring { stroke: var(--ring); } .iso-moon { fill: var(--ring); }
.spinning { transform-box: view-box; transform-origin: 0 0; animation: orbit 12s linear infinite; }

/* ---------- home: the first solution + an invitation, kept sober ---------- */
.duo { align-self: start; display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-top: clamp(20px, 4vh, 44px); animation: enter .8s .16s both; }
.card { border: 1px solid var(--line); background: var(--surface); padding: clamp(20px, 3vh, 28px); display: flex; flex-direction: column; }
.card .kicker { font-size: 13px; font-weight: 700; color: var(--muted); }
.card h3 { margin: 10px 0 8px; font-size: clamp(21px, 2.9vh, 26px); letter-spacing: -0.025em; line-height: 1.15; font-weight: 800; color: var(--ink); }
.card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); max-width: 460px; }
.card .bottom { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.card .go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); padding: 9px 14px; background: var(--surface); }
.card .go svg { width: 14px; height: 14px; transition: transform .25s; }
.card .go:hover svg { transform: translateX(3px); }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* =====================================================================
   Grid mode: every block, edge, line of text and button sits on the background cells.
   site.js turns it on (html.grid) and sets --cell, --cols, --left and the column helpers.
   ===================================================================== */
:root.grid body { background-size: var(--cell) var(--cell); background-position: var(--left) 0; }
:root.grid .page { max-width: none; width: calc(var(--cols) * var(--cell)); margin: 0 0 0 var(--left); padding: 0; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(22, var(--cell)); }
:root.grid .page > div:last-child { display: contents; }
/* borders sit on grid lines: boxes grow 1px right/down so both edges land on a line */
:root.grid .cellbox { margin: 0 -1px -1px 0; border-radius: 0; }

/* nav: row 1 */
:root.grid .nav { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0; padding: 0; align-items: center; }
:root.grid .nav .home { grid-column: 1; width: var(--cell); height: var(--cell); justify-content: center; }
:root.grid .nav .home svg.iso { width: calc(var(--cell) * .78); height: calc(var(--cell) * .78); }
:root.grid .nav .links, :root.grid .nav .right { display: contents; }
:root.grid .nav .links a { line-height: var(--cell); }
:root.grid .nav .links a:nth-child(1) { grid-column: var(--mid) / span 3; }
:root.grid .nav .links a:nth-child(2) { grid-column: var(--mid2) / span 4; }
:root.grid .nav .links a:nth-child(3) { grid-column: var(--mid3) / span 2; }
:root.grid .nav .enter { grid-column: -6 / span 2; text-align: center; padding: 0; line-height: var(--cell); }
:root.grid .nav .cta { grid-column: -4 / -1; height: calc(var(--cell) + 1px); justify-content: center; border-radius: 0; padding: 0; margin: 0 -1px -1px 0; }

/* the name: its baseline is snapped by site.js to the bottom line of its area */
:root.grid .word { padding: 0; align-items: flex-end; animation: none; gap: 0; grid-row: 5 / 15; grid-column: 1 / -1; }
:root.grid .wm { font-size: var(--wm); }
/* both names share one size (--wm, from site.js) so switching pages feels the same */

/* lede: the rule is a grid line; heading lines are one cell tall, body lines half a cell */
:root.grid .lede { grid-row: 16 / 20; animation: none; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0; margin: 0; padding: 0; border-top: 1.5px solid var(--rule); margin-top: -0.5px; }
:root.grid .lede h1 { grid-column: 1 / span var(--hspan); grid-row: 1 / -1; padding-top: calc(var(--cell) / 2); font-size: calc(var(--cell) * .7); line-height: var(--cell); text-wrap: wrap; }
:root.grid .lede > p { grid-column: var(--pstart) / -1; grid-row: 1 / -1; margin: 0; padding-top: calc(var(--cell) * .6); font-size: 16px; line-height: calc(var(--cell) / 2); }

/* home cards: 6 rows each, content on rows 2–5, inset one cell */
:root.grid .duo { grid-row: 14 / 21; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0; margin: 0; animation: none; }
:root.grid .card { grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; padding: 0; border-radius: 0; margin: 0 -1px -1px 0; }
:root.grid .duo .card { grid-column: 1 / -1; }
:root.grid .card > * { grid-column: 2 / -2; margin: 0; }
:root.grid .card .kicker { grid-row: 2; align-self: center; }
:root.grid .card h3 { grid-row: 3; align-self: center; font-size: 20px; line-height: calc(var(--cell) / 2); }
:root.grid .card p { grid-row: 4; align-self: center; max-width: none; line-height: calc(var(--cell) / 2); }
:root.grid .card .bottom { display: contents; }
:root.grid .card .go { grid-row: 6; grid-column: 2 / span var(--span, 4); height: calc(var(--cell) + 1px); justify-content: center; border-radius: 0; padding: 0; margin: 0 -1px -1px 0; }

/* footer: last row */
:root.grid .foot { grid-row: 22; grid-column: 1 / -1; margin: 0; padding: 0; align-items: center; align-self: stretch; }


/* square corners everywhere (phones and short screens too), same language as the grid mode */

/* square corners everywhere (phones and short screens too), same language as the grid mode */

/* =====================================================================
   Phone / tablet grid (html.mgrid): the page scrolls, but every block is a whole number of
   cells (site.js grows them) and blocks are one cell apart, so all edges stay on grid lines.
   ===================================================================== */
:root.mgrid body { background-size: var(--cell) var(--cell); background-position: var(--left) 0; }
:root.mgrid .page { display: block; max-width: none; min-height: 0; width: calc(var(--cols) * var(--cell)); margin: 0 0 0 var(--left); padding: 0 0 var(--cell); }
:root.mgrid .page > div:last-child { display: block; }
:root.mgrid .nav { height: var(--cell); margin-top: var(--cell); padding: 0; gap: 0; }
:root.mgrid .nav .home { width: var(--cell); height: var(--cell); justify-content: center; }
:root.mgrid .nav .home svg.iso { width: calc(var(--cell) * .78); height: calc(var(--cell) * .78); }
:root.mgrid .nav .links, :root.mgrid .nav .enter { display: none; }
:root.mgrid .nav .right { gap: 0; }
:root.mgrid .nav .cta { height: calc(var(--cell) + 1px); width: calc(var(--cell) * 4 + 1px); margin: 0 -1px -1px 0; padding: 0; justify-content: center; }
:root.mgrid .wm { font-size: var(--wm); }
/* the name */
:root.mgrid .word { margin-top: var(--cell); padding: 0; gap: 0; align-items: flex-end; animation: none; }
/* lede */
:root.mgrid .lede { display: block; margin: var(--cell) 0 0; padding: 0; border-top: 0; box-shadow: inset 0 1.5px 0 var(--rule); animation: none; }
:root.mgrid .lede h1 { padding-top: calc(var(--cell) / 2); font-size: calc(var(--cell) * .58); line-height: calc(var(--cell) * .75); text-wrap: wrap; }
:root.mgrid .lede > p, :root.mgrid .lede > div > p { margin: 0; padding-top: calc(var(--cell) / 2); font-size: 15px; line-height: calc(var(--cell) / 2); }
:root.mgrid .lede .actions { display: flex; gap: 0; margin: var(--cell) 0 0; padding-top: 0; }
:root.mgrid .lede .btn { height: var(--cell); margin: 0 -1px 0 0; padding: 0; justify-content: center; }
:root.mgrid .lede .btn-main { width: calc(var(--cell) * 5 + 1px); }
:root.mgrid .lede .btn-soft { width: calc(var(--cell) * 3 + 1px); }
/* home cards */
:root.mgrid .duo { display: block; margin: var(--cell) 0 0; animation: none; }
:root.mgrid .card { padding: calc(var(--cell) - 1px); margin: 0 -1px var(--cell) 0; }
:root.mgrid .card:last-child { margin-bottom: 0; }
:root.mgrid .card .kicker { line-height: calc(var(--cell) / 2); }
:root.mgrid .card h3 { margin: 0; line-height: calc(var(--cell) / 2); font-size: 19px; padding-top: calc(var(--cell) / 2); }
:root.mgrid .card p { line-height: calc(var(--cell) / 2); padding-top: calc(var(--cell) / 2); }
:root.mgrid .card .bottom { padding-top: var(--cell); justify-content: flex-start; }
:root.mgrid .card .go { height: var(--cell); width: calc(var(--cell) * var(--span, 4) + 1px); margin: 0 -1px 0 0; padding: 0; justify-content: center; }
/* footer */
:root.mgrid .foot { height: var(--cell); margin-top: var(--cell); padding: 0; align-items: center; flex-direction: row; }