/*
Theme Name: Sigvat Kildal – The Joy of Living
Theme URI: https://sigvatkildal.com
Author: The Kildal family
Description: A quiet, multilingual digital museum and family archive for Sigvat Kildal.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: sigvat-kildal
*/

:root {
  --paper: #f2efe8;
  --paper-deep: #e6e0d5;
  --ink: #272a25;
  --muted: #6d6d64;
  --olive: #364c3d;
  --olive-soft: #9fab98;
  --terra: #a74f35;
  --line: rgba(39, 42, 37, .19);
  --white: #fbfaf6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
body.admin-bar .site-header { top: 32px; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-shell { min-height: 100vh; overflow: hidden; }

.site-header { width: min(1380px, calc(100% - 64px)); margin: 0 auto; min-height: 112px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--olive); border-radius: 50%; color: var(--olive); font: 600 13px/1 Georgia, serif; letter-spacing: .06em; }
.brand strong, .brand small { display: block; }
.brand strong { font: 500 20px/1.1 Georgia, serif; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: flex; gap: 34px; }
.main-nav a { position: relative; text-decoration: none; color: var(--muted); font-size: 12px; letter-spacing: .11em; text-transform: uppercase; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--terra); transition: right .2s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }

.hero { width: min(1380px, calc(100% - 64px)); margin: 0 auto; min-height: 730px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; align-items: center; padding: 80px 0 100px; }
.hero-copy { max-width: 590px; }
.eyebrow { margin: 0 0 22px; color: var(--terra); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero h1, .section h2, .family-section h2, .film-section h2, .process-section h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.035em; }
.hero h1 { margin: 0; color: var(--olive); font-size: clamp(66px, 8vw, 126px); line-height: .86; }
.hero-subtitle { margin: 24px 0 30px; color: var(--terra); font: italic 400 clamp(28px, 3vw, 44px)/1.1 Georgia, serif; }
.hero-intro { max-width: 520px; margin: 0; color: #4e504a; font: 400 clamp(18px, 1.6vw, 24px)/1.55 Georgia, serif; }
.hero-actions { display: flex; gap: 28px; align-items: center; margin-top: 42px; }
.button { display: inline-flex; align-items: center; gap: 22px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.button-primary { padding: 16px 20px; background: var(--olive); color: var(--white); }
.button-text { padding: 16px 0; color: var(--olive); border-bottom: 1px solid var(--olive-soft); }
.hero-art { margin: 0; }
.art-mat { padding: clamp(16px, 2vw, 30px); background: #e8e2d7; box-shadow: 0 28px 70px rgba(52, 49, 40, .16); transform: rotate(1deg); }
.art-mat img { aspect-ratio: 1.25; object-fit: cover; }
.hero-art figcaption { margin: 18px 0 0 4px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.motto { background: var(--olive); color: var(--white); min-height: 300px; display: grid; place-items: center; text-align: center; padding: 64px 24px; }
.motto p { margin: 0; font: italic 400 clamp(44px, 6vw, 86px)/1 Georgia, serif; }
.motto span { display: block; margin-top: 24px; color: #cdd5ca; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.section { width: min(1380px, calc(100% - 64px)); margin: 0 auto; padding: 140px 0; }
.section-heading { max-width: 760px; margin: 0 auto 70px; text-align: center; }
.section-heading.left { margin-left: 0; text-align: left; }
.section-heading h2, .family-section h2, .film-section h2, .process-section h2 { margin: 0; color: var(--olive); font-size: clamp(44px, 5vw, 76px); line-height: 1.02; }
.section-heading > p:last-child, .film-copy > p:nth-last-child(2) { margin: 26px auto 0; max-width: 680px; color: var(--muted); font: 400 19px/1.65 Georgia, serif; }
.section-heading.left > p:last-child { margin-left: 0; }

.featured-work { display: grid; grid-template-columns: 1.45fr .55fr; min-height: 620px; background: var(--white); }
.featured-image { min-height: 620px; padding: clamp(28px, 5vw, 78px); display: grid; place-items: center; background: #e7e2d7; }
.featured-image img { max-height: 610px; object-fit: contain; box-shadow: 0 24px 55px rgba(33, 36, 31, .17); }
.work-record { padding: clamp(44px, 5vw, 84px) clamp(32px, 4vw, 68px); display: flex; flex-direction: column; justify-content: center; }
.record-state { color: var(--terra); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.record-state span { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--terra); }
.work-record h3 { margin: 16px 0 34px; font: 400 34px/1.15 Georgia, serif; color: var(--olive); }
.work-record dl, .sketch-record dl { margin: 0; }
.work-record dl div, .sketch-record dl div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.work-record dt, .sketch-record dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.work-record dd, .sketch-record dd { margin: 0; font: 400 14px/1.45 Georgia, serif; }
.record-note { margin: 34px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.sketch-work { margin-top: 42px; display: grid; grid-template-columns: .48fr 1.52fr; background: #ded8cc; }
.sketch-record { padding: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.sketch-record h3 { margin: 0 0 34px; color: var(--olive); font: 400 44px/1 Georgia, serif; }
.sketch-record > p:last-child { margin: 30px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.sketch-image { padding: 42px; display: grid; place-items: center; background: #eae5dc; }
.sketch-image img { box-shadow: 0 20px 46px rgba(39, 42, 37, .13); }

.life-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 8vw, 140px); align-items: start; }
.portrait-stack { position: sticky; top: 36px; padding-bottom: 120px; }
.portrait { margin: 0; overflow: hidden; background: var(--paper-deep); }
.portrait-main img { aspect-ratio: .82; object-fit: cover; object-position: 28% center; filter: saturate(.78) contrast(1.02); }
.portrait-small { position: absolute; width: 45%; right: -7%; bottom: 20px; border: 12px solid var(--paper); }
.portrait-small img { aspect-ratio: .72; object-fit: cover; object-position: center; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 112px 1fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.timeline time { color: var(--terra); font: 500 16px/1.5 Georgia, serif; }
.timeline p { margin: 0; color: #4b4c47; font-size: 15px; line-height: 1.65; }
.source-note { margin: 30px 0 0; padding-left: 20px; border-left: 2px solid var(--terra); color: var(--muted); font-size: 12px; line-height: 1.65; }

.process-section { padding: 140px 32px; background: var(--white); }
.process-section .section-heading { margin-bottom: 80px; }
.process-grid { width: min(1380px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; align-items: start; }
.process-photo { margin: 0; }
.process-photo img { height: 100%; object-fit: cover; filter: saturate(.82); }
.process-photo figcaption { margin-top: 12px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.process-photo-1 { grid-column: 1 / span 7; }
.process-photo-1 img { aspect-ratio: 1.5; }
.process-photo-2 { grid-column: 9 / span 4; margin-top: 90px; }
.process-photo-2 img { aspect-ratio: 1; }
.process-photo-3 { grid-column: 1 / span 4; margin-top: 80px; }
.process-photo-3 img { aspect-ratio: 1.45; }
.process-photo-4 { grid-column: 5 / span 8; }
.process-photo-4 img { aspect-ratio: 1.48; }
.process-photo-5 { grid-column: 1 / span 8; margin-top: 20px; }
.process-photo-5 img { aspect-ratio: 1.5; }
.process-photo-6 { grid-column: 9 / span 4; margin-top: 110px; }
.process-photo-6 img { aspect-ratio: 1.15; }

.family-section { background: #d9d0c2; padding: 140px 32px; }
.family-inner { width: min(1050px, 100%); margin: 0 auto; }
.family-section h2 { max-width: 850px; }
.family-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 56px; }
.family-columns p { margin: 0; color: #41423d; font: 400 18px/1.75 Georgia, serif; }
.family-signature { margin: 50px 0 0; color: var(--terra); font: italic 400 25px/1.2 Georgia, serif; }

.archive-section { padding-bottom: 80px; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 22px; }
.archive-card { border-top: 1px solid var(--ink); padding-top: 14px; }
.archive-image { aspect-ratio: .86; overflow: hidden; background: var(--paper-deep); }
.archive-image img { height: 100%; object-fit: cover; filter: saturate(.72) contrast(.96); transition: transform .5s ease, filter .5s ease; }
.archive-card:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1); }
.archive-index { margin: 18px 0 12px; color: var(--terra); font-size: 10px; letter-spacing: .14em; }
.archive-card h3 { margin: 0; color: var(--olive); font: 400 22px/1.2 Georgia, serif; }
.archive-card > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.exhibitions-list { margin-top: 110px; display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; border-top: 1px solid var(--ink); padding-top: 28px; }
.exhibitions-list h3 { margin: 0; color: var(--olive); font: 400 36px/1.1 Georgia, serif; }
.exhibitions-list ol { list-style: none; margin: 0; padding: 0; }
.exhibitions-list li { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.exhibitions-list time { color: var(--terra); font: 400 15px/1.5 Georgia, serif; }
.exhibitions-list span { color: #4c4e48; font-size: 14px; line-height: 1.5; }

.film-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 80px; align-items: center; }
.film-copy h2 { margin: 0; }
.film-copy > p:nth-last-child(2) { margin-left: 0; }
.film-language { margin: 24px 0 0; color: var(--terra); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--olive); box-shadow: 0 24px 60px rgba(39, 42, 37, .18); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.site-footer { width: min(1380px, calc(100% - 64px)); margin: 80px auto 0; padding: 52px 0 58px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: end; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.site-footer p { margin: 6px 0 0; }
.footer-title { color: var(--olive); font: 400 25px/1 Georgia, serif; letter-spacing: 0; text-transform: none; }
.footer-language { text-align: center; }
.language-switcher { display: flex; gap: 8px; margin-top: 12px; }
.language-switcher a { display: grid; place-items: center; width: 38px; height: 34px; border: 1px solid transparent; border-radius: 18px; text-decoration: none; font-size: 18px; transition: border-color .2s, background .2s; }
.language-switcher a:hover, .language-switcher a:focus-visible { border-color: var(--olive-soft); }
.language-switcher a[aria-current="page"] { background: var(--white); border-color: var(--olive); }
.footer-rights { text-align: right; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 70px; }
  .hero-copy { max-width: 750px; }
  .hero-art { max-width: 820px; justify-self: end; }
  .featured-work, .sketch-work { grid-template-columns: 1fr; }
  .sketch-record { order: 2; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); row-gap: 60px; }
  .film-section { grid-template-columns: 1fr; }
  .film-copy { max-width: 720px; }
}

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

@media (max-width: 760px) {
  .site-header, .hero, .section, .site-footer { width: min(100% - 36px, 1380px); }
  .site-header { min-height: 88px; }
  .brand small, .main-nav { display: none; }
  .hero { min-height: auto; padding: 62px 0 72px; }
  .hero h1 { font-size: clamp(60px, 20vw, 88px); }
  .hero-subtitle { font-size: 30px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 4px; }
  .motto { min-height: 250px; }
  .section { padding: 92px 0; }
  .section-heading { margin-bottom: 48px; text-align: left; }
  .section-heading h2, .family-section h2, .film-section h2, .process-section h2 { font-size: 44px; }
  .section-heading > p:last-child { margin-left: 0; }
  .featured-image { min-height: auto; padding: 34px 24px; }
  .work-record, .sketch-record { padding: 42px 26px 50px; }
  .sketch-image { padding: 22px; }
  .life-section { grid-template-columns: 1fr; gap: 80px; }
  .portrait-stack { position: relative; top: 0; width: 90%; }
  .timeline li { grid-template-columns: 78px 1fr; gap: 16px; }
  .process-section { padding: 92px 18px; }
  .process-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
  .process-photo { grid-column: auto; margin-top: 0; }
  .process-photo img { aspect-ratio: 1.25; }
  .process-photo-2 img { aspect-ratio: 1; }
  .family-section { padding: 90px 18px; }
  .family-columns { grid-template-columns: 1fr; gap: 28px; }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-image { aspect-ratio: 1.18; }
  .exhibitions-list { grid-template-columns: 1fr; gap: 34px; margin-top: 80px; }
  .film-section { gap: 42px; }
  .site-footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-rights { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}