/* Studio SPACECRAFT — shared tokens and brand elements.
   Loaded by every page. Page-specific styles live in their own file or <style> block.
   Fonts are self-hosted: link assets/css/fonts.css in each page <head>, before this file.
   The site makes no requests to any other host (no Google Fonts). */

:root{
  color-scheme:light;
  --bg:#ffffff;
  --tint:#f6f4f1;           /* quiet section background */
  --ink:#000000;
  --ink-2:#5f5f5f;
  --line:#e3e1dd;
  --ghost:rgba(0,0,0,.12);  /* not-yet-written part of the lockup during the intro */
  --shadow:rgba(0,0,0,.18);
  --plan-filter:none;       /* line drawings are black on transparent; inverted in dark mode */
  --coral:#e2665c;          /* brand coral = PANTONE 4057 C (sRGB 226,102,92). Same value in dark mode. */
  --coral-blend:#1d99a3;    /* coral for white + mix-blend-mode:difference text: white bg − this = --coral */
  --mono:"Source Code Pro",ui-monospace,monospace;   /* labels, nav, meta */
  --sans:"Manrope",system-ui,sans-serif;           /* headings + body */
  --brand:"Poppins",system-ui,sans-serif;          /* brand lockup only */
}

/* ---------- dark mode — SWITCHED OFF (owner, 2 Oct 2026) ----------
   Every device gets the light theme: assets/js/theme.js (DARK_MODE = false) always sets
   <html data-theme="light">. Keep the dark values below up to date with every colour change
   anyway, so dark mode can come back. To switch it on: DARK_MODE = true in theme.js and
   uncomment the no-JS fallback block below. Keep both blocks in sync. */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e0e0d;
  --tint:#161514;
  --ink:#f1eee9;
  --ink-2:#a19c95;
  --line:#2b2927;
  --ghost:rgba(255,255,255,.12);
  --shadow:rgba(0,0,0,.6);
  --plan-filter:invert(1) hue-rotate(180deg);
  --coral:#e2665c;          /* PANTONE 4057 C — 4.9:1 on --bg, fine for text */
  --coral-blend:#f07469;    /* this − dark --bg (#0e0e0d) = --coral under difference */
}
/* No-JS fallback, off while dark mode is switched off (it would turn pages dark without JS):
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0e0e0d; --tint:#161514; --ink:#f1eee9; --ink-2:#a19c95; --line:#2b2927;
    --ghost:rgba(255,255,255,.12); --shadow:rgba(0,0,0,.6);
    --plan-filter:invert(1) hue-rotate(180deg); --coral:#e2665c; --coral-blend:#f07469;
  }
}
*/

/* theme toggle button (icons swap via [data-theme]) */
.theme-toggle .ic-sun{opacity:0}
[data-theme="dark"] .theme-toggle .ic-sun{opacity:1}
[data-theme="dark"] .theme-toggle .ic-moon{opacity:0}

/* ---------- brand lockup: mark + STUDIO SPACECRAFT + Architecture ----------
   The mark is a transparent PNG used as a CSS mask, so its colour follows `color`. */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);line-height:1}
.brand-mark{display:block;width:var(--mark-w,44px);aspect-ratio:800/545;background:currentColor;
  -webkit-mask:url("../img/brand/mark.png") center/contain no-repeat;mask:url("../img/brand/mark.png") center/contain no-repeat}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-name{font-family:var(--brand);font-weight:600;font-size:var(--name-size,15px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand-sub{font-family:var(--brand);font-weight:300;font-size:calc(var(--name-size,15px) * .62);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.brand .brand-mark{color:var(--coral)}

/* the studio's name inside running text and headings: always capitals + bold (owner rule).
   Markup: <span class="sn">Studio SPACECRAFT</span> — the words that follow ("Architecture") stay as they are. */
.sn{text-transform:uppercase;font-weight:700}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- content pages (about, contact, projects): header, footer, reveal ----------
   Same language as the home chrome: centred Manrope nav with hairline separators, no bars,
   pills or shadows. Desktop: sticky, 92px tall (project pages offset sticky panels by 92px).
   Phones: two rows (lockup + theme toggle, then the nav) and not sticky — one row can't fit
   the lockup, three links and the toggle in 375px. */
:root{--gutter:4vw}
@media (max-width:767px){ :root{--gutter:6vw} }
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

.site-header{position:sticky;top:0;z-index:30;background:var(--bg);transition:background .4s;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:92px;padding:0 var(--gutter)}
/* content pages show the mark only (no name), in --ink (black; light in dark mode); it links home */
.site-header .brand{--mark-w:56px;justify-self:start;padding:6px 0;transition:opacity .2s}
.site-header .brand .brand-mark{color:var(--ink)}
.site-header .brand:hover .brand-mark,.site-header .brand:focus-visible .brand-mark{color:var(--coral)} /* logo turns coral on hover (owner) */
.site-header .brand:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
.site-nav{display:flex;align-items:center}
.site-nav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1.2;padding:4px 16px;text-decoration:none;color:var(--ink)}
/* links turn coral on hover, and the current section is coral (owner, 28 Sep 2026: no underlines) */
.site-nav a + a{border-left:1px solid var(--ink)}
/* language switch, last in the main nav on the edge line (owner, 1 Oct 2026; written by
   tools/i18n.py): only the other language — GR on English pages, EN on Greek ones — looking like
   the nav links. Inactive until the Greek site launches: plain text, no link. */
.lang-switch{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1.2;padding:4px 16px;color:var(--ink);cursor:default;white-space:nowrap}
.lang-switch:last-child{padding-right:0}
a.lang-switch{cursor:pointer}   /* live: a link to the same page in the other language; hover = the nav's coral */
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current]{color:var(--coral)}
/* ---------- header v2 (`.site-header.hdr-v2`, opt-in per page; see AGENTS.md) ----------
   15% larger mark, and the header tucks away while scrolling down: everything except the logo
   fades out, and it all comes back on the first scroll up. Driven by assets/js/header.js, which
   toggles .is-tucked. Sticky on phones as well.
   No bar background, ever (owner, 28 Sep 2026): mark, nav and icons are white + `difference`
   ("text on images" rule), so they read as --ink on the plain page and invert over images
   scrolling underneath. The blend sits on the header itself: it is the stacking context. */
.site-header.hdr-v2{background:transparent;mix-blend-mode:difference;transition:none}
/* Edges (owner, 28 Sep 2026): on every page the header sits on an 8px line — the mark 8px from the
   left and 8px from the top, the icons 8px from the right — whatever the page's own --gutter.
   The bar keeps its 92px height (so page content doesn't move); its row starts at the top and the
   nav and icons stay centred on the mark's row. `.brand` has 6px vertical padding, hence 8 − 6. */
.site-header.hdr-v2{--hg:8px;padding:calc(var(--hg) - 6px) var(--hg) 0;align-content:start}
.site-header.hdr-v2 .brand .brand-mark,.site-header.hdr-v2 .site-nav a,.site-header.hdr-v2 .lang-switch,
.site-header.hdr-v2 .theme-toggle,.site-header.hdr-v2 .menu-toggle{color:#fff}
/* under the blend plain coral would show teal: --coral-blend comes out as --coral on the page */
.site-header.hdr-v2 .site-nav a + a{border-left:0} /* no separators (owner, 28 Sep 2026) */
.site-header.hdr-v2 .site-nav a:hover,.site-header.hdr-v2 .site-nav a:focus-visible,.site-header.hdr-v2 .site-nav a[aria-current]{color:var(--coral-blend)}
/* coral reads thinner than black/white (lighter colour, softer blended edges): a hairline stroke in
   the same colour restores the visual weight without changing the glyph widths (no layout shift) */
.site-header.hdr-v2 .site-nav a:hover,.site-header.hdr-v2 .site-nav a:focus-visible,.site-header.hdr-v2 .site-nav a[aria-current]{-webkit-text-stroke:.4px currentColor}
.site-header.hdr-v2 .brand:hover .brand-mark,.site-header.hdr-v2 .brand:focus-visible .brand-mark{color:var(--coral-blend)}
.site-header.hdr-v2 .brand{--mark-w:83px} /* 64px + 30% (owner, 28 Sep 2026) */
.site-header.hdr-v2 .site-nav,.site-header.hdr-v2 .header-tools{transition:opacity .3s ease,visibility .3s}
/* tucked: only the logo stays, and clicks pass through the empty bar */
.site-header.hdr-v2.is-tucked{pointer-events:none}
.site-header.hdr-v2.is-tucked .brand{pointer-events:auto}
.site-header.hdr-v2.is-tucked .site-nav,.site-header.hdr-v2.is-tucked .header-tools{opacity:0;visibility:hidden}
/* tucked: "STUDIO SPACECRAFT" (added by header.js, brand lockup type) takes the icons' place on
   the right, on the mark's row; scrolling back up swaps them again (owner, 28 Sep 2026) */
/* Layout (owner, 28 Sep 2026): mark on the left; nav + theme toggle together on the right, one row
   on phones too. The project-list button and its pull-out list are gone from these headers.
   When tucked, "STUDIO SPACECRAFT" spans the nav + toggle columns and sits at the right edge. */
/* no theme switch any more (owner, 29 Sep 2026): mark left, Projects · Info at the right edge — the
   last link has no right padding, so its word ends on the 8px edge line (a negative margin made
   the page scroll sideways) */
.site-header.hdr-v2{grid-template-columns:1fr auto}
.site-header.hdr-v2 .site-nav{grid-row:1;grid-column:2;justify-self:end;margin:0}
.site-header.hdr-v2 .site-nav a:last-child{padding-right:0}
.site-header.hdr-v2 .header-tools{display:none}   /* no published page has one any more (only the archived Evelpidon page) */
.site-header.hdr-v2 .hdr-name{grid-row:1;grid-column:2 / -1}
.site-header.hdr-v2 .hdr-name{--name-size:24px;justify-self:end;align-self:center;color:#fff;line-height:1;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
/* letters from the studio's own lettering (brand/name.png as a mask, like home's .hero-name):
   same size as the Poppins text was (.72em cap height), white under the header's blend */
.site-header.hdr-v2 .hdr-name{font-size:var(--name-size);display:block;height:1em;width:calc(.72em * 1807 / 128);overflow:hidden;color:transparent;background:#fff;
  -webkit-mask:url("../img/brand/name.png") center / auto .72em no-repeat;mask:url("../img/brand/name.png") center / auto .72em no-repeat}
.site-header.hdr-v2.is-tucked .hdr-name{opacity:1;visibility:visible;pointer-events:auto}
/* peek (header.js): hovering the tucked name swaps in Projects · Info until the cursor moves away */
.site-header.hdr-v2.is-tucked.peek .hdr-name{opacity:0;visibility:hidden}
.site-header.hdr-v2.is-tucked.peek .site-nav{opacity:1;visibility:visible;pointer-events:auto}
@media (max-width:767px){
  /* phones: one row now (mark left, nav + toggle right); sticky, and the bar is 92px as on desktop */
  .site-header.hdr-v2{position:sticky;height:92px;padding-bottom:0}
  .site-header.hdr-v2 .brand{--mark-w:66px} /* 51px + 30% */
  .site-header.hdr-v2 .hdr-name{--name-size:18px}
}
@media (prefers-reduced-motion:reduce){ .site-header.hdr-v2 .site-nav,.site-header.hdr-v2 .header-tools,.site-header.hdr-v2 .hdr-name{transition:none} }

/* right side of the header: theme toggle + project-list button (the list button is desktop only) */
.header-tools{justify-self:end;display:flex;align-items:center;gap:2px;margin-right:-8px}
.site-header .theme-toggle,.menu-toggle{border:0;background:none;padding:0;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.site-header .theme-toggle svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:opacity .2s}
.menu-toggle svg{grid-area:1/1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;transition:opacity .2s}
.site-header .theme-toggle:hover svg,.menu-toggle:hover svg{stroke-width:2.2}
.menu-toggle .ic-close{opacity:0}
.menu-open .menu-toggle .ic-list{opacity:0}
.menu-open .menu-toggle .ic-close{opacity:1}
@media (max-width:767px){ .menu-toggle{display:none} }
@media (max-width:767px){
  .site-header{position:relative;height:auto;grid-template-columns:1fr auto;row-gap:14px;padding-top:18px;padding-bottom:14px}
  .site-header .brand{--mark-w:44px}
  .site-nav{grid-row:2;grid-column:1/-1;justify-self:start;margin-left:-12px}
  .site-nav a{font-size:14px;padding:4px 12px}
}

/* ---------- footer (`.foot`, after studioboom.it; owner, 28 Sep 2026) ----------
   A wide white gap, then three groups on three equal columns (on the projects page these are the
   image grid's columns): contact label | value table · studio address · links, right-aligned.
   Small, dark, tight; no hairline. Narrower than 1100px the address moves up onto its own line,
   with contact left and links right below it; below 420px the address and links share the top
   row and the contact table takes the bottom row.
   The older `.site-footer` below is still used by the archived Evelpidon page (and about/contact). */
.foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 8px;align-items:end;
  margin-top:clamp(160px,36vh,380px);padding-bottom:calc(14px + env(safe-area-inset-bottom));
  font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--ink)}
.foot a{text-decoration:none}
.foot a:hover,.foot a:focus-visible,.foot a[aria-current]{color:var(--coral)}
.foot-reach{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 clamp(24px,5vw,72px);margin:0}
.foot-reach dd{margin:0;overflow-wrap:anywhere}
.foot-addr{font-style:normal;display:flex;flex-direction:column}
.foot-links{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
/* narrower windows (as on studioboom.it): the address moves up on its own line, contact stays
   left and the links right on the line below — before the contact table gets squeezed */
/* The contact table keeps its natural width and the links take the rest (never less than
   their own width, 24px apart), so a long value only wraps when it would touch the links. */
@media (max-width:1099px){
  .foot{grid-template-columns:minmax(0,max-content) minmax(max-content,1fr);grid-template-areas:"addr ." "reach links";gap:clamp(28px,5vh,48px) 24px}
  .foot-links{white-space:nowrap}
  .foot-addr{grid-area:addr}
  .foot-reach{grid-area:reach}
  .foot-links{grid-area:links}
}
@media (max-width:599px){ .foot{margin-top:clamp(120px,24vh,220px)} }
/* phones (owner): address top-left with the links right beside it (right-aligned), and the
   contact table on its own full-width row at the bottom-left */
@media (max-width:419px){
  .foot{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"addr links" "reach reach";gap:22px 16px}
}

/* "Presentations" in the footer is a button that looks like the other footer links */
.foot-links button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:right}
.foot-links button:hover,.foot-links button:focus-visible{color:var(--coral)}
@media (max-width:419px){ .foot-links button{text-align:inherit} }
/* the small window where a client types their presentation code (assets/js/present.js) */
.present-dialog{border:0;padding:28px 28px 20px;width:min(360px,calc(100vw - 32px));background:var(--bg);color:var(--ink);box-shadow:0 20px 60px var(--shadow);font-family:var(--mono);font-size:12px}
.present-dialog::backdrop{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.present-dialog label{display:block;color:var(--ink-2);margin-bottom:10px}
.present-dialog input{display:block;width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;padding:4px 0 6px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.present-dialog input:focus{border-bottom-color:var(--coral)}
.present-msg{min-height:1.4em;margin:10px 0 0;color:var(--coral)}
.site-footer{display:flex;justify-content:space-between;align-items:baseline;gap:18px 32px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;padding-bottom:calc(32px + env(safe-area-inset-bottom));font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.site-footer nav{display:flex;gap:10px 22px;flex-wrap:wrap}
.site-footer a{text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--coral)}

/* ---------- project list (the home "burger" index; also opened from the header on content pages) ----------
   Home: index.html + home.js. Content pages: built by assets/js/menu.js as `.index.is-menu`, which
   opens below the 92px sticky header so the header's list/close button stays visible. */
.index{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding:118px 2.4vw 90px;opacity:0;transition:opacity .35s ease}
.index.open{opacity:1}
.index.is-menu{top:92px;z-index:29;padding:28px var(--gutter) 80px}
/* lock page scroll on <html> only: overflow on <body> would make it the sticky header's scroll box */
html.menu-open{overflow:hidden}
.index-inner{max-width:1500px;margin:0 auto}
.index-head,.index-list a{display:grid;grid-template-columns:2.2fr 1.6fr 1.3fr .5fr 1.3fr;gap:20px;align-items:baseline}
.index-head{font-family:var(--mono);font-size:12px;color:var(--ink-2);padding:0 0 12px}
.index-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.index-list li{border-top:1px solid var(--line)}
.index-list a{text-decoration:none;color:var(--ink);padding:20px 0 18px;transition:color .2s,padding .3s}
.index-list .nm{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.6vw,40px);letter-spacing:.03em;line-height:1.1}
.index-list .nm small{font-family:var(--mono);font-size:12px;color:var(--coral);letter-spacing:0;margin-left:10px;vertical-align:middle}
.index-list .m{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.index-list a:hover,.index-list a:focus-visible,.index-list a[aria-current]{color:var(--coral);padding-left:14px}
.index-list a:hover .m{color:var(--ink)}
.index-all{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--ink-2);text-decoration:none}
.index-all:hover,.index-all:focus-visible{color:var(--coral)}
.index-preview{position:fixed;left:0;top:0;width:min(300px,24vw);aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .25s,transform .25s;z-index:41;box-shadow:0 20px 50px var(--shadow)}
.index-preview.on{opacity:1;transform:translateY(-50%) scale(1)}
@media (max-width:760px){
  .index{padding-top:90px}
  .index-head{display:none}
  .index-list a{grid-template-columns:1fr auto;gap:4px 16px}
  .index-list .m.t,.index-list .m.s{display:none}
  .index-list .m.l{grid-column:1}
  .index-list .m.y{grid-row:1;grid-column:2}
  .index-preview{display:none}
}
@media (prefers-reduced-motion:reduce){ .index,.index-list a,.index-preview{transition:none} }

/* Scroll reveal: only when JS runs (theme.js sets html.js), so content never stays hidden. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} }

/* ---------- no printing / Save as PDF (owner, 29 Sep 2026): the printed page is empty ---------- */
@media print{ html{display:none!important} }
/* images can't be dragged out or long-pressed to save (right-click is blocked in JS) */
img{-webkit-user-drag:none;-webkit-touch-callout:none}