/* The family's fonts and tokens (eThorns, Akantha Labs): paper and ink, a serif to read, pixel mono for labels.
   Each site's build puts this file in front of its own stylesheet (sites/shared/kit.py css()). */
@font-face { font-family: Literata; src: url(/fonts/literata-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-600-normal.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Departure Mono"; src: url(/fonts/DepartureMono-Regular.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: light;
  /* paper and ink */
  --desk: #f7f6f3; --sheet: #fff; --thead: #f9f7f08a; --glass: color-mix(in srgb, var(--desk) 78%, transparent); /* frosted bars */
  --ink: #151515; --text: #1d1f23; --mut: #505661; --faint: #6b6b6b; --ghost: #c9c7bf; /* bullets, empty marks */
  --line: #e4e2db; --grid: #efede7;
  /* signals: the base colour is text (4.5:1 on white), -bg/-t a tint, -line the border of a tinted box, -ink text on the tint */
  --blue: #2f43ff; --blue-d: #1a2bd6; --blue-t: #e8ebff; --blue-line: #c5ccff; --blue-ink: #1e2a9e;
  --ok: #007a5a; --ok-bg: #e3f6ef; --ok-line: #b5e3d2; --ok-ink: #0b4d3b;
  --warn: #7a4f00; --warn-bg: #fff4cc; --bad: #b42d14; --bad-bg: #ffe3dc;
  /* fills for squares, bars and marks (too light for text), and their text colours (4.5:1 on white) */
  --red: #ff4d2e; --yellow: #ffb800; --green: #00a57a; --pink: #e0249a; --violet: #7c3aed;
  --red-tx: #c23a1e; --yellow-tx: #8a5a00; --pink-tx: #b01f84; --violet-tx: #6d28d9;
  --hair: rgb(0 0 0 / .2); --shade: rgb(0 0 0 / .1); /* hairlines and soft shadows */
  --serif: Literata, Georgia, "Times New Roman", serif;
  --pix: "Departure Mono", ui-monospace, monospace;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  --label: 11px/1.5 var(--pix); /* every label: uppercase, .02em */
  --drop: rgb(21 21 21 / .16); --drop-blue: rgb(47 67 255 / .3); /* offset shadows: soft, never solid black */
}

/* Akantha Labs: the family's paper and ink (sites/shared/base.css comes first) in a letterhead: one page on the desk, a top
   bar, framed cards with soft offset shadows, pixel-mono labels, the red of a thorn as the one accent.
   Scale: text 15 / 17 / 21 / 30 / h1; labels 11 (buttons 12); radius 2; borders 1px --ink (things you use) or --line.
   The motion (bottom) is decoration: without it, or without site.js, the page is complete and still. */
@property --i { syntax: "<integer>"; inherits: true; initial-value: 0; } /* a word's or a card's place: computed where it's set, then inherited */
:root {
  --amber: #f2a900; /* Carbonode's colour */
  --wrap: 1120px;
  --c: var(--ink);
}
.b-ethorns { --c: var(--blue); } .b-carbonode { --c: var(--amber); } .b-enredadera { --c: var(--green); } .b-tufotopies { --c: var(--pink); }

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--text); font: 17px/1.7 var(--serif); overflow-wrap: break-word; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.px { font: var(--label); text-transform: uppercase; letter-spacing: .02em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.mark { font: 17px var(--pix); text-transform: uppercase; letter-spacing: .02em; color: var(--red-tx); } /* a wordmark until Felipe draws the logo */
.mark:hover { color: var(--red-tx); text-decoration: none; }

/* the blueprint grid on the desk: lit around the pointer on desktops (site.js sets --mx, --my) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), var(--ink), transparent);
  mask-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), var(--ink), transparent); }

/* top bar: frozen, frosted; it tightens once the page scrolls (site.js .stuck) */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 18px max(20px, calc((100% - var(--wrap)) / 2 + 20px));
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: padding .2s ease, box-shadow .2s ease; }
.top.stuck { padding-block: 12px; box-shadow: 0 4px 2px -4px var(--shade); }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a, .top .o { color: var(--ink); }
.top .o { color: var(--blue); }

/* hero: the label, the headline, what we do and the two ways in */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: 96px; padding-bottom: 40px; }
.hero .px { margin: 0; color: var(--red-tx); }
.hero h1 { margin: 14px 0 0; font-weight: 400; font-size: 54px; line-height: 1.08; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.hero .side p { margin: 0 0 22px; color: var(--mut); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 2px; font: 12px var(--pix); text-transform: uppercase; letter-spacing: .02em; }
.btn:hover { text-decoration: none; }
.btn.p { background: var(--ink); color: var(--sheet); box-shadow: 4px 4px 0 var(--drop); }
.btn.s { background: var(--sheet); color: var(--ink); }

/* Fig. 1: the studio, the consulting, the brands (build.py fig()) */
.fig { margin-top: 24px; margin-bottom: 40px; }
.fig svg { display: block; width: 100%; height: auto; background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; }
.fig svg.tall { display: none; }
.fig figcaption { margin-top: 10px; text-align: center; color: var(--faint); }
.dg-gridline { fill: none; stroke: var(--grid); }
.dg-lines path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dg-box { fill: var(--sheet); stroke: var(--ink); }
.dg-core { fill: var(--ink); } .dg-core-t { fill: var(--sheet); font-size: 13px; }
.dg-pix { font-family: var(--pix); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.dg-serif { font-family: var(--serif); font-size: 16px; fill: var(--ink); }
.dg-red { fill: var(--red-tx); } .dg-mut { fill: var(--faint); } .dg-fill { fill: var(--c); }
.dot { fill: var(--red); opacity: .75; }

/* sections */
section { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--line); }
.sechead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.sechead .px { color: var(--red-tx); }
h2 { margin: 0; font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.sechead p { max-width: 460px; margin: 0 0 0 auto; text-align: right; font-size: 15px; color: var(--mut); }

/* consulting: three framed cards; on hover one lifts and shows its grid, like a workbench */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* three consulting services and the partnership */
.svc article { padding: 22px 22px 24px; background-color: var(--sheet); border: 1px solid var(--ink); border-radius: 2px; box-shadow: 4px 4px 0 var(--drop);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px;
  background-position: -16px -16px; background-repeat: no-repeat; }
.svc article:hover { background-repeat: repeat; }
.svc .px { color: var(--red-tx); }
.svc h3 { margin: 10px 0 8px; font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--ink); }
.svc p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mut); }

/* brands: a registry, each row in its brand's colour */
.reg { background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; }
.reg .row { display: grid; grid-template-columns: 14px 190px minmax(0, 1fr) 150px 170px; gap: 18px; align-items: center; padding: 18px 22px; color: var(--text); border-top: 1px solid var(--line);
  background: linear-gradient(color-mix(in srgb, var(--c) 8%, transparent), color-mix(in srgb, var(--c) 8%, transparent)) no-repeat; background-size: 0 100%; }
.reg .row:first-child { border-top: 0; }
.reg .row:hover { text-decoration: none; background-size: 100% 100%; }
.sq { width: 8px; height: 8px; background: var(--c); }
.reg b { font-weight: 400; font-size: 21px; color: var(--ink); }
.reg .d { font-size: 15px; line-height: 1.5; color: var(--mut); }
.reg .dom { text-align: right; color: var(--blue); }
.status { display: inline-block; padding: 2px 7px; border-radius: 2px; }
.status.live { background: var(--ok-bg); color: var(--ok-ink); }
.status.dev, .status.soon { background: var(--warn-bg); color: var(--warn); }

/* company: a letterhead */
.letter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; padding: 28px 32px; background: var(--sheet); border: 1px solid var(--ink); border-radius: 2px; }
.letter div { display: flex; gap: 12px; padding: 12px 0; font-size: 15px; border-bottom: 1px dotted var(--line); }
.letter div .px { flex-shrink: 0; width: 120px; line-height: 1.9; color: var(--faint); }

/* the legal pages: one sheet */
.doc { max-width: 840px; margin: 48px auto 24px; padding: 40px 56px 32px; background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; }
.doc .up { color: var(--ink); } .doc .up:hover { color: var(--blue); text-decoration: none; }
.doc .meta { margin: 28px 0 0; text-align: center; color: var(--ink); }
.doc h1 { margin: 10px 0; text-align: center; font-weight: 400; font-size: 38px; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.doc .dek { max-width: 580px; margin: 0 auto 12px; text-align: center; color: var(--mut); }
.doc h2 { margin: 36px 0 10px; font-size: 24px; }
.doc ul { padding-left: 1.2em; }
.doc .rule { margin: 32px 0 0; text-align: center; color: var(--faint); }

footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 32px; padding-bottom: 48px; color: var(--faint); }

/* ---------- motion: only for people who haven't asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* the label types itself out (the pixel font is monospace: 40 steps = its 40 characters), then the headline rises word by word */
  .hero .type { display: inline-block; animation: type 1.1s steps(40) .15s both; }
  .rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; --i: sibling-index(); }
  .rise .w > span { display: inline-block; animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.5s + var(--i, 0) * 45ms); }
  .hero .side { animation: fade-up .8s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
  .btn, .svc article, .reg .row, .reg .dom, .sq { transition: transform .25s ease, box-shadow .25s ease, background-size .4s ease, background-color .2s ease; }
  .btn.p:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--drop); }
  .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--drop); }
  .svc article:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--drop); }
  .reg .row:hover .sq { transform: scale(1.4); }
  .reg .row:hover .dom { transform: translateX(4px); }
  /* the figure draws itself when it comes into view: the studio settles in, the lines draw, the boxes appear */
  .fig.in .draw { stroke-dasharray: 1400; animation: draw 1.2s ease both; }
  .fig.in .pop { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.2, .7, .2, 1) both; }
  .fig.in .fade { animation: fade .5s ease both; }
  .fig.in .settle { transform-box: fill-box; transform-origin: center; animation: pop .6s cubic-bezier(.2, .7, .2, 1) both; }
  .d1 { animation-delay: .1s !important; } .d2 { animation-delay: .25s !important; } .d3 { animation-delay: .4s !important; } .d4 { animation-delay: .9s !important; }
  .d5 { animation-delay: 1s !important; } .d6 { animation-delay: 1.1s !important; } .d7 { animation-delay: 1.2s !important; }
  /* sections, cards and rows rise in one after another as they come into view (site.js .in and --i) */
  .reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, background-size .4s ease; transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal.in:hover { transition-delay: 0s; }
  .reg .row.in .status { animation: fade .5s ease both; animation-delay: calc(.35s + var(--i, 0) * 90ms); }
}
/* before site.js marks them, the things it reveals wait (only where scripts run and motion is welcome) */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .reveal:not(.in) { opacity: 0; transform: translateY(12px); }
  .fig:not(.in) .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
  .fig:not(.in) :is(.pop, .fade, .settle, .dot) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dot { display: none; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.92); } }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .top { gap: 12px; padding: 14px 16px; }
  .top.stuck { padding-block: 10px; }
  .top nav { display: none; }
  .top .o { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 48px; padding-bottom: 24px; }
  .hero h1 { font-size: 34px; }
  .fig svg.wide { display: none; }
  .fig svg.tall { display: block; }
  section { padding-top: 40px; padding-bottom: 40px; }
  .sechead { flex-wrap: wrap; }
  .sechead p { margin: 0; text-align: left; }
  h2 { font-size: 26px; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .reg .row { grid-template-columns: 14px minmax(0, 1fr); gap: 4px 12px; }
  .reg .d, .reg .st, .reg .dom { grid-column: 2; text-align: left; }
  .letter { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
  .doc { margin: 20px 12px; padding: 28px 20px; }
  .doc h1 { font-size: 30px; }
  footer { flex-direction: column; gap: 6px; }
}