/* Zanio: shared tokens, layout and components for every page.
   Art direction: a web developer's desk. Ink-blue text instead of black, warm paper, the logo's coral,
   and four soft secondary colours borrowed from code syntax highlighting. One typeface made for code
   (Recursive), with its handwritten "casual" style for the one word that matters in a title.
   Theme: light by default, dark when the device prefers it; the toggle (a plain checkbox, no script
   needed) flips whichever theme is currently shown. */

/* Recursive, served by this site rather than a font service, so no visitor data leaves it
   (SIL Open Font License, see fonts/OFL.txt). The extended Latin file only loads for characters
   outside French and English. */
@font-face {
  font-family: "Recursive"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/recursive-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Recursive"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/recursive-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F7F4EF;
  --card: #FFFFFF;
  --ink: #1F2945;
  --muted: #586079;
  --line: #E4DED3;
  --night: #1F2945;
  --on-night: #F4EFE7;
  --on-night-muted: #AEB4C8;
  --coral: #FF5A3C;
  --coral-ink: #C63A22;
  --coral-big: #E4472B;
  --blue: #436BC6;   /* the four accents are dark enough on the paper for small text (4.5:1) */
  --green: #307B60;
  --violet: #795CC1;
  --amber: #936522;
  --tint-blue: #E3E9F7;
  --tint-green: #DFEEE7;
  --tint-violet: #ECE6F7;
  --tint-amber: #F6EAD5;
  --dock: #1F2945;
  --dock-text: #F4EFE7;
  --dock-muted: #A9B0C6;
  --dock-hover: rgba(244, 239, 231, .1);
  --thumb: rgba(31, 41, 69, .24);
  --sel: #DCD3F6;   /* lavender: a pastel that stands apart from the coral */
  --sel-text: #1F2945;
  --when-light: block;
  --when-dark: none;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(:has(#tt:checked)) {
    --bg: #131A2B;
    --card: #1A2338;
    --ink: #ECE7DF;
    --muted: #A3AAC0;
    --line: #273049;
    --night: #222C47;
    --coral: #FF6A4D;
    --coral-ink: #FF8A70;
    --coral-big: #FF7A5E;
    --blue: #7C9BE6;
    --green: #5DBB98;
    --violet: #A58BE8;
    --amber: #E3AA55;
    --tint-blue: #1E2A47;
    --tint-green: #1A3330;
    --tint-violet: #2A2545;
    --tint-amber: #33291A;
    --dock: #ECE7DF;
    --dock-text: #1F2945;
    --dock-muted: #5D6580;
    --dock-hover: rgba(31, 41, 69, .08);
    --thumb: rgba(236, 231, 223, .22);
    --sel: #653637;
    --sel-text: #ECE7DF;
    --when-light: none;
    --when-dark: block;
    color-scheme: dark;
  }
}
@media not (prefers-color-scheme: dark) {
  :root:has(#tt:checked) {
    --bg: #131A2B;
    --card: #1A2338;
    --ink: #ECE7DF;
    --muted: #A3AAC0;
    --line: #273049;
    --night: #222C47;
    --coral: #FF6A4D;
    --coral-ink: #FF8A70;
    --coral-big: #FF7A5E;
    --blue: #7C9BE6;
    --green: #5DBB98;
    --violet: #A58BE8;
    --amber: #E3AA55;
    --tint-blue: #1E2A47;
    --tint-green: #1A3330;
    --tint-violet: #2A2545;
    --tint-amber: #33291A;
    --dock: #ECE7DF;
    --dock-text: #1F2945;
    --dock-muted: #5D6580;
    --dock-hover: rgba(31, 41, 69, .08);
    --thumb: rgba(236, 231, 223, .22);
    --sel: #653637;
    --sel-text: #ECE7DF;
    --when-light: none;
    --when-dark: block;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* whatever the keyboard or a link brings into view stays above the floating menu */
html { scroll-padding-bottom: 112px; }

/* a slim scrollbar in the page's colours; the thumb turns coral under the pointer */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--thumb); background-clip: padding-box; border: 3px solid transparent; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--coral); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
}

body {
  margin: 0;
  padding-bottom: 112px; /* room for the floating menu */
  background: var(--bg);
  color: var(--ink);
  font-family: "Recursive", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "CASL" 0, "MONO" 0;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
body { cursor: default; }
a, button, label, summary, [role="button"] { cursor: pointer; }
a { color: inherit; }
/* selected text: a plain pastel in the theme's own colours instead of the browser's blue
   (lavender on the light paper, deep coral on the dark one) */
::selection { background: var(--sel); color: var(--sel-text); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.035em; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 520px) { .wrap { padding: 0 20px; } }

/* the word that matters in a title, written in the typeface's handwritten style and slanted by hand
   (the slant is a transform: a font file with its own slant axis would weigh twice as much) */
.hand { display: inline-block; transform: skewX(-9deg); font-variation-settings: "CASL" 1; font-weight: 640; color: var(--coral-big); letter-spacing: -.02em; white-space: nowrap; }
.nobr { white-space: nowrap; } /* keeps a handwritten word and the punctuation after it on one line */
/* small captions in the typeface's monospaced style */
.mono { font-variation-settings: "MONO" 1, "CASL" 0; font-size: 13.5px; letter-spacing: 0; }
.label { color: var(--muted); }
.num { color: var(--coral-ink); }
.zd { fill: var(--coral); }

/* ---------- top: just the name ---------- */
.top { padding-top: 34px; }
.top a { display: inline-block; }
.top .word { width: 104px; height: auto; display: block; color: var(--ink); overflow: visible; }

/* the lettering writes itself once, on the home page */
.word.draw .s { animation: draw .9s cubic-bezier(.65, 0, .35, 1) both; }
.word.draw .s:nth-of-type(2) { animation-delay: .12s; }
.word.draw .s:nth-of-type(3) { animation-delay: .22s; }
.word.draw .s:nth-of-type(4) { animation-delay: .32s; }
.word.draw .s:nth-of-type(5) { animation-delay: .44s; }
.word.draw .s:nth-of-type(6) { animation-delay: .54s; }
.word.draw .dot { transform-origin: 205.5px -15.5px; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.05s both; }
/* the dash pattern is dropped on the last frame, so closed shapes (a, o) end without a seam */
@keyframes draw {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; }
  99% { stroke-dasharray: 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- the floating menu at the bottom, always within reach ---------- */
.dock {
  position: fixed; left: 50%; bottom: 20px; z-index: 50; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: var(--dock); color: var(--dock-text); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(244, 239, 231, .14), 0 18px 40px -16px rgba(20, 26, 46, .55);
  transition: background-color .3s ease, color .3s ease;
}
.dock > a, .dock .gear {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 14px;
  background: transparent; text-decoration: none; color: var(--dock-muted); font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s;
}
.dock > a:hover, .dock .gear:hover, .settings.open .gear { color: var(--dock-text); background: var(--dock-hover); }
.dock > a[aria-current="page"] { color: var(--dock-text); }
.dock .here { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); view-transition-name: dock-here; }
.dock .logo { padding: 0 6px; }
.dock .logo svg { width: 32px; height: 32px; display: block; }
.dock .logo .t { fill: var(--dock-text); }
.dock .logo .z { stroke: var(--dock); }
.dock .sep { width: 1px; height: 22px; background: var(--dock-muted); opacity: .35; margin: 0 4px; }
@media (max-width: 520px) {
  .dock { bottom: 12px; gap: 0; }
  .dock > a, .dock .gear { padding: 0 11px; font-size: 14.5px; }
  .dock .sep { display: none; }
}
/* the smallest phones (320 px): the whole menu still fits on screen */
@media (max-width: 374px) {
  .dock { padding: 4px; }
  .dock > a, .dock .gear { padding: 0 8px; font-size: 14px; }
  .dock .logo { padding: 0 4px; }
  .dock > a[aria-current="page"] { gap: 6px; }
}

/* settings: a gear in the menu; hovering it (or tapping it) unfolds two small buttons right above it,
   the theme to switch to (moon or sun) and the other language (EN or FR) */
.settings { position: relative; }
.dock .gear { padding: 0 13px; }
.gear svg { width: 19px; height: 19px; transition: transform .7s var(--ease); }
.settings.open .gear svg { transform: rotate(60deg); }
.prefs { position: absolute; left: 50%; bottom: calc(100% + 12px); display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.prefs::after { content: ""; position: absolute; left: -6px; right: -6px; top: 100%; height: 18px; } /* hover bridge to the gear */
.prefs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--dock); color: var(--dock-text); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .03em; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(244, 239, 231, .14), 0 12px 28px -12px rgba(20, 26, 46, .55);
  opacity: 0; transform: translateY(12px) scale(.86);
  /* closing waits a moment, so the pointer can travel from the gear to the buttons */
  transition: opacity .16s ease .1s, transform .25s var(--ease) .1s, background-image .2s;
}
.pick:hover { background-image: linear-gradient(var(--dock-hover), var(--dock-hover)); }
.pick svg { width: 18px; height: 18px; }
.pick .when-light { display: var(--when-light); }
.pick .when-dark { display: var(--when-dark); }
.prefs:has(input:focus-visible) .theme-pick { outline: 2px solid var(--coral); outline-offset: 2px; }
.settings.open .prefs, .settings:has(:focus-visible) .prefs { pointer-events: auto; }
.settings.open .pick, .settings:has(:focus-visible) .pick { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s var(--ease), background-image .2s; }
/* the theme button, nearest the gear, comes out first; the language button just after */
.settings.open .lang-pick, .settings:has(:focus-visible) .lang-pick { transition-delay: .06s; }
/* hover only where there is a real pointer: on touch screens a tap would leave it stuck open */
@media (hover: hover) {
  .settings:hover .gear svg { transform: rotate(60deg); }
  .settings:hover .prefs { pointer-events: auto; }
  .settings:hover .pick { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s var(--ease), background-image .2s; }
  .settings:hover .lang-pick { transition-delay: .06s; }
}

/* ---------- headings ---------- */
.head { padding-top: clamp(56px, 10vh, 104px); }
.head h1 { margin-top: 18px; font-size: clamp(44px, 6.6vw, 84px); line-height: 1.02; max-width: 12em; }
.sec { padding-top: clamp(96px, 14vh, 150px); }
.sec-head h2 { margin-top: 12px; font-size: clamp(32px, 4vw, 50px); line-height: 1.06; max-width: 16em; }
.sec-head p { margin-top: 14px; color: var(--muted); max-width: 36em; }
@media (max-width: 374px) { .head h1 { font-size: 38px; } } /* the handwritten word never wraps, so it must fit */

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px;
  text-decoration: none; font-weight: 600; font-size: 16px; background: var(--coral);
  color: #1F2945; /* ink on coral reads at 4.6:1 (white would be 3.1:1), in both themes */
  box-shadow: 0 10px 24px -12px rgba(228, 71, 43, .7); transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(228, 71, 43, .75); }
.go { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; color: var(--ink); }
.go .arr { color: var(--coral-ink); transition: transform .3s var(--ease); }
.go:hover .arr { transform: translateX(5px); }

/* ---------- screens: a simple browser window, or a phone ---------- */
.win { display: block; border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 24px 48px -26px rgba(20, 26, 46, .55), 0 0 0 1px rgba(20, 26, 46, .06); }
.win .bar { display: flex; gap: 6px; align-items: center; height: 24px; padding: 0 10px; background: #F4EFE7; }
.win .bar i { width: 8px; height: 8px; border-radius: 50%; background: #E4DED3; }
.win .bar i:nth-child(1) { background: #FF5A3C; }
.win .bar i:nth-child(2) { background: #E3AA55; }
.win .bar i:nth-child(3) { background: #5DBB98; }
.win img { width: 100%; height: auto; }
.phone { display: block; border-radius: 24px; overflow: hidden; border: 5px solid #121729; background: #121729; box-shadow: 0 24px 48px -24px rgba(20, 26, 46, .6); }
.phone img { width: 100%; height: auto; border-radius: 19px; }

/* ---------- contact block ---------- */
.reach { background: var(--night); color: var(--on-night); border-radius: 28px; padding: clamp(36px, 6vw, 76px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; transition: background-color .3s ease; }
.reach .label { color: var(--on-night-muted); }
.reach h2 { margin-top: 12px; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; }
.reach h2 .hand { color: #FF7A5E; }
.reach p { margin-top: 14px; color: var(--on-night-muted); max-width: 30em; }
.reach .mail { margin-top: 16px; display: block; color: var(--on-night-muted); font-size: 15px; }
@media (max-width: 860px) { .reach { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer a { text-decoration: none; display: inline-block; padding: 6px 0; margin: -6px 0; } /* a finger-sized target that moves nothing */
footer a:hover { color: var(--ink); }

/* ---------- changing page: the page fades out, the next one rises in; the name and the menu stay put,
   and the coral dot glides to the new page's link. Browsers without cross-page transitions just change page. ---------- */
@view-transition { navigation: auto; }
.top { view-transition-name: site-top; }
.dock { view-transition-name: site-dock; }
::view-transition-old(root) { animation: page-out .18s ease both; }
::view-transition-new(root) { animation: page-in .4s var(--ease) both; }
::view-transition-group(dock-here) { animation-duration: .4s; animation-timing-function: var(--ease); }
::view-transition-group(site-dock), ::view-transition-group(site-top) { animation-duration: .3s; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- gentle reveal on scroll (only when the script runs) ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- dialogs: contact panel and image viewer ---------- */
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(19, 26, 43, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.panel { position: relative; width: min(470px, calc(100vw - 32px)); background: var(--bg); border-radius: 22px; padding: 30px 28px 26px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); }
.panel h2 { font-size: 30px; line-height: 1.1; padding-right: 40px; }
.panel p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.panel .addr { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.panel .addr span { font-variation-settings: "MONO" 1; font-size: 15.5px; word-break: break-all; cursor: text; user-select: all; } /* one click selects the whole address */
.panel .copy { flex: none; cursor: pointer; border: 0; border-radius: 10px; padding: 9px 14px; background: var(--night); color: var(--on-night); font: inherit; font-size: 14px; font-weight: 600; }
.panel .opens { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.panel .opens a { text-decoration: none; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; transition: border-color .2s; }
.panel .opens a:hover { border-color: var(--coral); }
/* low screens (a phone held sideways): the panel tightens, and scrolls rather than being cut off */
dialog:has(.panel) { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
@media (max-height: 460px) {
  .panel { padding: 20px 22px 18px; }
  .panel h2 { font-size: 24px; }
  .panel p { margin-top: 6px; font-size: 15px; }
  .panel .addr { margin-top: 14px; }
}
.panel-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center; }

/* viewer controls carry their own vw- names so page styles never reach them */
/* fixed to the visible window, like the buttons, so the page scrollbar never shifts one against the other */
.vw { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
/* the image keeps clear of the controls: arrows in the side margins, close button and counter above and below */
.vw-img {
  max-width: calc(100% - 164px); max-height: calc(100% - 144px);
  width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.vw-btn {
  position: fixed; z-index: 1; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12); color: #FFFFFF; font: 22px/1 system-ui, sans-serif; cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s;
}
.vw-btn:hover { background: rgba(255, 255, 255, .22); }
.vw-btn svg, .panel-close svg { display: block; }
.vw-close { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 20px; }
.vw-prev, .vw-next { top: 50%; transform: translateY(-50%); }
.vw-prev { left: 18px; }
.vw-next { right: 18px; }
.vw-count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 13px; }
.vw [hidden] { display: none; }
/* phones: no room at the sides, so the arrows join the counter under the image */
@media (max-width: 640px) {
  .vw-img { max-width: calc(100% - 32px); max-height: calc(100% - 152px); }
  .vw-prev, .vw-next { top: auto; bottom: 14px; transform: none; }
  .vw-prev { left: calc(50% - 98px); }
  .vw-next { right: calc(50% - 98px); }
  .vw-count { bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  body, .dock { transition: none; }
  .word.draw .s, .word.draw .dot { animation: none; }
  .js .rv, .js .rv.in { opacity: 1; transform: none; transition: none; }
  .btn, .go .arr { transition: none; }
}