/* cedricgerber.ch: page layout on top of the design system. Tokens only, no hex values. */

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--turquoise-ink); }

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: var(--space-4); }
@media (min-width: 768px) {
  .wrap { padding-inline: var(--space-8); }
  .cg-header { padding-inline: var(--space-8); }
}


.section { padding-block: var(--space-12); display: grid; gap: var(--space-6); }
.stack { display: grid; gap: var(--space-4); }
.stack > * { margin: 0; }
.prose { max-width: 65ch; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--space-4); }
ul.prose { padding-left: var(--space-6); }
ul.prose > li + li { margin-top: var(--space-2); }
.muted { color: var(--ink-muted); }
.eyebrow { color: var(--turquoise-ink); margin: 0; }
.eyebrow--atelier { color: var(--ardoise); }
.eyebrow--terrain { color: var(--alpage); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* display-xl is 56px; scale it down on phones so one hero line stays readable. */
.display-xl { font-size: clamp(36px, 8vw, 56px); line-height: 1; margin: 0; }
.display { font-size: clamp(30px, 6vw, 40px); line-height: 1.1; }

/* Hero: text and a photo side by side from 768px up. */
.hero { display: grid; gap: var(--space-8); align-items: center; padding-block: var(--space-12); }
@media (min-width: 768px) { .hero { grid-template-columns: 1.2fr 1fr; } }
.hero img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
/* Van page: the two decal designs side by side in the hero. */
.van-decors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.van-decors figure { margin: 0; display: grid; gap: var(--space-2); }
.van-decors figcaption { font-size: 14px; line-height: 20px; color: var(--ink-muted, inherit); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-6); }

/* A dated list: roles, education. */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.timeline li { display: grid; gap: var(--space-1) var(--space-6); }
@media (min-width: 768px) { .timeline li { grid-template-columns: 13rem 1fr; } }
.timeline .data { color: var(--ink-muted); }
.timeline p { margin: 0; }

/* Notice: a calm "coming soon" block. */
.notice { padding: var(--space-6); background: var(--turquoise-soft); color: var(--ink); border-radius: var(--radius-md); max-width: 65ch; }
.notice > * { margin: 0; }
.notice > * + * { margin-top: var(--space-3); }

.email { font: 700 clamp(20px, 5vw, 28px)/1.3 var(--font-display); font-stretch: 110%; overflow-wrap: anywhere; }

.site-footer { background: var(--surface-sunk); border-top: 1px solid var(--line); padding-block: var(--space-6); color: var(--ink-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--ink); }

/* Atelier topics: prose on the left, facts as chips on the right from 768px up. */
.topic { display: grid; gap: var(--space-4) var(--space-8); padding-block: var(--space-8); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .topic { grid-template-columns: minmax(0, 65ch) 1fr; } }
.topic__facts { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-2); }
@media (min-width: 768px) { .topic__facts { padding-top: var(--space-12); } }

/* Loop diagram: inputs -> agent <-> tools, report below. One column on phones, arrows turn down. */
.loop { margin: 0 0 var(--space-8); padding: var(--space-6); background: var(--surface-sunk); border-radius: var(--radius-md); display: grid; gap: var(--space-3); justify-items: stretch; }
.loop__col { display: grid; gap: var(--space-3); }
.loop__node { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.loop__node strong { font: 700 16px/22px var(--font-display); font-stretch: 110%; }
.loop__node span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.loop__node--agent { background: var(--ardoise-soft); border-color: var(--ardoise); color: var(--ardoise); align-self: center; }
.loop__node--agent span { color: var(--ardoise); }
.loop__arrow { justify-self: center; color: var(--line-strong); font: 500 24px/1 var(--font-mono); transform: rotate(90deg); }
.loop__arrow--down { transform: none; }
.loop figcaption { margin-top: var(--space-2); max-width: 65ch; }
@media (min-width: 768px) {
  .loop { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; column-gap: var(--space-4); }
  .loop__arrow { transform: none; }
  .loop__arrow--down { grid-column: 3; }
  .loop__node--out { grid-column: 3; }
  .loop figcaption { grid-column: 1 / -1; }
}

/* Tandem story: prose with the in-flight selfie beside it from 768px up. */
.story { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 768px) { .story { grid-template-columns: minmax(0, 65ch) minmax(14rem, 22rem); justify-content: space-between; } }
.story__photo { border-radius: var(--radius-md); width: 100%; max-height: 36rem; object-fit: cover; }
@media (min-width: 768px) { .story__photo { position: sticky; top: calc(var(--space-16) + var(--space-4)); } }

/* Photo gallery: 4:3 crops, the panorama across the full width. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--space-6) var(--space-4); }
.gallery figure { margin: 0; display: grid; gap: var(--space-2); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.gallery .gallery__wide { grid-column: 1 / -1; }
.gallery .gallery__wide img { aspect-ratio: 1600 / 614; }
.gallery figcaption { margin: 0; }
.story + .stack { margin-top: var(--space-12); }

/* Videos: YouTube thumbnails, stored locally, linking out (no embed, no third-party request). */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-6) var(--space-4); }
.video { display: grid; gap: var(--space-1); align-content: start; color: var(--ink); text-decoration: none; }
.video__thumb { position: relative; display: block; margin-bottom: var(--space-2); }
.video__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); }
.video__play { position: absolute; inset: 0; margin: auto; }
.video__play circle { fill: var(--ink); opacity: 0.72; transition: opacity 200ms ease-out; }
.video__play path { fill: var(--surface); }
.video:hover .video__play circle { opacity: 0.9; }
.video:hover .heading { color: var(--turquoise-ink); }
.video:focus-visible { outline: 2px solid var(--turquoise-ink); outline-offset: 2px; border-radius: var(--radius-md); }
.videos-section { margin-top: var(--space-12); }
@media (prefers-reduced-motion: reduce) { .video__play circle { transition: none; } }

/* La Dôle mark in the header: the paraglider wing is filled, not stroked */
.cg-brand svg .cg-wing { fill: var(--turquoise); stroke: none; }


/* La Dôle panorama (in dark mode: near plane darkest, far plane lightest): drawn twice from one inline <symbol> (#pano-art), coloured through --pano-* */
.pano { display: block; width: 100%; height: auto; aspect-ratio: 3000 / 790; overflow: visible; }
.masthead, .skyline {
  --pano-near: var(--ink); --pano-far: color-mix(in srgb, var(--ink) 72%, var(--surface));
  --pano-face: color-mix(in srgb, var(--ink) 55%, var(--surface)); --pano-snow: var(--surface-raised);
  --pano-wing: var(--turquoise); --pano-horizon: var(--line-strong);
}
/* Header: the sky fades to turquoise, the panorama stands on the header's bottom edge. */
.cg-header { background: linear-gradient(var(--surface-raised), var(--turquoise-soft)); border-bottom: 0; padding-bottom: 0; }
.masthead { flex: 0 0 100%; --pano-horizon: transparent; }   /* always its own row, even on very wide screens */
.masthead .pano { max-width: 52rem; margin: 0 auto; }
/* Footer: small mountains in the footer's colour, rising out of it. */
.skyline {
  width: min(22rem, 100% - 2 * var(--space-4)); margin: var(--space-12) auto -1px; overflow-x: clip;
  --pano-near: var(--surface-sunk); --pano-far: color-mix(in srgb, var(--line) 70%, var(--surface));
  --pano-face: color-mix(in srgb, var(--line-strong) 45%, var(--surface-sunk)); --pano-horizon: var(--surface-sunk);
}
.skyline + .site-footer { border-top: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .masthead { --pano-near: var(--surface-sunk); --pano-far: color-mix(in srgb, var(--line-strong) 28%, var(--surface)); --pano-face: color-mix(in srgb, var(--line-strong) 80%, var(--surface)); --pano-snow: var(--ink); } :root:not([data-theme="light"]) .skyline { --pano-near: var(--surface-sunk); --pano-far: color-mix(in srgb, var(--surface-sunk) 50%, var(--surface-raised)); --pano-face: var(--line); --pano-snow: color-mix(in srgb, var(--ink) 70%, var(--surface)); } }
:root[data-theme="dark"] .masthead { --pano-near: var(--surface-sunk); --pano-far: color-mix(in srgb, var(--line-strong) 28%, var(--surface)); --pano-face: color-mix(in srgb, var(--line-strong) 80%, var(--surface)); --pano-snow: var(--ink); }
:root[data-theme="dark"] .skyline { --pano-near: var(--surface-sunk); --pano-far: color-mix(in srgb, var(--surface-sunk) 50%, var(--surface-raised)); --pano-face: var(--line); --pano-snow: color-mix(in srgb, var(--ink) 70%, var(--surface)); }

/* the van on the van page: a solid grey van on the dark Dôle */
.masthead { --pano-van: var(--line-strong); }

/* Figures table (van page): measured numbers, right-aligned in mono. */
.figures { width: 100%; max-width: 65ch; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.figures caption { caption-side: bottom; text-align: left; padding-top: var(--space-2); }
.figures th, .figures td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.figures thead th { font: 500 12px/16px var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); border-bottom-color: var(--line-strong); }
.figures tbody th { font-weight: 400; }
.figures .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.figures th:first-child, .figures td:first-child { padding-left: 0; }
.figures th:last-child, .figures td:last-child { padding-right: 0; }

/* A dashboard screenshot (atelier page): framed, full width of the text column and a bit more. */
.shot { margin: 0 0 var(--space-8); display: grid; gap: var(--space-2); max-width: 56rem; }
.shot img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); }
.gallery + .topic { margin-top: var(--space-8); }

/* A long page's contents, under its hero, and the subsections and folded details it links to. */
.toc { padding-bottom: var(--space-8); display: grid; gap: var(--space-2); }
.toc > * { margin: 0; }
.toc ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.toc a { text-decoration: none; }
.toc a:hover .cg-chip { border-color: var(--turquoise-ink); color: var(--turquoise-ink); }
.stack > h3 { margin-top: var(--space-4); }
.more { max-width: 65ch; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.more summary { cursor: pointer; font-weight: 600; }
.more > * { margin: 0; }
.more > * + * { margin-top: var(--space-3); }
.more ol { padding-left: var(--space-6); }
.more li + li { margin-top: var(--space-2); }
.gallery--pairs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }

/* Cutting plans drawn in mm: strokes keep their width whatever the scale. */
.plan { margin: 0; display: grid; gap: var(--space-2); max-width: 65ch; }
.plan--panel { max-width: 22rem; }
.plan svg { width: 100%; height: auto; overflow: visible; }
.plan svg * { vector-effect: non-scaling-stroke; }
.plan__cut { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.5; }
.plan__sheet { fill: var(--surface-sunk); stroke: var(--line-strong); stroke-width: 1; }
.plan__piece { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.plan__dim { fill: none; stroke: var(--turquoise-ink); stroke-width: 1.25; }
.plan__ext { stroke: var(--ink-muted); stroke-width: 0.75; }
.plan__grain { fill: none; stroke: var(--ink-muted); stroke-width: 1; }
.plan__txt { fill: var(--turquoise-ink); font: 500 40px var(--font-mono); }
.plan__note { fill: var(--ink-muted); font: 400 34px var(--font-sans); }
.plan--sheet .plan__txt { font-size: 64px; }
.plan--sheet .plan__note { font-size: 58px; }
@media (max-width: 600px) { .plan--sheet .plan__txt { font-size: 96px; } .plan--sheet .plan__note { font-size: 76px; } }