:root {
  --ink: #000;
  --sub: rgb(130 130 130);
  --bg: #fff5d1;
  --sky: #f0f8ff;
  --labs: #162dab;
  --client: #006951;
  --plant: #2f8a3e;
  --mono: monospace;
  --pad-s: .25rem;
  --pad: .5rem;
  --pad-l: 1rem;
  --pad-xl: 2rem;
  --pad-section: 3rem;
  --fs-xl: 2.5rem;
  --fs-l: 2rem;
  --fs-m: 1.4rem;
  --fs-less: .85rem;
  --fs-s: .7rem;
  --col: 33rem;
  --col-w: 80%;
  --wide: 1040px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-size: 20px; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); padding: var(--pad-l); }
h1, h2, h3, h4 { font-weight: normal; }
h1 { font-size: var(--fs-xl); line-height: 1; text-indent: -.15rem; }
p { line-height: 1.4; }
a { color: var(--ink); text-decoration: none; padding-bottom: .05em; border-bottom: 1px solid; }
a:hover { color: var(--sub); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.icon { width: 20px; height: 20px; fill: currentColor; }

header, main, footer, section { position: relative; padding: var(--pad) 0; }
main { margin-bottom: var(--pad-l); }
main, footer { border-top: 2px solid var(--ink); }

/* ---------- Clock meter: the visitor's day (the page's "battery") ---------- */
.meter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#sky { background: var(--sky); height: 0; }
#mark {
  position: absolute; right: 0; z-index: 100;
  font-family: var(--mono); font-size: .75rem; text-align: right;
  border-top: 1px solid var(--ink); padding: 7px 5px 2px .5rem;
  background: var(--bg); pointer-events: none;
}
#mark a { pointer-events: auto; border-bottom: 0; }
#mark .icon { width: 13px; height: 13px; vertical-align: -2px; }
#mark[data-state="open"] .moon, #mark[data-state="closed"] .sun { display: none; }

/* ---------- Header ---------- */
.site-header h1 { text-transform: uppercase; }
.site-header h1 a, nav a, .site-footer a { border-bottom: 0; padding-bottom: 0; }
.subtitle { line-height: 1.2; }
.subtitle a { border-bottom: 0; }
.subtitle .icon { position: relative; top: 3px; }

nav { width: 100%; position: relative; }
#menu-btn { display: none; }
#menu-list { list-style: none; line-height: 1.5; }
#menu-list li { display: inline-block; }
#menu-list li::before { content: " | "; }
#menu-list li:first-child::before, #menu-list li.icons::before { content: ""; }
#menu-list a { display: inline-block; }
#menu-list .icon { width: 17px; position: relative; top: 4px; margin-left: var(--pad-s); }
[data-nav="labs"] { color: var(--labs); }
[data-nav="clients"] { color: var(--client); }

/* Capacity meter + Greek grid right now, resting on the right end of the line under the header */
#indicators {
  position: absolute; right: 0; bottom: var(--pad-s);
  display: flex; align-items: center; gap: .7em;
  font-family: var(--mono); font-size: .75rem; white-space: nowrap;
}
#capacity:not([hidden]) + #grid-mix::before { content: "|"; } /* only when both are showing */
#figure:not([hidden]) + #capacity::before { content: "|"; margin-right: .2em; }
#indicators > a { position: relative; display: flex; align-items: center; border-bottom: 0; padding-bottom: 0; }
/* "~34 h open for new projects" / "Greek grid at 20:00": on hover, hanging just under the line, so nothing moves */
#indicators .label {
  display: none; position: absolute; right: -4px; top: calc(100% + var(--pad-s) + 6px);
  padding: 1px 4px; background: var(--bg); color: var(--sub);
}
/* With a mouse: on hover. On touch screens a tap toggles .show (js/opteemal.js); phones keep :hover stuck after a tap */
@media (hover: hover) { #indicators > a:hover .label { display: block; } }
#indicators > a:focus-visible .label, #indicators > a.show .label { display: block; }
/* Touch screens can't open the Greek grid link (a tap shows its line instead), so the footer credits Energy-Charts */
.grid-credit { display: none; }
@media (hover: none) { .grid-credit { display: block; } }

/* The figure: a pictogram (solid head, thick body, bold limbs), one scene at a time (data-state) */
#figure .icon {
  width: 1.7em; height: 1.36em; margin: -.12em 0; overflow: visible; /* margin: takes up the height of the text items, so the row and labels stay put */
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#figure .head { fill: currentColor; stroke: none; }
#figure .thick { stroke-width: 3; }
#figure .thin { stroke-width: 1.2; }
#figure .icon > g { display: none; }
#figure[data-state="work"] .work, #figure[data-state="coffee"] .coffee, #figure[data-state="sleep"] .sleep,
#figure[data-state="party"] .party, #figure[data-state="stroll"] .stroll { display: inline; }
/* Moves are in drawing units (the figure is 16 units tall), so about 1px each at this size */
#figure .code { stroke-width: 1; transform-box: fill-box; transform-origin: 0 50%; animation: 3s linear infinite; } /* work: code types out */
#figure .c1 { animation-name: fig-code1; }
#figure .c2 { animation-name: fig-code2; }
#figure .c3 { animation-name: fig-code3; }
#figure .sip { transform-origin: 7px 6.4px; animation: fig-sip 3.5s ease-in-out infinite; } /* coffee: cup to mouth */
#figure .steam { animation: fig-rise 2s ease-out infinite; }
#figure .steam + .steam { animation-delay: 1s; }
#figure .breathe { animation: fig-breathe 2.4s ease-in-out infinite alternate; }  /* sleep */
#figure .z { animation: fig-z 2.6s ease-out infinite; }
#figure .z + .z { animation-delay: 1.3s; }
#figure .bounce { animation: fig-bounce .4s ease-in-out infinite alternate; }    /* party */
#figure .arm { transform-origin: 9px 7.2px; animation: fig-arm-l .4s ease-in-out infinite alternate; }
#figure .arm + .arm { animation-name: fig-arm-r; }
#figure .note { animation: fig-hop .4s steps(1) infinite; }
#figure .tree { opacity: .35; animation: fig-pass 3.2s linear infinite; }         /* stroll: trees pass behind */
#figure .tree + .tree { animation-delay: -1.6s; }
#figure .trunk { stroke-width: 1.8; }
#figure .walk { animation: fig-bob .225s ease-in-out infinite alternate; }
#figure .leg { transform-origin: 6.5px 10px; animation: fig-step .45s ease-in-out infinite alternate; }
#figure .swing { transform-origin: 6.5px 6.6px; animation: fig-step .45s ease-in-out infinite alternate-reverse; }
#figure .leg + .leg { animation-direction: alternate-reverse; }
#figure .swing + .swing { animation-direction: alternate; }
@keyframes fig-code1 { 0% { transform: scaleX(0); } 15%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes fig-code2 { 0%, 25% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes fig-code3 { 0%, 50% { transform: scaleX(0); } 65%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes fig-pass { from { transform: translateX(24.5px); } to { transform: translateX(-4.5px); } }
@keyframes fig-bob { to { transform: translateY(-.6px); } }
@keyframes fig-step { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes fig-sip { 0%, 50%, 100% { transform: none; } 65%, 85% { transform: rotate(-40deg); } }
@keyframes fig-rise { 0% { opacity: 0; transform: translateY(1.5px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3.5px); } }
@keyframes fig-breathe { to { transform: translateY(-1px); } }
@keyframes fig-z { 0% { opacity: 0; transform: translate(-1px, 2.5px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(2.5px, -4px); } }
@keyframes fig-bounce { to { transform: translateY(-2.2px); } }
@keyframes fig-arm-l { to { transform: rotate(14deg); } }
@keyframes fig-arm-r { to { transform: rotate(-14deg); } }
@keyframes fig-hop { 50% { transform: translateY(-1.8px); } }
@media (prefers-reduced-motion: reduce) {
  #figure .icon * { animation: none; }
  #figure .tree { transform: translateX(15.5px); } /* one tree standing still beside the walker */
  #figure .tree + .tree { display: none; }
}

/* Capacity, mini: "Nov ▮▮▮▮▮▮▮▯▯▯" */
#capacity { gap: .5em; }
#capacity .month { color: var(--sub); }
#capacity .cells { display: flex; gap: 2px; }
#capacity .cells i { width: 6px; height: 11px; border: 1px solid currentColor; }
#capacity .cells i.on { background: currentColor; }

/* Greek grid (filled in from /api/grid) */
#grid-mix { gap: .7em; }
#grid-mix .icon { width: 15px; height: 15px; margin-right: 3px; vertical-align: -3px; }
#grid-mix .low { opacity: .35; } /* under 3% of generation */
#grid-mix .blades { transform-origin: 12px 9px; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #grid-mix .blades { animation: none; } }

/* ---------- Intro ---------- */
.intro { padding: var(--pad-l) 0 var(--pad-xl); }
.intro .summary { font-size: 1.5rem; line-height: 1.2; max-width: 34rem; }
/* The full stop after "environment" sprouts: the dot is the real character, the shoot is drawn up from it */
.sprout { position: relative; margin-left: .1em; } /* room for the left leaf, clear of the "t" */
.sprout svg {
  position: absolute; left: calc(50% + .05em); bottom: .216em; /* on the dot: its middle, the baseline in Times-metric fonts */
  width: .7em; height: .95em; transform: translateX(-50%); overflow: visible;
}
.sprout .stem { fill: none; stroke: var(--plant); stroke-width: 1.15; } /* square ends: round ones leave a dot before it grows */
.sprout .leaf { fill: var(--plant); }
/* It grows once on load: the stem draws up from the dot, then the leaves open */
@media (prefers-reduced-motion: no-preference) {
  .sprout .stem { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; animation: grow .7s .4s ease-out forwards; } /* starts fully in the gap */
  .sprout .leaf { transform: scale(0); transform-box: fill-box; animation: unfold .45s ease-out forwards; }
  .sprout .left { transform-origin: 100% 100%; animation-delay: .85s; }
  .sprout .right { transform-origin: 0 100%; animation-delay: 1s; }
}
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes unfold { to { transform: scale(1); } }
.intro .summary + p { margin-top: var(--pad-l); max-width: var(--col); }

.metadata {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pad-s) var(--pad-l);
  margin: var(--pad-l) 0 0; color: var(--sub); font-family: var(--mono); font-size: var(--fs-s);
}
.metadata a { color: var(--sub); }
.metadata a.btn { border: 1px solid var(--sub); padding: 3px var(--pad-s); }
.metadata a.btn:hover { background: var(--sub); color: var(--bg); }

/* ---------- Work grid (generated from posts/) ---------- */
.grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad-l); }
.cover { grid-column: 1 / -1; }
.cover > a, .cover > .plain { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad-l); border-bottom: 0; padding-bottom: 0; }
.cover .image { grid-column: 2 / -1; }
.card > a, .card > .plain { display: block; border-bottom: 0; padding-bottom: 0; }
.card > a:hover, .cover > a:hover { color: var(--sub); }

.shot {
  display: block; width: 100%; height: 210px; margin: var(--pad) 0;
  object-fit: cover; object-position: center top; mix-blend-mode: multiply;
}
.cover .shot { height: 500px; margin-top: 0; }

.category { font-family: var(--mono); font-size: var(--fs-s); }
.labs .category { color: var(--labs); }
.clients .category { color: var(--client); }
.entry-title { margin: var(--pad-s) 0 var(--pad); }
h2.entry-title { font-size: 1.5rem; line-height: 1.15; }
h3.entry-title { font-size: 1.17rem; line-height: 1.2; }
.meta { display: block; margin-top: var(--pad-s); color: var(--sub); font-family: var(--mono); font-size: var(--fs-s); }

.pagination { margin: var(--pad-xl) 0 var(--pad); text-align: center; font-family: var(--mono); }
.pagination a { border-bottom: 0; padding: 0 var(--pad); }

.trusted {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pad) var(--pad-xl);
  margin-top: var(--pad-xl); padding: var(--pad-l) 0;
  border: 1px solid var(--ink); border-width: 1px 0;
  text-transform: uppercase; letter-spacing: 1px; font-size: var(--fs-less); line-height: 1.2;
}
.trusted .label { color: var(--sub); }
.logos {
  flex: 1; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pad-l) var(--pad-xl);
}
.logos li { display: flex; align-items: center; gap: var(--pad); white-space: nowrap; }
.logos img { display: block; width: auto; filter: brightness(0); } /* logos in black ink, like the text */
@media only screen and (max-width: 550px) {
  .logos { flex-basis: 100%; justify-content: flex-start; }
}

/* ---------- Capabilities + contact, side by side ---------- */
.split { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad-l); }
/* Both columns are full of text, so Capabilities stops 1rem short: 2rem between them, while Contact
   still starts on the same line as the third column of cards */
#capabilities { margin-right: var(--pad-l); }
.split > section { grid-column: span 2; }
.split > section > * { max-width: var(--col); }
/* The ruled blocks fill their column, so each section spans the same grid lines as the cards above */
.split > section > .caps, .split > section > .post-footer { max-width: none; }
.kicker { margin-top: var(--pad-section); color: var(--sub); font-family: var(--mono); font-size: var(--fs-s); }
.split h2 { font-size: var(--fs-l); line-height: 1.1; text-indent: -.15rem; margin-top: var(--pad-s); }
.split p, .split dl { margin-top: var(--pad-l); margin-bottom: var(--pad-l); }

.caps { display: grid; grid-template-columns: 10rem 1fr; border-top: 2px solid var(--ink); }
.caps dt, .caps dd { padding: var(--pad) 0; border-bottom: 1px solid var(--ink); line-height: 1.4; }
.caps dt { padding-right: var(--pad-l); }
.caps .tags { display: block; margin-top: var(--pad-s); color: var(--sub); font-family: var(--mono); font-size: var(--fs-s); }

.post-footer {
  margin-top: var(--pad-xl); margin-bottom: var(--pad-l);
  border: 2px solid var(--ink); border-width: 2px 0; padding: var(--pad) 0;
}
.post-footer ul { list-style: none; }
.post-footer li { font-size: var(--fs-m); line-height: 1.5; }
.split .note { color: var(--sub); font-family: var(--mono); font-size: var(--fs-s); margin-top: 0; }
.note a { color: var(--sub); }

/* ---------- Post pages (generated from posts/) ---------- */
.entry-header, .hero, #post-nav { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.entry-header { padding: var(--pad-l) 0 0; }
.post h1.entry-title { font-size: var(--fs-xl); line-height: 1; text-indent: -.15rem; margin: var(--pad-s) 0 var(--pad-l); }
.post .summary { font-size: 1.5rem; line-height: 1.2; max-width: 40rem; }
.hero { margin-top: var(--pad-xl); }
.hero .shot { height: auto; max-height: 640px; margin: 0; }

.entry-content > * { max-width: var(--col); width: var(--col-w); margin: var(--pad-l) auto; }
.entry-content h2 { font-size: var(--fs-l); line-height: 1.1; text-indent: -.15rem; margin-top: var(--pad-section); }
.entry-content h3 { font-size: 1rem; font-style: italic; margin-top: var(--pad-xl); }
.entry-content h3 + p { margin-top: var(--pad-s); }
.entry-content ul, .entry-content ol { line-height: 1.4; padding-left: var(--pad-l); }
.entry-content li { margin-bottom: var(--pad); }
.entry-content blockquote { border: 1px solid var(--ink); border-width: 2px 0; }
.entry-content blockquote p { font-size: var(--fs-m); line-height: 1.3; margin: var(--pad) 0; }
.entry-content code { font-family: var(--mono); font-size: .9em; color: var(--sub); }
.entry-content pre { font-family: var(--mono); font-size: .8rem; line-height: 1.5; color: var(--sub); white-space: pre-wrap; }
.entry-content pre code { font-size: inherit; }
.entry-content img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.entry-content hr { border: 0; border-top: 2px solid var(--ink); }
.entry-content table { border-spacing: 0; }
.entry-content th, .entry-content td { padding: 8px 5px; text-align: left; }
.entry-content th { border-bottom: 2px solid var(--ink); font-weight: normal; }
.entry-content td { border-bottom: 1px solid var(--ink); }

#post-nav {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-l);
  margin-top: var(--pad-section); padding-top: var(--pad); border-top: 2px solid var(--ink); line-height: 1.3;
}
#post-nav .older { text-align: right; }
#post-nav .gray { display: block; color: var(--sub); font-family: var(--mono); font-size: var(--fs-s); }

/* ---------- Footer ---------- */
.site-footer { padding-bottom: 2.5rem; }
.site-footer h2 { text-transform: uppercase; font-size: 1.5rem; }
.dashboard { margin-top: var(--pad-l); }
.dashboard h3 { font-size: 1.17rem; margin-bottom: var(--pad-s); }
.dashboard p, .dashboard dl { line-height: 1.4; }
#stats dt { float: left; }
#stats dt::after { content: ":\00a0"; }
#stats dd { margin-bottom: 0; }
.footer-links a { display: block; line-height: 1.4; }
.dashboard .small { margin-top: var(--pad); color: var(--sub); font-size: var(--fs-less); line-height: 1.3; }

#page-size { position: fixed; bottom: 5px; left: var(--pad-l); font-family: var(--mono); font-size: var(--fs-s); }
#back-to-top { position: fixed; bottom: 5px; right: var(--pad-l); font-family: var(--mono); }
#back-to-top a { border-bottom: 0; }

/* ---------- Cookie consent (Google Analytics) ---------- */
#consent {
  position: fixed; left: var(--pad-l); right: var(--pad-l); bottom: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pad) var(--pad-l);
  padding: var(--pad) 0 var(--pad-l); border-top: 2px solid var(--ink); background: var(--bg);
  font-family: var(--mono); font-size: var(--fs-less);
}
#consent button {
  font: inherit; color: var(--ink); background: none; border: 1px solid var(--ink);
  padding: 3px var(--pad); margin-right: var(--pad-s); cursor: pointer;
}
#consent button:hover { background: var(--ink); color: var(--bg); }
#consent-open { /* looks like the links above it */
  display: block; font: inherit; line-height: 1.4; text-align: left;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
#consent-open:hover { color: var(--sub); }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 980px) {
  :root { --col-w: 90%; }
  html { font-size: 18px; }
  #work .card { grid-column: span 2; }
  .cover .text, .cover .image { grid-column: span 4; }
  .cover .shot { height: 350px; }
  .split > section { grid-column: 1 / -1; }
  #capabilities { margin-right: 0; }
  #menu-btn {
    display: block; background: none; border: 0; color: inherit; font: inherit;
    text-transform: uppercase; letter-spacing: 1px; padding-top: 2px; cursor: pointer;
  }
  #menu-btn:hover { color: var(--sub); }
  #menu-list li { display: block; }
  #menu-list li::before { content: ""; }
  #menu-list { height: 0; overflow: hidden; }
  #menu-list.show { height: auto; }
  #menu-list .icon { margin-left: 0; }
}

@media only screen and (max-width: 550px) {
  :root { --col-w: 100%; --fs-xl: 2rem; --fs-l: 1.4rem; --fs-s: .8rem; }
  html { font-size: 16px; }
  #work.grid { display: block; }
  #work .card, #work .cover { margin-bottom: var(--pad-section); }
  .cover .image { grid-row: 1; }
  .cover .text { grid-row: 2; }
  .cover .shot { height: 260px; margin-bottom: var(--pad); }
  .caps { grid-template-columns: 1fr; }
  .caps dt { border-bottom: 0; padding-bottom: 0; }
  .dashboard .grid { grid-template-columns: repeat(2, 1fr); }
  .metadata { flex-direction: column; align-items: flex-start; }
  #post-nav { grid-template-columns: 1fr; }
  #post-nav .older { text-align: left; }
  /* Not enough room beside "Menu": their own row, right-aligned, just above the line */
  #indicators { position: static; justify-content: flex-end; margin-top: var(--pad-s); }
  #indicators .label { top: calc(100% + var(--pad) + 6px); }
}

@media print {
  html { font-size: 10.5pt; }
  body { background: none; }
  .meter, nav, #indicators, #page-size, #back-to-top, .pagination, #post-nav, #consent { display: none; }
  .shot, .entry-content img { mix-blend-mode: normal; }
}