/* Profoliox components, hand-written in plain CSS from the theme's Astro + Tailwind sources.
   Colours come from tokens.css. Motion (split headings, word fill, photo reveal, parallax,
   hover preview, menu wipe, smooth scroll) is in profoliox.js. */

html { scrollbar-gutter: stable; }
.pf { margin: 0; font-family: var(--font-sans); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
:where(.pf) img { display: block; max-width: 100%; }
:where(.pf) a { color: inherit; text-decoration: none; }
:where(.pf) h1, :where(.pf) h2, :where(.pf) h3, :where(.pf) p, :where(.pf) ul, :where(.pf) dl, :where(.pf) dd { margin: 0; }
:where(.pf) ul { list-style: none; padding: 0; }
:where(.pf) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Type helpers. Sentence case, no uppercase, no wide tracking. */
.pf-label { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); }   /* "(Services)" */
.pf-quiet { color: var(--muted-foreground); }
.pf-medium { font-weight: 500; }
.pf-pretty { text-wrap: pretty; }
@media (min-width: 1024px) { .pf-pretty { text-wrap: balance; } }
.pf-dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 9999px; background: var(--accent); }

/* Wrapper.astro standard */
.pf-wrap { width: 100%; max-width: var(--width-wrapper); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 768px) { .pf-wrap { padding-left: 32px; padding-right: 32px; } }
.pf-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* Grid: 4 columns on phones, 12 from 768px. Label on the left 3, content on the right 9. */
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.pf-grid > * { grid-column: span 4; min-width: 0; }
@media (min-width: 768px) {
  .pf-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pf-grid > .md-2 { grid-column: span 2; } .pf-grid > .md-3 { grid-column: span 3; } .pf-grid > .md-4 { grid-column: span 4; }
  .pf-grid > .md-5 { grid-column: span 5; } .pf-grid > .md-6 { grid-column: span 6; } .pf-grid > .md-7 { grid-column: span 7; }
  .pf-grid > .md-8 { grid-column: span 8; } .pf-grid > .md-9 { grid-column: span 9; } .pf-grid > .md-12 { grid-column: span 12; }
}

/* ArrowLink.astro: never underlined, the arrow nudges on hover */
.pf-arrow { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; }
.pf-arrow::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; transition: transform 300ms;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pf-arrow:hover::after { transform: translateX(4px); }
.pf-icon-arrow { width: 16px; height: 16px; flex: none; transition: transform 300ms; }

/* Button.astro: pills, only for forms and the main call to action */
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-full); font: 500 14px/20px var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; height: 36px; padding: 0 16px; cursor: pointer; transition: background-color 300ms, box-shadow 300ms; }
.pf-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pf-btn--primary { color: var(--primary-foreground); background: var(--primary); }
.pf-btn--primary:hover { background: color-mix(in oklab, var(--primary) 85%, transparent); }
.pf-btn--surface { color: var(--foreground); background: var(--surface); }
.pf-btn--surface:hover { background: var(--muted); }
.pf-btn--ghost { color: var(--primary-foreground); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-foreground) 40%, transparent); }
.pf-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--primary-foreground); }
.pf-btn--sm { height: 36px; padding: 0 16px; }
.pf-btn--base { height: 44px; padding: 0 20px; }

/* Photo frames: square corners, faint ground, image fills */
.pf-frame { overflow: hidden; background: var(--muted); }
.pf-frame > img { width: 100%; height: 100%; object-fit: cover; }
.pf-r43 { aspect-ratio: 4 / 3; } .pf-r45 { aspect-ratio: 4 / 5; } .pf-r34 { aspect-ratio: 3 / 4; } .pf-r169 { aspect-ratio: 16 / 9; } .pf-r11 { aspect-ratio: 1; }
.pf-tile { display: block; }
.pf-tile .pf-frame > img { transition: transform 1000ms ease-out; }
.pf-tile:hover .pf-frame > img { transform: scale(1.03); }
.pf-tile__meta { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.5; }

/* Index rows: rule on top of each row, rule under the list, small slide on hover */
.pf-index { border-bottom: 1px solid var(--border); }
.pf-index > li { border-top: 1px solid var(--border); }
.pf-index a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 12px 16px; padding: 20px 0; }
.pf-index__thumb { grid-column: span 1; aspect-ratio: 1; overflow: hidden; background: var(--muted); }
.pf-index__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-index__kind { grid-column: span 3; }
.pf-index__title { grid-column: span 4; transition: transform 500ms cubic-bezier(0, 0, 0.2, 1); }
.pf-index__detail { grid-column: span 2; }
.pf-index__price { grid-column: span 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-weight: 500; }
.pf-index a:hover .pf-icon-arrow { transform: translateX(4px); }
@media (min-width: 768px) {
  .pf-index a { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 28px 0; }
  .pf-index__thumb { display: none; }
  .pf-index__kind { grid-column: span 3; order: -1; }
  .pf-index__title { grid-column: span 5; }
  .pf-index a:hover .pf-index__title { transform: translateX(12px); }
}

/* Details list: small grey dt, ink dd */
.pf-dl dt { margin-bottom: 4px; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); }
.pf-dl dd { font-size: 14px; line-height: 1.5; }

/* Pointer-following preview for index lists (HoverPreview.astro) */
.pf-preview { position: fixed; top: 0; left: 0; z-index: 30; width: 320px; aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0) scale(0.92); transition: opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1); display: none; }
@media (min-width: 768px) and (hover: hover) { .pf-preview { display: block; } }
.pf-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms; }
.pf-preview > img.is-on { opacity: 1; }

/* Navigation: floats with no ground; white items blended with difference */
.pf-nav { position: sticky; top: 0; z-index: 40; color: #fff; mix-blend-mode: difference; }
.pf-nav__bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; height: var(--nav-height); }
@media (min-width: 768px) { .pf-nav__bar { grid-template-columns: repeat(12, minmax(0, 1fr)); } .pf-nav__bar > :first-child { grid-column: span 3; } .pf-nav__links { grid-column: span 6; } .pf-nav__end { grid-column: span 3; } }
.pf-logo { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.pf-logo sup { margin-left: 1px; font-size: 0.6em; }
.pf-nav__links { display: none; align-items: center; gap: 20px; }
@media (min-width: 768px) { .pf-nav__links { display: flex; } }
.pf-nav__links a, .pf-nav__mail { font-size: 14px; line-height: 1.5; opacity: 0.6; transition: opacity 150ms; }
.pf-nav__links a:hover, .pf-nav__links a[aria-current="page"], .pf-nav__mail:hover { opacity: 1; }
.pf-nav__end { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.pf-nav__mail { display: none; }
@media (min-width: 1024px) { .pf-nav__mail { display: block; } }
.pf-md-only { display: none !important; }
@media (min-width: 768px) { .pf-md-only { display: inline-flex !important; } .pf-menu-btn { display: none !important; } }
.pf-menu-btn { display: grid; font-size: 14px; font-weight: 500; }
.pf-menu-btn > span { grid-area: 1 / 1; transition: transform 300ms, opacity 300ms; }
.pf-menu-btn > span + span { opacity: 0; transform: translateY(4px); }
.pf-menu-btn[aria-expanded="true"] > span:first-child { opacity: 0; transform: translateY(-4px); }
.pf-menu-btn[aria-expanded="true"] > span + span { opacity: 1; transform: none; }

/* Phone menu: wipes down, links rise out of their masks */
.pf-menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; padding-top: var(--nav-height); background: var(--background); clip-path: inset(0 0 100% 0); transition: clip-path 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.pf-menu[hidden] { display: none; }
.pf-menu.is-open { clip-path: inset(0 0 0 0); }
.pf-menu__in { display: flex; flex-grow: 1; flex-direction: column; justify-content: space-between; padding-top: 40px; padding-bottom: 40px; }
.pf-menu li, .pf-menu__mail { overflow: hidden; }
.pf-menu [data-menu-item] { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; transform: translateY(110%); transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.pf-menu.is-open [data-menu-item] { transform: none; }
.pf-menu__n { width: 20px; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pf-menu [aria-current="page"]::after { content: ""; align-self: center; width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }
@media (min-width: 768px) { .pf-menu { display: none !important; } }

/* Photo band with text (Contact): stays inside the page width, square, veiled */
.pf-band { position: relative; isolation: isolate; overflow: hidden; }
.pf-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.pf-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--foreground) 45%, transparent); }
@media (min-width: 768px) { .pf-band::before { background: linear-gradient(to right, color-mix(in oklab, var(--foreground) 55%, transparent), color-mix(in oklab, var(--foreground) 20%, transparent), transparent); } }
.pf-band__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; align-content: end; min-height: 80svh; padding: 24px; color: var(--primary-foreground); }
@media (min-width: 768px) { .pf-band__in { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 40px; } }

/* Footer: the name set huge at the bottom, cropped by the page edge */
.pf-bigname { margin-bottom: -0.18em; font-size: 12.6vw; line-height: 0.8; font-weight: 500; letter-spacing: -0.065em; white-space: nowrap; }
@media (min-width: 1536px) { .pf-bigname { font-size: 200px; } }

/* Motion states (profoliox.js adds .pf-motion on <html>; nothing is hidden without it) */
.pf-motion [data-split]:not(.is-split) { opacity: 0; }
.pf-line-mask { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.pf-line-mask:first-child { padding-top: 0.15em; margin-top: -0.15em; }
.pf-line { display: block; transform: translateY(150%); transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
.is-in .pf-line { transform: none; }
.pf-motion [data-reveal] { clip-path: inset(100% 0 0 0); transition: clip-path 1400ms cubic-bezier(0.87, 0, 0.13, 1); }
.pf-motion [data-reveal] > img { transform: scale(1.2); transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms; }
.pf-motion [data-reveal].is-in { clip-path: inset(0 0 0 0); }
.pf-motion [data-reveal].is-in > img { transform: none; }
.pf-motion .pf-tile:hover [data-reveal].is-in > img { transform: scale(1.03); transition-duration: 1000ms; transition-delay: 0ms; }
.pf-word { transition: opacity 120ms linear; }

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

@media (prefers-reduced-motion: reduce) {
  .pf-tile .pf-frame > img, .pf-index__title, .pf-arrow::after, .pf-icon-arrow, .pf-btn, .pf-menu, .pf-menu [data-menu-item], .pf-menu-btn > span { transition: none; }
  .pf-tile:hover .pf-frame > img { transform: none; }
  .pf-menu { clip-path: none; } .pf-menu [data-menu-item] { transform: none; }
}