/* The designer design (portfolio-base/designs/designer), direction B "Personal": Young Serif for the voice, Hanken
   Grotesk for everything else, one ground colour per palette, one action colour, and each project on its own colour.
   The parts are those of design-studio/studies/designer-portfolio/directions/b-library.html. The palette is the
   site record's (html[data-palette]); the add-ons' CSS comes after this file and reads --ground, --ink, --accent… */

:root, [data-palette="peacock"] { --ground: #0f4a50; --text: #f4ecdc; --soft: #a9c3c1; --act: #f2a93b; --act-text: #1d1206; --line: rgb(244 236 220 / .16); --raise: rgb(255 255 255 / .06); --bad: #ffb4a2; }
[data-palette="plum"]     { --ground: #3b2140; --text: #f6eadf; --soft: #c8adc3; --act: #ff9f7a; --act-text: #2a0f12; --line: rgb(246 234 223 / .16); --raise: rgb(255 255 255 / .06); --bad: #ffb4a2; }
[data-palette="midnight"] { --ground: #172036; --text: #efe9de; --soft: #a3abc0; --act: #ffcf4a; --act-text: #1c1600; --line: rgb(239 233 222 / .15); --raise: rgb(255 255 255 / .06); --bad: #ffb4a2; }
[data-palette="white"]    { --ground: #fbf9f4; --text: #1c1a17; --soft: #6f6a62; --act: #e8552f; --act-text: #fff; --line: rgb(28 26 23 / .13); --raise: rgb(28 26 23 / .04); --bad: #b3261e; }
:root {
  --pad: clamp(20px, 3.6vw, 52px); --gap: clamp(14px, 1.5vw, 20px); --r: 22px; --max: 1440px;
  --serif: "Young Serif", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif;
  /* for the add-ons' CSS (contact form, blog) */
  --ink: var(--text); --paper: var(--ground); --cream: var(--text); --accent: var(--act); --muted: var(--soft); --ink-2: var(--soft);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 16px/1.55 var(--sans); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 99; padding: 10px 16px; border-radius: 99px; background: var(--act); color: var(--act-text); }
.skip:focus { left: 16px; }
.draft { padding: 10px var(--pad); background: var(--act); color: var(--act-text); font-weight: 600; text-align: center; }
.soft { color: var(--soft); }
.u { text-decoration: underline; text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--act); color: var(--act-text); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pill:hover { filter: brightness(1.06); }
.pill--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px currentColor; }
.pill--line:hover { background: var(--raise); filter: none; }
.h2 { font: 400 clamp(30px, 3.4vw, 50px)/1.05 var(--serif); letter-spacing: -.02em; }
.sec { padding-block: clamp(56px, 7vw, 104px) 0; }
.sec--tight { padding-block-start: clamp(40px, 5vw, 72px); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: end; margin-bottom: clamp(26px, 3vw, 40px); }
.head p { color: var(--soft); max-width: 28em; }

/* ── the top bar, and the phone menu in the big serif ── */
.top { display: flex; align-items: center; gap: 26px; padding-block: 18px; }
.top__name { font-weight: 500; text-decoration: none; }
.top__nav { display: flex; gap: 24px; margin-left: auto; }
.top__nav a { color: var(--soft); text-decoration: none; } .top__nav a:hover { color: var(--text); }
.top > .pill { padding: 10px 16px; }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before { display: block; width: 18px; height: 1.5px; background: currentColor; box-shadow: 0 -5px 0 currentColor; }
.menu summary span::before { content: ""; transform: translateY(10px); box-shadow: none; }
.menu[open] summary span { box-shadow: none; transform: rotate(45deg); } .menu[open] summary span::before { transform: rotate(-90deg); }
.menu[open] summary { position: relative; z-index: 41; }
.menu__panel { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; padding: 96px var(--pad) 32px; background: var(--ground); }
.menu__panel ul { font: 400 40px/1.3 var(--serif); } .menu__panel ul a { text-decoration: none; }
.menu__panel .pill { margin-top: 28px; justify-content: center; }
.menu__small { margin-top: 18px; color: var(--soft); font-size: 14px; }

/* ── the top of the home page: you first ── */
.hello { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: end; padding-block: clamp(40px, 7vw, 110px) 0; }
.mark { font: 400 clamp(84px, 12.6vw, 196px)/.82 var(--serif); letter-spacing: -.045em; overflow-wrap: anywhere; }
.mark small { display: block; margin-top: .55em; font: 500 16px/1.4 var(--sans); letter-spacing: 0; color: var(--soft); }
.facts { font: 400 clamp(20px, 1.85vw, 27px)/1.3 var(--serif); }
.facts li + li { margin-top: .16em; }
.facts .soft { color: var(--soft); }
.facts a { text-decoration: underline; text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: .14em; }
.me { display: inline-block; width: 1.55em; height: 1.55em; margin-right: .22em; vertical-align: -.42em; border-radius: 50%; object-fit: cover; }
.avail { display: inline-block; margin-top: 22px; padding: 8px 15px; border-radius: 999px; background: var(--raise); font-size: 15px; }
/* … or the work first */
.hello-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; padding-block: clamp(36px, 6vw, 96px) 0; }
.says { font: 400 clamp(28px, 2.8vw, 42px)/1.2 var(--serif); letter-spacing: -.01em; }
.says em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--act) 55%, transparent) 62%); }
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(48px, 4.6vw, 70px); gap: 10px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; grid-column: span 2; grid-row: span 2; }
.mosaic img:first-child { grid-row: span 4; }
.mosaic[data-n="1"] { grid-template-columns: 1fr; grid-auto-rows: auto; } .mosaic[data-n="1"] img { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.mosaic[data-n="2"], .mosaic[data-n="3"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mosaic[data-n="2"] img { grid-row: span 4; }
[data-palette="white"] .mosaic img, [data-palette="white"] .piece, [data-palette="white"] .shots img { outline: 1px solid var(--line); outline-offset: -1px; }

/* ── work: asymmetric cards, each on the project's colour, the screens flat ── */
.work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) var(--gap); }
.w7 { grid-column: span 7; } .w5 { grid-column: span 5; } .w12 { grid-column: 1 / -1; }
.project { display: grid; gap: 14px; align-content: start; text-decoration: none; }
.card { position: relative; display: block; overflow: hidden; height: clamp(340px, 33vw, 500px); border-radius: var(--r); background: var(--c); color: var(--ct); }
.card .t { position: absolute; left: 26px; top: 22px; right: 26px; z-index: 2; display: flex; justify-content: space-between; gap: 16px; font-weight: 500; }
.card .t b { font: 400 30px/1.05 var(--serif); } .card .t span { max-width: 15em; text-align: right; opacity: .8; }
.project:hover .card img { transform: translateY(-8px); }
.art img { position: absolute; border-radius: 18px; box-shadow: 0 30px 50px -28px rgb(0 0 0 / .5); transition: transform .4s ease; }
.art[data-n] img { top: 30%; }
.art[data-n="1"] img { width: 72%; left: 14%; top: 28%; }
.art[data-n="2"] img { width: 34%; } .art[data-n="2"] img:nth-child(1) { left: 9%; top: 34%; } .art[data-n="2"] img:nth-child(2) { left: 50%; top: 24%; }
.art[data-n="3"] img { width: 27%; } .art[data-n="3"] img:nth-child(1) { left: 6%; top: 36%; } .art[data-n="3"] img:nth-child(2) { left: 36.5%; top: 22%; } .art[data-n="3"] img:nth-child(3) { left: 67%; top: 30%; }
.w5 .art[data-n="1"] img, .next__art .art[data-n="1"] img { width: 84%; left: 8%; }
.w5 .art[data-n="2"] img, .next__art .art[data-n="2"] img { width: 44%; } .w5 .art[data-n="2"] img:nth-child(1), .next__art .art[data-n="2"] img:nth-child(1) { left: 4%; } .w5 .art[data-n="2"] img:nth-child(2), .next__art .art[data-n="2"] img:nth-child(2) { left: 52%; }
.w5 .art[data-n="3"] img, .next__art .art[data-n="3"] img { width: 34%; } .w5 .art[data-n="3"] img:nth-child(1), .next__art .art[data-n="3"] img:nth-child(1) { left: -2%; } .w5 .art[data-n="3"] img:nth-child(2), .next__art .art[data-n="3"] img:nth-child(2) { left: 33%; } .w5 .art[data-n="3"] img:nth-child(3), .next__art .art[data-n="3"] img:nth-child(3) { left: 68%; }
.w12 .art[data-n="1"] img, .wide .art[data-n="1"] img { width: 60%; left: 20%; }
.w12 .art[data-n="2"] img, .wide .art[data-n="2"] img { width: 22%; } .w12 .art[data-n="2"] img:nth-child(1), .wide .art[data-n="2"] img:nth-child(1) { left: 24%; } .w12 .art[data-n="2"] img:nth-child(2), .wide .art[data-n="2"] img:nth-child(2) { left: 54%; }
.w12 .art[data-n="3"] img, .wide .art[data-n="3"] img { width: 20%; } .w12 .art[data-n="3"] img:nth-child(1), .wide .art[data-n="3"] img:nth-child(1) { left: 14%; } .w12 .art[data-n="3"] img:nth-child(2), .wide .art[data-n="3"] img:nth-child(2) { left: 40%; } .w12 .art[data-n="3"] img:nth-child(3), .wide .art[data-n="3"] img:nth-child(3) { left: 66%; }
.art--cover img { left: 7%; top: 30%; width: 100%; height: 90%; object-fit: cover; object-position: left top; border-radius: 12px; }
.lock { position: absolute; right: 22px; bottom: 20px; z-index: 2; padding: 6px 12px; border-radius: 99px; background: #16172b; color: #e6e4f4; font-size: 13px; font-weight: 600; }
.result { font-size: 17px; color: var(--soft); } .result b { color: var(--text); font-weight: 600; } .result span { color: var(--soft); }
/* everything else, as a list */
.index li a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) 5rem; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; }
.index li:last-child a { border-bottom: 1px solid var(--line); }
.index .n, .index .k, .index .y { color: var(--soft); } .index .n { font-variant-numeric: tabular-nums; } .index .y { text-align: right; }
.index .t { font: 400 24px/1.2 var(--serif); } .index .t small { margin-left: 6px; font: 600 12px var(--sans); color: var(--soft); }
.index li a:hover .t { text-decoration: underline; text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* ── the gallery: filters, pieces in their own shape ── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filters button { padding: 8px 15px; border: 1.5px solid var(--line); border-radius: 999px; background: none; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--ground); border-color: var(--text); }
.filters button span { margin-left: 5px; opacity: .6; font-size: 13px; }
.masonry { columns: 3 260px; column-gap: var(--gap); }
.masonry figure { break-inside: avoid; margin-bottom: 30px; }
.piece { overflow: hidden; border-radius: 16px; cursor: zoom-in; }
.piece img { width: 100%; }
.masonry figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; }
.masonry figcaption b { font-weight: 600; } .masonry figcaption span { color: var(--soft); text-align: right; }
.piece__result { margin-top: 4px; font-size: 14px; color: var(--soft); } .piece__result b { color: var(--text); }
.toggle { display: inline-flex; margin-top: 10px; padding: 3px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13px; }
.toggle button { padding: 5px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--text); color: var(--ground); }
.print { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; }

/* ── people: names as a sentence, or channels with their pictures ── */
.names { font: 400 clamp(22px, 2.3vw, 34px)/1.5 var(--serif); }
.names > span { white-space: nowrap; }
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px var(--gap); }
.channels li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.channels .av { width: 52px; height: 52px; font-size: 17px; }
.channels b { font-weight: 600; } .channels b a { text-decoration: none; } .channels li span span { display: block; color: var(--soft); font-size: 14px; }
.av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font: 700 14px var(--sans); font-style: normal; color: #fff; }
/* the wall of reviews */
.wallhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 28px; }
.wallhead .filters { margin: 0; }
.wall { columns: 3 280px; column-gap: var(--gap); }
.review { break-inside: avoid; margin-bottom: var(--gap); padding: 22px 22px 20px; border-radius: 18px; background: var(--raise); }
.review blockquote { font: 400 19px/1.4 var(--serif); } .review.big blockquote { font-size: 25px; line-height: 1.28; }
.review footer { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; margin-top: 18px; font-size: 14px; }
.review footer b { display: block; font-weight: 600; } .review footer span span { color: var(--soft); }
.review .on { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--soft); }
.more { margin-top: 10px; }
.long { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.long .pull { font: 400 clamp(30px, 3.2vw, 46px)/1.15 var(--serif); letter-spacing: -.015em; }
.long .pull::before { content: "“"; color: var(--act); }
.long .full { display: grid; gap: 1em; font-size: 18px; line-height: 1.62; color: var(--soft); } .long .full p:first-child { color: var(--text); }
.long .by { margin-top: 18px; font-size: 15px; } .long .by span { color: var(--soft); }

/* ── the offer: packages as a menu, the weeks, the questions ── */
.menu-list > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.menu-list > li:last-child { border-bottom: 1px solid var(--line); }
.menu-list h3 { font: 400 26px/1.1 var(--serif); }
.menu-list__what { font-size: 15px; } .menu-list__what ul { display: grid; gap: 4px; } .menu-list__what li { margin-left: 1.1em; list-style: "– "; } .menu-list__what p { color: var(--soft); }
.price { text-align: right; } .price b { display: block; font: 400 30px/1 var(--serif); }
.price > span { display: block; margin-top: 8px; color: var(--soft); font-size: 14px; }
.price a { display: inline-block; margin-top: 12px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.slots { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: -1px; } .slots i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--act); } .slots i.taken { background: var(--act); }
.note-gst { margin-top: 14px; color: var(--soft); font-size: 14px; }
.chart { display: grid; row-gap: 10px; font-size: 15px; }
.chart__row { display: grid; grid-template-columns: 11rem repeat(var(--weeks), minmax(0, 1fr)); align-items: start; }
.chart .wk { padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--soft); font-size: 13px; }
.chart .task { grid-column: 1; padding-top: 6px; } .chart .task small { display: block; color: var(--soft); font-size: 13px; }
.chart .bar { display: flex; align-items: center; height: 30px; margin-top: 8px; padding: 0 12px; overflow: hidden; border-radius: 99px; background: var(--act); color: var(--act-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chart .bar.soft { background: var(--raise); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font: 400 22px/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--sans); color: var(--soft); } .faq details[open] summary::after { content: "–"; }
.faq details p { max-width: 42em; padding-bottom: 22px; color: var(--soft); font-size: 17px; }

/* ── the person ── */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); }
.about--text { grid-template-columns: minmax(0, 8fr); }
.about .photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.about .photo figcaption { margin-top: 12px; font-size: 14px; color: var(--soft); }
.story { display: grid; gap: 1em; max-width: 34em; margin-top: 22px; font-size: 18px; line-height: 1.62; }
.about .rows { margin-top: 30px; }
.cv { display: inline-block; margin-top: 24px; font-weight: 600; }
.rows li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.rows li span:first-child { color: var(--soft); font-variant-numeric: tabular-nums; } .rows b { font-weight: 600; } .rows .x { color: var(--soft); }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px var(--gap); margin-top: clamp(40px, 5vw, 64px); }
.skills h3 { font: 400 24px var(--serif); } .skills p { margin-top: 6px; color: var(--soft); }
.tools { margin-top: 26px; font-size: 17px; } .tools b { font-weight: 600; } .tools span { color: var(--soft); }
.shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; cursor: zoom-in; }
.shots figcaption { margin-top: 10px; font-size: 14px; color: var(--soft); } .shots figcaption b { color: var(--text); font-weight: 600; }
.notes li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
.notes li:last-child a { border-bottom: 1px solid var(--line); }
.notes .t { font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--serif); } .notes .w { color: var(--soft); font-size: 15px; white-space: nowrap; }
.notes a:hover .t { text-decoration: underline; text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* ── contact: a real question, the email first, the form beside ── */
.contact { padding-bottom: clamp(56px, 7vw, 104px); }
.write { display: grid; gap: clamp(32px, 5vw, 72px); }
.write--form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.write h2 { max-width: 15em; font: 400 clamp(36px, 4.6vw, 68px)/1.04 var(--serif); letter-spacing: -.025em; }
.write--form h2 { font-size: clamp(34px, 3.6vw, 54px); }
.write__note { margin-top: 18px; font-size: 19px; color: var(--soft); }
.ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--soft); } .links a:hover { color: var(--text); }
.clock { margin-top: 18px; color: var(--soft); font-size: 15px; }
/* forms (the contact form, the door): big calm fields */
.form { display: grid; gap: 20px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; } .field > span { font-size: 15px; } .field small { color: var(--soft); font-size: 13px; }
.field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--raise); color: var(--text); outline: none; }
.field select option { background: var(--ground); color: var(--text); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--act); box-shadow: 0 0 0 4px color-mix(in srgb, var(--act) 22%, transparent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--bad); }
.choose { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.choose legend { margin-bottom: 8px; padding: 0; font-size: 15px; }
.choose label { position: relative; }
.choose input { position: absolute; opacity: 0; }
.choose span { display: inline-block; padding: 9px 15px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; }
.choose input:checked + span { background: var(--text); color: var(--ground); border-color: var(--text); }
.choose input:focus-visible + span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--act) 30%, transparent); }
.if-project { display: grid; gap: 20px; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* the add-on's form, in this design (its own style.css comes after this file, hence the extra .write) */
.write .cf { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); box-shadow: none; gap: 20px; }
.write .cf input, .write .cf textarea, .write .cf select { border: 1.5px solid var(--line); border-radius: 14px; background: var(--raise); color: var(--text); padding: 14px 16px; }
.write .cf input:focus, .write .cf textarea:focus, .write .cf select:focus { border-color: var(--act); box-shadow: 0 0 0 4px color-mix(in srgb, var(--act) 22%, transparent); }
.write .cf .choose input { position: absolute; opacity: 0; width: auto; padding: 0; }
.write .cf .go { padding: 13px 22px; }
.write .cf-note { color: var(--soft); font-size: 15px; }
.write .cf[data-done] .cf-note { display: block; width: 100%; padding: 22px 24px; border-radius: var(--r); background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--text); font: 400 22px/1.3 var(--serif); }
.write .cf-sent { background: var(--raise); color: var(--text); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px 30px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }

/* the lightbox */
.lb { max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 56px var(--pad) 24px; border: 0; background: color-mix(in srgb, var(--ground) 94%, black); color: var(--text); }
.lb::backdrop { background: rgb(0 0 0 / .6); }
.lb[open] { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.lb figure { display: grid; place-items: center; min-height: 0; }
.lb img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: 10px; }
.lb figcaption { margin-top: 12px; color: var(--soft); font-size: 14px; text-align: center; }
.lb__close { position: absolute; top: 14px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--raise); cursor: pointer; }
.lb__nav { display: flex; justify-content: center; align-items: center; gap: 18px; }
.lb__nav button { width: 46px; height: 46px; border: 1.5px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
.lb__at { color: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ── a project's page ── */
.cs-head { padding-block: clamp(36px, 6vw, 88px) clamp(28px, 4vw, 48px); }
.crumbs { display: flex; gap: 18px; margin-bottom: 26px; color: var(--soft); font-size: 15px; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--text); }
.cs-head h1 { font: 400 clamp(52px, 7vw, 108px)/.92 var(--serif); letter-spacing: -.035em; }
.cs-head .sum { max-width: 30em; margin-top: 18px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--soft); }
.facts-line { margin-top: 22px; font-size: 16px; } .facts-line b { font-weight: 600; }
.res { display: grid; gap: 8px; max-width: 42em; margin-top: 26px; font: 400 clamp(20px, 1.8vw, 26px)/1.35 var(--serif); }
.res b { font-weight: 400; background: linear-gradient(transparent 64%, color-mix(in srgb, var(--act) 50%, transparent) 64%); }
.wide { position: relative; overflow: hidden; height: clamp(300px, 36vw, 560px); border-radius: var(--r); background: var(--c); }
.wide .art[data-n] img { top: 14%; } .wide .art[data-n] img:nth-child(2) { top: 7%; } .wide .art[data-n] img:nth-child(3) { top: 20%; }
.gate { margin-top: clamp(32px, 4vw, 56px); padding: clamp(40px, 6vw, 88px) 24px; border-radius: var(--r); background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--line); text-align: center; }
.gate h2 { font: 400 clamp(30px, 3vw, 44px)/1.1 var(--serif); } .gate p { max-width: 30em; margin: 12px auto 0; color: var(--soft); }
.gate .gate__go { margin-top: 24px; }
.stops { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-block: 30px 0; font-size: 15px; color: var(--soft); }
.stops ol { display: flex; flex-wrap: wrap; gap: 8px 20px; counter-reset: s; }
.stops li { counter-increment: s; } .stops li::before { content: counter(s) " "; color: var(--act); }
.stops a { color: var(--text); text-decoration: none; } .stops a:hover { text-decoration: underline; text-decoration-color: var(--act); }
/* the page itself: text in a readable column, pictures wider */
.flow { display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, 9rem) [text-start] min(44rem, 100%) [text-end] minmax(0, 9rem) [wide-end] minmax(0, 1fr) [full-end]; row-gap: 1.1em; padding-block: clamp(36px, 5vw, 64px); font-size: 18px; line-height: 1.65; }
.flow > * { grid-column: text; }
/* the blocks (each in its data-dg-widget box): pictures wider than the text, words and before/after at its width */
.flow > [data-dg-widget] { margin-block: 1.2em; }
.flow > [data-dg-widget="media"], .flow > [data-dg-widget="gallery"], .flow > [data-dg-widget="photos"], .flow > [data-dg-widget="numbers"], .flow > [data-dg-widget="colours"], .flow > [data-dg-widget="typeface"], .flow > [data-dg-widget="prototype"] { grid-column: wide; }
.flow > [data-dg-widget="media"]:has([data-width="text"]), .flow > [data-dg-widget="prototype"]:has([data-shape="phone"]) { grid-column: text; }
.flow > [data-dg-widget="media"]:has([data-width="full"]) { grid-column: full; }
.flow h2 { margin-top: 1.6em; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; }
.flow h3 { margin-top: 1em; font: 600 20px/1.3 var(--sans); }
.flow ul, .flow ol { display: grid; gap: .5em; padding-left: 1.2em; } .flow ul { list-style: "– "; } .flow ol { list-style: decimal; }
.flow li p { margin: 0; } .flow strong { font-weight: 600; } .flow a { text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.flow blockquote { padding-left: 20px; border-left: 2px solid var(--act); font: 400 22px/1.4 var(--serif); }
.flow img { border-radius: 14px; }
.cs-end { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: clamp(48px, 6vw, 80px); }
.next { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; margin-bottom: clamp(56px, 7vw, 104px); padding: 26px; border-radius: var(--r); background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; }
.next .l { display: block; color: var(--soft); font-size: 14px; } .next b { display: block; margin-top: 6px; font: 400 clamp(32px, 3.6vw, 52px)/1 var(--serif); }
.next__line { display: block; margin-top: 10px; color: var(--soft); } .next__line b { display: inline; margin: 0; font: inherit; font-weight: 600; color: var(--text); }
.next__art { position: relative; display: block; overflow: hidden; height: 240px; border-radius: 16px; background: var(--c); }
.next__art .art[data-n] img { top: 14%; }

/* ── the case study's blocks (the Studio's widgets) ── */
.w-media { margin: 0; } .w-media[data-width="full"] img { border-radius: 0; }
.w-media img { width: 100%; cursor: zoom-in; }
.w-media[data-frame="phone"] .w-media__frame { width: min(320px, 76%); margin-inline: auto; padding: 10px; border-radius: 40px; background: #0d0d0c; }
.w-media[data-frame="phone"] img { border-radius: 30px; }
.w-media[data-frame="browser"] .w-media__frame { overflow: hidden; border-radius: 14px; background: #e9e6df; padding-top: 28px; position: relative; }
.w-media[data-frame="browser"] .w-media__frame::before { content: ""; position: absolute; top: 10px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: #c9c3b7; box-shadow: 14px 0 #c9c3b7, 28px 0 #c9c3b7; }
.w-media[data-frame="browser"] img { border-radius: 0; }
.flow figcaption, .w-media figcaption { margin-top: 10px; color: var(--soft); font-size: 15px; line-height: 1.5; }
.w-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); }
.w-gallery[data-cols="2"] { --cols: 2; } .w-gallery[data-cols="4"] { --cols: 4; }
.w-gallery img { width: 100%; cursor: zoom-in; }
.w-gallery[data-crop="square"] img { aspect-ratio: 1; object-fit: cover; } .w-gallery[data-crop="wide"] img { aspect-ratio: 4 / 3; object-fit: cover; }
.w-gallery figcaption { font-size: 15px; } .w-gallery figcaption::first-line { color: var(--text); }
.w-photos { display: grid; gap: var(--gap); } .w-photos[data-n="2"] { grid-template-columns: 1fr 1fr; } .w-photos[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.w-compare { margin: 0; max-width: 1000px; }
.w-compare__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.w-compare__side { position: relative; } .w-compare__side img { width: 100%; }
.w-compare__side span { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 99px; background: #111; color: #fff; font-size: 12px; font-weight: 600; }
.w-compare__pair.is-slider { position: relative; display: block; overflow: hidden; border-radius: var(--r); --pos: 50%; }
.is-slider .w-compare__side[data-side="after"] { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.is-slider .w-compare__side img { max-height: 76vh; object-fit: contain; background: var(--raise); }
.is-slider .w-compare__side[data-side="after"] img { height: 100%; max-height: none; }
.is-slider .w-compare__side[data-side="after"] span { left: auto; right: 14px; }
.w-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.w-compare__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: #111; font-weight: 700; }
.w-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.w-compare figcaption { margin-top: 10px; }
.w-embed { margin: 0; }
.w-embed__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: #0d0d0c; }
.w-embed[data-shape="phone"] .w-embed__frame { aspect-ratio: 9 / 19.5; width: min(320px, 80%); margin-inline: auto; border: 10px solid #0d0d0c; border-radius: 40px; }
.w-embed[data-shape="square"] .w-embed__frame { aspect-ratio: 1; }
.w-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-embed--link a { font-weight: 600; text-decoration-color: var(--act); }
.w-numbers h3 { margin: 0 0 12px; font: 500 15px var(--sans); color: var(--soft); }
.w-numbers__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--gap); }
.w-numbers__row > div { display: grid; padding-top: 16px; border-top: 2px solid var(--act); }
.w-numbers strong { font: 400 clamp(40px, 4vw, 58px)/1 var(--serif); letter-spacing: -.02em; color: var(--act); }
.w-numbers span { margin-top: 10px; font: 400 21px/1.25 var(--serif); } .w-numbers small { margin-top: 4px; color: var(--soft); font-size: 15px; }
.w-words { margin: 0; } .w-words blockquote { padding: 0; border: 0; font: 400 clamp(24px, 2.4vw, 32px)/1.3 var(--serif); }
.w-words figcaption { margin-top: 12px; }
.w-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.w-colours figure { overflow: hidden; border-radius: 16px; background: var(--raise); } .w-colours i { display: block; aspect-ratio: 4 / 3; }
.w-colours figcaption { margin: 0; padding: 10px 12px; font-size: 13px; } .w-colours b { display: block; color: var(--text); font-size: 15px; font-weight: 600; } .w-colours span { font-variant-numeric: tabular-nums; }
.w-type { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); padding: 28px; border-radius: var(--r); background: #f3e9d2; color: #2b2622; }
.w-type .aa { font-size: clamp(110px, 14vw, 210px); line-height: .85; } .w-type .name { font-size: 28px; }
.w-type .chars { margin-top: 14px; font-size: 22px; line-height: 1.45; word-break: break-all; } .w-type .pair { margin-top: 18px; font: 600 15px/1.5 var(--sans); color: #6a5f55; }

/* ── an article (the blog add-on draws it in the case study's markup: .cs, .row, .spine, .main) ── */
.cs--article { padding-block: clamp(36px, 6vw, 88px) clamp(48px, 6vw, 80px); }
.cs--article .row { display: block; }
.cs--article .spine { display: flex; gap: 18px; margin-bottom: 22px; color: var(--soft); font-size: 15px; } .cs--article .spine a { text-decoration: none; }
.cs--article h1 { max-width: 16em; font: 400 clamp(40px, 5vw, 76px)/1 var(--serif); letter-spacing: -.03em; }
.cs--article .main > .serif { max-width: 34em; margin-top: 18px; font-size: clamp(19px, 1.6vw, 23px); color: var(--soft); }
.cs--article .cs-facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 22px; font-size: 15px; } .cs--article .cs-facts dt { display: inline; color: var(--soft); } .cs--article .cs-facts dt::after { content: " "; } .cs--article .cs-facts dd { display: inline; }
.cs--article .lead { margin-top: 32px; } .cs--article .lead img { width: 100%; border-radius: var(--r); }
.cs--article .toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; font-size: 15px; color: var(--soft); } .cs--article .toc ol { display: flex; flex-wrap: wrap; gap: 8px 18px; } .cs--article .toc a { color: var(--text); text-decoration: none; }
.cs--article .content { display: grid; gap: 1.1em; max-width: 44rem; margin-top: 36px; font-size: 18px; line-height: 1.68; }
.cs--article .content h2 { margin-top: 1.4em; font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--serif); }
.cs--article .content h3 { font: 600 20px var(--sans); }
.cs--article .content ul, .cs--article .content ol { display: grid; gap: .5em; padding-left: 1.2em; } .cs--article .content ul { list-style: "– "; } .cs--article .content ol { list-style: decimal; }
.cs--article .content li p { margin: 0; } .cs--article .content a { text-decoration-color: var(--act); }
.cs--article .content img { border-radius: 14px; }
.cs--article .content blockquote { padding-left: 20px; border-left: 2px solid var(--act); font: 400 22px/1.4 var(--serif); }
.cs--article .content > pre { background: color-mix(in srgb, var(--text) 8%, var(--ground)); color: var(--text); border-radius: 14px; }
[data-palette="white"] .cs--article .content > pre { background: #1c1a17; color: #f4ecdc; }
.cs--article .content table { border-collapse: collapse; width: 100%; font-size: 15px; } .cs--article .content th, .cs--article .content td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cs--article .cs-end .main { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 40px; }
.cs--article .go { display: inline-flex; padding: 12px 20px; border-radius: 999px; background: var(--act); color: var(--act-text); font-weight: 600; text-decoration: none; }
.cs--article .u { text-decoration: underline; }
.cs-next { padding-bottom: clamp(56px, 7vw, 104px); } .cs-next .row { display: block; } .cs-next .spine { color: var(--soft); font-size: 14px; }
.cs-next a { display: block; margin-top: 8px; padding: 26px; border-radius: var(--r); background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; }
.cs-next h2 { font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--serif); } .cs-next p { margin-top: 8px; color: var(--soft); }

/* ── the door to the studio ── */
.door { max-width: 560px; padding-block: clamp(48px, 10vw, 140px); }
.door h1 { margin-top: 28px; font: 400 clamp(40px, 5vw, 64px)/1 var(--serif); letter-spacing: -.03em; }
.door__lede { margin: 14px 0 28px; color: var(--soft); font-size: 18px; }
.door__note:empty { display: none; } .door__note { font-size: 15px; } .door__note[data-tone="bad"], .door__note[data-tone="error"] { color: var(--bad); }
.door__lost { margin-top: 28px; color: var(--soft); font-size: 14px; }

@media (max-width: 900px) {
  .top__nav, .top > .pill { display: none; }
  .menu { display: block; margin-left: auto; }
  .hello, .hello-g, .head, .long, .about, .write--form, .next, .w-type { grid-template-columns: 1fr; }
  .hello { gap: 26px; }
  .w7, .w5, .w12 { grid-column: 1 / -1; }
  .card .t { flex-direction: column; gap: 4px; } .card .t span { text-align: left; }
  .w5 .art[data-n="1"] img, .w12 .art[data-n="1"] img { width: 84%; left: 8%; }
  .art[data-n] img { top: 34%; }
  .w12 .art[data-n="2"] img, .w5 .art[data-n="2"] img { width: 40%; } .w12 .art[data-n="2"] img:nth-child(1), .w5 .art[data-n="2"] img:nth-child(1) { left: 6%; } .w12 .art[data-n="2"] img:nth-child(2), .w5 .art[data-n="2"] img:nth-child(2) { left: 52%; }
  .w12 .art[data-n="3"] img, .w5 .art[data-n="3"] img { width: 32%; } .w12 .art[data-n="3"] img:nth-child(1), .w5 .art[data-n="3"] img:nth-child(1) { left: 2%; } .w12 .art[data-n="3"] img:nth-child(2), .w5 .art[data-n="3"] img:nth-child(2) { left: 34%; } .w12 .art[data-n="3"] img:nth-child(3), .w5 .art[data-n="3"] img:nth-child(3) { left: 66%; }
  .card { height: 400px; }
  .wide .art[data-n="1"] img { width: 84%; left: 8%; } .wide .art[data-n="2"] img { width: 40%; } .wide .art[data-n="2"] img:nth-child(1) { left: 6%; } .wide .art[data-n="2"] img:nth-child(2) { left: 52%; }
  .wide .art[data-n="3"] img { width: 32%; } .wide .art[data-n="3"] img:nth-child(1) { left: 2%; } .wide .art[data-n="3"] img:nth-child(2) { left: 34%; } .wide .art[data-n="3"] img:nth-child(3) { left: 66%; }
  .index li a { grid-template-columns: 2.5rem minmax(0, 1fr) 3.5rem; } .index .k { display: none; }
  .menu-list > li { grid-template-columns: 1fr; gap: 12px; } .price { text-align: left; }
  .chart { font-size: 13px; } .chart__row { grid-template-columns: 7rem repeat(var(--weeks), minmax(0, 1fr)); } .chart .bar { font-size: 0; padding: 0; } .chart .wkw { display: none; }
  .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic { grid-auto-rows: 52px; gap: 8px; }
  .w-gallery[data-cols="3"], .w-gallery[data-cols="4"] { --cols: 2; }
}
@media (max-width: 520px) {
  .form .two { grid-template-columns: 1fr; }
  .rows li { grid-template-columns: 1fr; gap: 2px; } .notes li a { grid-template-columns: 1fr; gap: 4px; } .notes .w { white-space: normal; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masonry { columns: 2; column-gap: 12px; } .masonry figure { margin-bottom: 20px; } .piece { border-radius: 12px; }
  .masonry figcaption { flex-direction: column; gap: 2px; font-size: 13px; } .masonry figcaption span { text-align: left; } .piece__result { font-size: 13px; }
  .w-compare__pair:not(.is-slider) { grid-template-columns: 1fr; }
  .w-photos[data-n="3"] { grid-template-columns: 1fr; }
  .flow { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .art img { transition: none; } }

/* ── features/blog/site/style.css ── */
/* The blog (features/blog), after the design's own CSS. An article's page is the case study's markup, so the design
   styles it; this adds what articles have and case studies don't: code, code blocks and dividers. Built from the
   design's variables (--ground, --ink, --accent…) so it takes any palette; the values after the commas are for
   designs that don't define them. A design can restyle these in its own site.css. */
.content :not(pre) > code { padding: .1em .35em; border-radius: 6px; background: color-mix(in srgb, var(--ink, #1c1c1a) 8%, transparent); color: var(--ink, #1c1c1a); font: .92em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.content > pre { max-width: 46rem; margin-inline: 0; padding: 18px 20px; overflow-x: auto; border-radius: var(--r, 12px); background: var(--ground, #1c1c1a); color: var(--cream, #f4f3ee); font: .9375rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; tab-size: 2; }
.content > pre code { font: inherit; color: inherit; background: none; padding: 0; }
/* code in a language (code.mjs): its name above it, and the words coloured. Light colours, since the block sits on the
   design's dark --ground; a design can set the --code-* variables to its own */
.content > pre.code {
  --code-keyword: #ff9ec4; --code-string: #c8e6a0; --code-number: #ffc37a; --code-title: #8ec7ff; --code-type: #7ee0d2;
  --code-comment: color-mix(in srgb, var(--cream, #f4f3ee) 55%, transparent);
}
.content > pre.code::before { content: attr(data-language); display: block; margin-bottom: 10px; color: color-mix(in srgb, var(--cream, #f4f3ee) 60%, transparent); font: 600 .6875rem/1 var(--sans, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.hljs-comment, .hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-tag, .hljs-name, .hljs-meta .hljs-keyword, .hljs-variable.language_ { color: var(--code-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-meta .hljs-string, .hljs-char.escape_, .hljs-link { color: var(--code-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-attr, .hljs-attribute, .hljs-bullet, .hljs-selector-attr, .hljs-selector-pseudo { color: var(--code-number); }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-meta, .hljs-doctag, .hljs-selector-id, .hljs-selector-class { color: var(--code-title); }
.hljs-type, .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title, .hljs-template-variable, .hljs-variable, .hljs-property { color: var(--code-type); }
.hljs-deletion { color: var(--code-keyword); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }
/* tables (render.mjs puts each in .table-scroll): ruled rows, a heavier rule under the header, sideways scrolling on a phone */
.content > .table-scroll { max-width: 46rem; overflow-x: auto; }
.content > .table-scroll:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 4px; }
.content table { min-width: 100%; border-collapse: collapse; }
.content :is(th, td) { padding: 10px 16px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink, #1c1c1a) 14%, transparent); text-align: start; vertical-align: top; }
.content th { border-bottom: 2px solid var(--ink, #1c1c1a); color: var(--ink, #1c1c1a); font-weight: 700; white-space: nowrap; }
.content td { color: var(--ink-2, #3b3b37); }
.content :is(th, td) p { margin: 0; color: inherit; font-size: 1rem; line-height: 1.5; }
.content > hr { max-width: 42rem; height: 0; margin-block: 48px; border: 0; border-top: 2px dashed color-mix(in srgb, var(--ink, #1c1c1a) 25%, transparent); }
.content s { color: var(--muted, #666); }

/* ── features/contact-form/site/style.css ── */
/* The contact form (features/contact-form), after the design's own CSS: a paper card with an ink edge on the
   Contact band, built from the design's variables (--paper, --ink, --ground…) so it takes any palette; the values
   after the commas are for designs that don't define them. A design can restyle .cf in its own site.css. */
.cf { display: grid; gap: 14px; margin-top: 32px; padding: 24px; border-radius: var(--r-lg, 16px); background: var(--paper, #fff); color: var(--ink, #1c1c1a); border: 2px solid var(--ink, #1c1c1a); box-shadow: 6px 6px 0 var(--ground-3, #000); }
.cf-field { display: grid; gap: 6px; }
.cf-field label { font-weight: 600; font-size: .9375rem; }
.cf-field small { color: var(--muted, #666); font-size: .8125rem; }
.cf input, .cf textarea { width: 100%; padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--ink, #1c1c1a) 22%, transparent); border-radius: 10px; background: #fff; color: var(--ink, #1c1c1a); font: inherit; }
.cf textarea { resize: vertical; min-height: 7.5rem; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--ground, #1c1c1a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e8b04b) 45%, transparent); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cf .go { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cf .go:disabled { opacity: .6; cursor: progress; }
.cf-note { color: var(--ink-2, #444); font-size: .9375rem; }
.cf[data-done] .cf-note { color: var(--ground, #1c1c1a); font-weight: 600; }
.cf-sent { display: none; padding: 12px 14px; border-radius: 10px; background: var(--accent-50, #f6e2b5); font-weight: 600; }
.cf-sent:target { display: block; }
#contact .cf :focus-visible { outline-color: var(--ground, #1c1c1a); }