/* The personal look: everything here is scoped to .site[data-look="personal"]. Appended after base.css (bun run --filter @platform/sections css).

   A person's own site, made of the things a portfolio is made of: the title
   page with the name set large, the printed name card with its crop marks,
   the contact sheet (black proof paper, sprocket holes, the name along the
   film edge, the china-marker circle around the pick), the typed CV margin
   and the back of the card. No stock photos: until the person uploads their
   own, the artefacts carry their facts. Red only ever draws marks. */

.site[data-look="personal"] {
  --p-paper: #f6f6f3;
  --p-ink: #141414;
  --p-muted: #55554f;
  --p-rule: #d4d3cd;
  --p-rule-ink: #141414;
  --p-film: #0b0b0b;
  --p-hole: rgb(239 238 233 / 0.3);
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.04rem + 0.45vw, 1.375rem);
  --fs-h2: clamp(2.6rem, 1.5rem + 3.9vw, 5.4rem);
  --fs-h3: clamp(1.3rem, 1.12rem + 0.6vw, 1.6rem);
  --section-pad: clamp(4.5rem, 10vw, 9rem);
  --wrap: 78rem;
  background: var(--p-paper);
}
@media (max-width: 40rem) { .site[data-look="personal"] { --fs-base: 1.0625rem; } }
.site[data-look="personal"] main > .s + .s { border-top: 0; }
.site[data-look="personal"] :is(h1, h2) { line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.site[data-look="personal"] h2 { font-size: var(--fs-h2); margin: 0 0 0.4em; }
.site[data-look="personal"] :is(p, li, dd, figcaption) { hyphens: auto; }
.site[data-look="personal"] ::selection { background: var(--marker); color: #fff; }

/* Mono labels: the print room's small type (years, labels, edge print). */
.site[data-look="personal"] :is(.p-k, .p-facts dt, .p-card-what, .p-quotes figcaption, .p-prints figcaption) {
  font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
}

/* --- Buttons: ink, square like a printed block; the china marker
   underlines on hover. ------------------------------------------------- */
.site[data-look="personal"] .btn { border-radius: 0; min-height: 3.25rem; padding-inline: 1.6rem; letter-spacing: 0.005em; transition: box-shadow 160ms ease, transform 160ms ease; }
.site[data-look="personal"] .btn:hover { text-decoration: none; box-shadow: 0 4px 0 var(--marker); transform: translateY(-2px); }
.site[data-look="personal"] .btn:active { transform: none; box-shadow: none; }
.site[data-look="personal"] .cta-alt { text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.site[data-look="personal"] .cta-alt:hover { text-decoration-color: var(--marker); text-decoration-thickness: 2px; }
.site[data-look="personal"] :is(a, button, .btn):focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .site[data-look="personal"] .btn { transition: none; } .site[data-look="personal"] .btn:hover { transform: none; } }

/* --- Header: the name small, like the running head of a book. ------------ */
.site[data-look="personal"] .site-header { background: var(--p-paper); border-bottom: 1px solid var(--p-rule); }
.site[data-look="personal"] .brand { font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.7rem); letter-spacing: -0.01em; }
.site[data-look="personal"] .site-header nav a { font-family: var(--font-figures); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
.site[data-look="personal"] .site-header nav a[aria-current='page'] { font-weight: 400; text-decoration-color: var(--marker); }
.site[data-look="personal"] .site-header .btn { min-height: 2.75rem; padding-inline: 1.1rem; font-size: 0.95rem; }

/* --- Hero: the title page. The name across the page, a rule under it,
   then the headline and the name card (or the person's own print). ------ */
.site[data-look="personal"] .p-hero { padding-block: clamp(2rem, 7vh, 5.5rem) clamp(3.5rem, 8vw, 7rem); }
.site[data-look="personal"] .p-title { display: flex; flex-direction: column; }
.site[data-look="personal"] .p-name {
  font-family: var(--font-heading); font-weight: 400; line-height: 0.86; letter-spacing: -0.025em;
  margin: 0; padding-bottom: clamp(1.1rem, 2.5vw, 2rem); border-bottom: 1px solid var(--p-rule-ink);
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
.site[data-look="personal"] .p-name-l { font-size: clamp(3.6rem, 0.9rem + 14.6vw, 15.5rem); }
.site[data-look="personal"] .p-name-m { font-size: clamp(3rem, 0.9rem + 9.6vw, 10.5rem); }
.site[data-look="personal"] .p-name-s { font-size: clamp(2.4rem, 1rem + 5.4vw, 6.5rem); line-height: 0.92; }
.site[data-look="personal"] .p-title-foot { display: grid; gap: clamp(2rem, 5vw, 4rem); padding-top: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
.site[data-look="personal"] .p-headline {
  font-family: var(--font-body); font-weight: 600; text-transform: none;
  font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.022em;
  max-width: 20ch; margin: 0 0 0.55em;
}
.site[data-look="personal"] .p-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34rem; margin: 0; color: var(--p-muted); hyphens: manual; }
.site[data-look="personal"] .p-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 52rem) {
  .site[data-look="personal"] .p-title-foot { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .site[data-look="personal"] .p-card, .site[data-look="personal"] .p-hero .p-print { justify-self: end; }
  .site[data-look="personal"] .p-hero.has-photo .p-title { min-height: 0; }
}

/* The name card: 85 × 55 mm, white board, crop marks at the corners from
   the sheet it was cut from. It lifts a little when you reach for it. */
.site[data-look="personal"] .p-card {
  --text: var(--on-card); --muted: var(--card-muted);
  position: relative; width: min(100%, 27rem); aspect-ratio: 85 / 55; margin: 0.75rem;
  display: flex; flex-direction: column; padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.8rem);
  background: var(--card); color: var(--on-card);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 26px 38px -30px rgb(20 20 20 / 0.6);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.site[data-look="personal"] .p-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 34px 44px -30px rgb(20 20 20 / 0.6); }
.site[data-look="personal"] .p-card-name { font-family: var(--font-heading); font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.2rem); line-height: 1; letter-spacing: -0.015em; margin: 0 0 0.45rem; }
.site[data-look="personal"] .p-card-name.is-long { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.05; }
.site[data-look="personal"] .p-card-what { color: var(--card-muted); margin: 0; line-height: 1.5; letter-spacing: 0.06em; hyphens: manual; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.site[data-look="personal"] .p-card-lines { margin: auto 0 0; padding-top: 0.8rem; font-size: 0.95rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.site[data-look="personal"] .p-card-lines a { text-decoration: none; overflow-wrap: anywhere; }
.site[data-look="personal"] .p-card-lines a:hover { text-decoration: underline; text-decoration-color: var(--marker); }
@media (prefers-reduced-motion: reduce) { .site[data-look="personal"] .p-card { transition: none; } .site[data-look="personal"] .p-card:hover { transform: none; } }

/* Crop marks: two hairlines off each corner, as printed outside the trim. */
.site[data-look="personal"] .p-crop { position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none; }
.site[data-look="personal"] .p-crop::before, .site[data-look="personal"] .p-crop::after { content: ''; position: absolute; background: var(--p-muted); }
.site[data-look="personal"] .p-crop::before { width: 100%; height: 1px; }
.site[data-look="personal"] .p-crop::after { width: 1px; height: 100%; }
.site[data-look="personal"] .p-crop-tl { top: -1.5rem; left: -1.5rem; }
.site[data-look="personal"] .p-crop-tl::before { bottom: -0.4rem; left: 0; } .site[data-look="personal"] .p-crop-tl::after { right: -0.4rem; top: 0; }
.site[data-look="personal"] .p-crop-tr { top: -1.5rem; right: -1.5rem; }
.site[data-look="personal"] .p-crop-tr::before { bottom: -0.4rem; right: 0; } .site[data-look="personal"] .p-crop-tr::after { left: -0.4rem; top: 0; }
.site[data-look="personal"] .p-crop-bl { bottom: -1.5rem; left: -1.5rem; }
.site[data-look="personal"] .p-crop-bl::before { top: -0.4rem; left: 0; } .site[data-look="personal"] .p-crop-bl::after { right: -0.4rem; bottom: 0; }
.site[data-look="personal"] .p-crop-br { bottom: -1.5rem; right: -1.5rem; }
.site[data-look="personal"] .p-crop-br::before { top: -0.4rem; right: 0; } .site[data-look="personal"] .p-crop-br::after { left: -0.4rem; bottom: 0; }

/* The person's own photo: a plain print, the same crop marks round it. */
.site[data-look="personal"] .p-print { position: relative; margin: 1.5rem; }
.site[data-look="personal"] .p-print-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); }
.site[data-look="personal"] .p-hero .p-print { width: min(100% - 3rem, 30rem); }
@media (min-width: 52rem) { .site[data-look="personal"] .p-hero .p-print { margin-top: calc(-1 * clamp(1.5rem, 3.5vw, 2.75rem) + 1.5rem); } }

/* The first screen sets itself: the name rises, the card follows. */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="personal"] .p-name { animation: p-rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="personal"] :is(.p-card, .p-hero .p-print) { animation: p-rise 900ms 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes p-rise { from { opacity: 0; translate: 0 0.6rem; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 51.99rem) {
  .site[data-look="personal"] .p-title { min-height: 0; }
  .site[data-look="personal"] .p-hero { padding-top: clamp(2rem, 8vw, 3rem); }
  .site[data-look="personal"] .p-card { margin: 1.25rem 1.5rem 0.5rem; width: min(100% - 3rem, 24rem); }
}

/* --- What they do: the contact sheet. Photo paper black, the film strip
   with its sprocket holes and the name along the edge, one frame each. --- */
.site[data-look="personal"] .p-sheet-band { --text: var(--on-sheet); --muted: var(--sheet-muted); background: var(--sheet); color: var(--on-sheet); }
.site[data-look="personal"] .p-sheet-head { display: grid; gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.site[data-look="personal"] .p-sheet-head h2 { margin: 0; max-width: 12ch; }
.site[data-look="personal"] .p-intro { font-size: var(--fs-lead); line-height: 1.5; max-width: 34rem; margin: 0; color: var(--muted); }
@media (min-width: 52rem) { .site[data-look="personal"] .p-sheet-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.site[data-look="personal"] .p-sheet {
  --cols: 3;
  position: relative; background: var(--p-film); padding: 0 clamp(0.6rem, 1.5vw, 1.1rem);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04);
}
.site[data-look="personal"] .p-sheet[data-cols="1"] { --cols: 1; max-width: 44rem; }
.site[data-look="personal"] .p-sheet[data-cols="2"] { --cols: 2; }
/* Sprocket holes: a row of rounded slots above and below the frames. */
.site[data-look="personal"] .p-sheet::before, .site[data-look="personal"] .p-sheet::after {
  content: ''; display: block; height: 1.6rem;
  background-image: linear-gradient(to right, transparent 0.38rem, var(--p-hole) 0.38rem, var(--p-hole) 1.18rem, transparent 1.18rem);
  background-repeat: repeat-x; background-position: 0 center; background-size: 1.6rem 0.62rem;
}
/* The film edge: the person's name printed along it, like a maker's name. */
.site[data-look="personal"] .p-edge { display: block; overflow: hidden; white-space: nowrap; font-family: var(--font-figures); font-size: 0.66rem; letter-spacing: 0.22em; line-height: 1; color: var(--sheet-muted); padding: 0.1rem 0 0.55rem; }
.site[data-look="personal"] .p-edge:last-child { padding: 0.55rem 0 0.1rem; }
.site[data-look="personal"] .p-frames { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 0.9rem); }
.site[data-look="personal"] .p-frame { position: relative; min-width: 0; }
/* A last row that doesn't fill the strip: its last frame takes the rest, a
   wider frame rather than a blank one. */
@media (min-width: 52rem) {
  .site[data-look="personal"] .p-sheet:not([data-cols]) .p-frame:last-child:nth-child(3n + 2), .site[data-look="personal"] .p-sheet[data-cols="3"] .p-frame:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .site[data-look="personal"] .p-sheet[data-cols="3"] .p-frame:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 40rem) { .site[data-look="personal"] .p-sheet[data-cols="2"] .p-frame:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.site[data-look="personal"] .p-frame-in {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.6rem;
  min-height: clamp(11rem, 16vw, 15rem); height: 100%; padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: 2px;
  /* Each frame is a print on paper, the words set like a proof (judge
     2026-10-16: dark empty frames read as missing pictures). */
  background: var(--p-paper); color: var(--p-ink);
  transition: outline-color 160ms ease;
  outline: 2px solid transparent; outline-offset: 6px;
}
.site[data-look="personal"] .p-frame-name { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.25vw, 2.45rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 0.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--p-rule); color: var(--p-ink); text-transform: none; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="personal"] .p-frame-note { margin: 0; color: var(--p-muted); font-size: 0.98rem; line-height: 1.45; max-width: 30rem; }
.site[data-look="personal"] .p-frame-price { margin: auto 0 0; font-family: var(--font-figures); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--p-ink); }
/* Reaching for a frame marks it with the china marker, as an editor would. */
.site[data-look="personal"] .p-frame:not(.is-pick):hover .p-frame-in { outline-color: var(--marker); }
/* The pick: circled by hand on the first frame. */
.site[data-look="personal"] .p-mark { position: absolute; z-index: 2; inset: -0.9rem -0.7rem; width: calc(100% + 1.4rem); height: calc(100% + 1.8rem); overflow: visible; pointer-events: none; }
.site[data-look="personal"] .p-mark path { fill: none; stroke: var(--marker); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="personal"] .p-mark path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: p-draw linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
  }
  .site[data-look="personal"] .p-frame-in { transition: outline-color 160ms ease; }
}
@keyframes p-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 51.99rem) {
  .site[data-look="personal"] .p-sheet { --cols: 1; }
  .site[data-look="personal"] .p-sheet[data-cols] { --cols: 1; }
  .site[data-look="personal"] .p-frame-in { min-height: 9.5rem; }
}
@media (min-width: 40rem) and (max-width: 51.99rem) { .site[data-look="personal"] .p-sheet[data-cols]:not([data-cols="1"]) { --cols: 2; } }

/* --- About: the CV sheet. The facts down a ruled margin, the text beside;
   the first paragraph set as the standfirst. ----------------------------- */
.site[data-look="personal"] .p-cv { background: var(--p-paper); }
.site[data-look="personal"] .p-cv-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.site[data-look="personal"] .p-cv-text :is(h1, h2) { max-width: 14ch; }
.site[data-look="personal"] .p-cv-text .is-long { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem); max-width: 20ch; }
.site[data-look="personal"] .p-cv-body { max-width: 40rem; }
.site[data-look="personal"] .p-cv-body p { margin: 0 0 1em; font-size: var(--fs-lead); line-height: 1.6; }
.site[data-look="personal"] .p-cv-body p:first-child { font-family: var(--font-heading); font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.35rem); line-height: 1.18; letter-spacing: -0.01em; hyphens: manual; }
.site[data-look="personal"] .p-facts { margin: 0; border-top: 1px solid var(--p-rule-ink); }
.site[data-look="personal"] .p-facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--p-rule); align-items: baseline; }
.site[data-look="personal"] .p-facts dt { color: var(--p-muted); }
.site[data-look="personal"] .p-facts dd { margin: 0; overflow-wrap: anywhere; }
.site[data-look="personal"] .p-facts a { text-decoration: none; }
.site[data-look="personal"] .p-facts a:hover { text-decoration: underline; text-decoration-color: var(--marker); }
.site[data-look="personal"] .p-cv-print { margin: 1.5rem 1.5rem 2.5rem; }
@media (min-width: 52rem) {
  .site[data-look="personal"] .p-cv-grid { grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2fr); }
  .site[data-look="personal"] .p-cv-side { order: 0; padding-top: 0.6rem; }
  .site[data-look="personal"] .p-cv.has-photo .p-cv-grid { grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.6fr); }
}
@media (max-width: 51.99rem) { .site[data-look="personal"] .p-cv-side { order: 2; } }

/* --- The gallery: a spread of the person's own prints, the alt text as the
   caption. The first print large. -------------------------------------- */
.site[data-look="personal"] .p-spread { background: var(--p-paper); border-top: 1px solid var(--p-rule); }
.site[data-look="personal"] .p-prints { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="personal"] .p-prints figure { margin: 0; }
.site[data-look="personal"] .p-prints img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.site[data-look="personal"] .p-prints figcaption { margin-top: 0.6rem; color: var(--p-muted); letter-spacing: 0.04em; text-transform: none; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site[data-look="personal"] .p-prints li:first-child { grid-column: 1 / -1; }
.site[data-look="personal"] .p-prints li:first-child img { aspect-ratio: 3 / 2; }
@media (min-width: 52rem) {
  .site[data-look="personal"] .p-prints { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site[data-look="personal"] .p-prints li { grid-column: span 2; }
  .site[data-look="personal"] .p-prints li:first-child { grid-column: span 4; grid-row: span 2; }
  .site[data-look="personal"] .p-prints li:first-child img { aspect-ratio: auto; height: calc(100% - 2.6rem); min-height: 22rem; }
  .site[data-look="personal"] .p-n2 .p-prints li, .site[data-look="personal"] .p-n2 .p-prints li:first-child { grid-column: span 3; grid-row: auto; }
  .site[data-look="personal"] .p-n2 .p-prints li:first-child img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* --- What others say: set large, like quotes on a back cover. ----------- */
.site[data-look="personal"] .p-quotes { background: var(--surface); }
.site[data-look="personal"] .p-quotes h2 { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); font-family: var(--font-figures); letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); line-height: 1.3; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.site[data-look="personal"] .p-quotes ul { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.site[data-look="personal"] .p-quotes figure { margin: 0; }
.site[data-look="personal"] .p-quotes blockquote { margin: 0; }
.site[data-look="personal"] .p-quotes blockquote p { font-family: var(--font-heading); font-size: clamp(1.75rem, 1.2rem + 1.9vw, 3.1rem); line-height: 1.1; letter-spacing: -0.012em; margin: 0; text-wrap: pretty; hyphens: manual; }
.site[data-look="personal"] .p-quotes-one blockquote p { font-size: clamp(2rem, 1.2rem + 2.8vw, 4rem); max-width: 22ch; }
.site[data-look="personal"] .p-quotes figcaption { margin-top: 1.1rem; color: var(--p-muted); }
.site[data-look="personal"] .p-quotes figcaption::before { content: '— '; }
@media (min-width: 52rem) {
  .site[data-look="personal"] .p-quotes-many ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site[data-look="personal"] .p-quotes-many li:nth-child(even) { padding-top: clamp(3rem, 7vw, 6rem); border-left: 1px solid var(--p-rule); padding-left: clamp(2rem, 4vw, 4rem); }
}

/* --- Contact: the back of the card. The way to write at display size. ---- */
.site[data-look="personal"] .p-back:not(.has-form) { background: var(--p-paper); border-top: 1px solid var(--p-rule-ink); }
.site[data-look="personal"] .p-back h2 { max-width: 14ch; }
.site[data-look="personal"] .p-back .p-intro { color: var(--p-muted); }
.site[data-look="personal"] .p-big { margin: clamp(1.75rem, 5vw, 3.5rem) 0 0; font-family: var(--font-heading); font-size: clamp(2.3rem, 0.9rem + 6.4vw, 8rem); line-height: 0.98; letter-spacing: -0.02em; }
.site[data-look="personal"] .p-big a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; text-decoration-color: var(--p-rule); overflow-wrap: anywhere; transition: text-decoration-color 160ms ease; }
.site[data-look="personal"] .p-big a[data-long] { font-size: 0.7em; }
.site[data-look="personal"] .p-big a:hover { text-decoration-color: var(--marker); }
.site[data-look="personal"] .p-lines { margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--p-rule); max-width: 40rem; }
.site[data-look="personal"] .p-lines li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--p-rule); }
.site[data-look="personal"] .p-k { color: var(--p-muted); }
.site[data-look="personal"] .p-lines a { font-size: 1.2rem; text-decoration: none; overflow-wrap: anywhere; }
.site[data-look="personal"] .p-lines a:hover { text-decoration: underline; text-decoration-color: var(--marker); }

/* With the contact form on: the shared section, set as the card's back. */
.site[data-look="personal"] .p-back.has-form > .s-contact { background: var(--p-paper); border-top: 1px solid var(--p-rule-ink); }
.site[data-look="personal"] .p-back.has-form .contact-details h2 { max-width: 12ch; }
.site[data-look="personal"] .p-back.has-form .contact-list a { text-decoration: none; }
.site[data-look="personal"] .p-back.has-form .contact-form { background: var(--card); color: var(--on-card); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 26px 38px -30px rgb(20 20 20 / 0.5); }
.site[data-look="personal"] .p-back.has-form .contact-form :is(input, textarea) { border-radius: 0; border: 0; border-bottom: 1px solid var(--p-ink); background: transparent; padding-inline: 0; }
.site[data-look="personal"] .p-back.has-form .contact-form :is(input, textarea):focus { outline: none; border-bottom: 2px solid var(--marker); }
.site[data-look="personal"] .p-back.has-form .contact-form label { font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-muted); }

/* --- The rest (FAQ, booking, request form) on the same paper and rules. -- */
.site[data-look="personal"] :is(.s-faq, .s-booking, .s-request) { background: var(--p-paper); border-top: 1px solid var(--p-rule); }

/* --- Footer: the colophon. -------------------------------------------------- */
.site[data-look="personal"] .site-footer { font-size: 0.92rem; }
.site[data-look="personal"] .footer-name { font-family: var(--font-heading); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -0.01em; }
.site[data-look="personal"] .footer-title { font-family: var(--font-figures); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }