/* =====================================================================
   base.css — structure shared by every site (Website Design Foundation)
   Carries grid, spacing, type scale, forms, header/footer mechanics and
   accessibility. Carries NO brand look: colours, fonts, edges and the
   signature element live in each client's theme.css.
   ===================================================================== */

/* ---------- Tokens the theme must set (fallbacks are neutral) ---------- */
:root{
  --c-bg:#fff; --c-ink:#1f2328; --c-muted:#59626b; --c-line:#d9dde1;
  --c-alt:#f2f4f5;            /* alternate section background */
  --c-dark:#1f2328; --c-on-dark:#fff;
  --c-accent:#1f2328; --c-on-accent:#fff;   /* primary action */
  --c-link:var(--c-ink);
  --c-ph:#e3e6e8;             /* placeholder tint */
  --font-display:Georgia,serif; --font-body:system-ui,sans-serif;
  --display-weight:600; --display-tracking:-.01em; --display-lh:1.08;
  --body-size:1.125rem; --body-lh:1.55;
  --radius:0px; --radius-btn:var(--radius);
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:clamp(20px,4vw,40px); --max:1200px;
  --section:clamp(56px,8vw,112px);
  /* type scale, ratio 1.25 from 18px; themes may override */
  --t-sm:.889rem; --t-base:1.125rem; --t-md:1.406rem; --t-lg:1.758rem; --t-xl:2.197rem; --t-2xl:2.747rem; --t-3xl:clamp(2.6rem,5.2vw,4.292rem);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 var(--body-size)/var(--body-lh) var(--font-body);font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--c-link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:var(--display-lh);margin:0 0 .45em;text-wrap:balance}
h1{font-size:var(--t-3xl)} h2{font-size:var(--t-2xl)} h3{font-size:var(--t-md);line-height:1.25}
p,ul,ol,dl,table,figure{margin:0 0 1em}
address{font-style:normal}
p{text-wrap:pretty}
small{font-size:var(--t-sm)}
:focus-visible{outline:3px solid var(--c-focus,var(--c-accent));outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:var(--s2);z-index:100;background:var(--c-ink);color:var(--c-bg);padding:var(--s2) var(--s4)}
.skip-link:focus{left:var(--s2)}
.num{font-variant-numeric:tabular-nums}
@media (max-width:640px){.hide-sm{display:none!important}}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--alt{background:var(--c-alt)}
.section--dark{background:var(--c-dark);color:var(--c-on-dark)}
.section--dark a:not(.btn){color:inherit}
.section--roomy{padding-block:calc(var(--section) * 1.3)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s7)}
/* column helpers: full width on mobile; on desktop .col-N spans N columns and
   .start-N sets where it begins (the two combine safely) */
[class*="col-"]{grid-column:1 / -1}
@media (min-width:900px){
  [class*="col-"]{grid-column:auto}
  .col-2{grid-column-end:span 2}.col-3{grid-column-end:span 3}.col-4{grid-column-end:span 4}.col-5{grid-column-end:span 5}
  .col-6{grid-column-end:span 6}.col-7{grid-column-end:span 7}.col-8{grid-column-end:span 8}.col-9{grid-column-end:span 9}
  .col-10{grid-column-end:span 10}.col-12{grid-column:1 / -1}
  .start-1{grid-column-start:1}.start-2{grid-column-start:2}.start-4{grid-column-start:4}.start-5{grid-column-start:5}
  .start-6{grid-column-start:6}.start-7{grid-column-start:7}.start-8{grid-column-start:8}.start-9{grid-column-start:9}
  .align-end{align-self:end}.align-center{align-self:center}
}
.measure{max-width:34em}           /* ~68 characters of body text */
.lead{font-size:var(--t-md);line-height:1.45}
.muted{color:var(--c-muted)}
.section--dark .muted{color:color-mix(in srgb,var(--c-on-dark) 72%,transparent)}

/* ---------- Actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:12px 24px;border:2px solid var(--c-accent);border-radius:var(--radius-btn);background:var(--c-accent);color:var(--c-on-accent);font:600 1rem/1.2 var(--font-body);text-decoration:none;cursor:pointer}
.btn:hover{background:color-mix(in srgb,var(--c-accent) 85%,#000);border-color:color-mix(in srgb,var(--c-accent) 85%,#000)}
.btn--quiet{background:transparent;color:inherit;border-color:currentColor}
.btn--quiet:hover{background:transparent;border-color:currentColor;text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6)}
.tel{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.utility{font-size:var(--t-sm);background:var(--c-dark);color:var(--c-on-dark)}
.utility .wrap{display:flex;justify-content:space-between;gap:var(--s4);min-height:36px;align-items:center}
.utility a{color:inherit}
.site-header{position:sticky;top:0;z-index:40;background:var(--c-bg);border-bottom:1px solid var(--c-line)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s6);min-height:80px}
.wordmark{font:var(--display-weight) 1.35rem/1 var(--font-display);color:var(--c-ink);text-decoration:none;letter-spacing:var(--display-tracking);display:inline-flex;flex-direction:column;gap:2px}
.wordmark small{font:500 .75rem/1.2 var(--font-body);letter-spacing:0;color:var(--c-muted)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0}
.nav a{color:var(--c-ink);text-decoration:none;font-weight:500;padding-block:var(--s2)}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
.header-action{flex:none}
.menu-btn{display:none;min-width:44px;min-height:44px;padding:0 var(--s4);border:1px solid var(--c-line);border-radius:var(--radius-btn);background:var(--c-bg);color:var(--c-ink);font:600 .9375rem/1 var(--font-body);cursor:pointer}
.nav .nav-action{display:none}
@media (max-width:1000px){
  .site-header .wrap{gap:var(--s3);min-height:64px}
  .menu-btn{display:inline-flex;align-items:center;margin-left:auto}
  .nav{position:fixed;inset:0;z-index:50;background:var(--c-bg);padding:96px var(--gutter) var(--s6);display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
  .nav.is-open{visibility:visible;opacity:1;transition:opacity .2s}
  .nav ul{flex-direction:column;gap:0}
  .nav li{border-bottom:1px solid var(--c-line)}
  .nav a{display:block;font:var(--display-weight) var(--t-lg)/1.2 var(--font-display);padding:var(--s4) 0}
  .nav .nav-action{display:flex;margin-top:auto}
  .menu-btn{position:relative;z-index:60}
  .header-action--hide-sm{display:none}
}

/* ---------- Placeholder (art-directed) ---------- */
.ph{position:relative;margin:0;aspect-ratio:var(--ph-ratio,4/3);background:var(--c-ph);overflow:hidden;display:flex;align-items:flex-end}
.ph span{display:block;max-width:34ch;margin:var(--s4);padding:var(--s3) var(--s4);background:color-mix(in srgb,var(--c-bg) 88%,transparent);color:var(--c-ink);font:400 .8125rem/1.45 var(--font-body)}
.ph span::before{content:"Foto: ";font-weight:700}
/* brief for a placeholder that is clipped into a shape: shown as a caption instead */
.ph-brief{font-size:.8125rem;font-style:italic}
figcaption{font-size:var(--t-sm);color:var(--c-muted);margin-top:var(--s3);max-width:44ch}
.section--dark figcaption{color:color-mix(in srgb,var(--c-on-dark) 72%,transparent)}

/* ---------- Lists with rules (offering, index) ---------- */
.rule-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line)}
.rule-list > li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:var(--s5);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--c-line)}
.rule-list h3{margin:0}
.rule-list p{margin:0;color:var(--c-muted)}
@media (max-width:700px){.rule-list > li{grid-template-columns:1fr;gap:var(--s2)}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:1rem}
th,td{text-align:left;vertical-align:top;padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--c-line)}
th{font-weight:600}
thead th{font-size:var(--t-sm);color:var(--c-muted);font-weight:500;border-bottom-color:var(--c-ink)}
td.num,th.num{text-align:right}
th:last-child,td:last-child{padding-right:0}
/* .table--stack: on small screens every row becomes a block; give each td a data-label */
@media (max-width:700px){
  .table--stack thead{display:none}
  .table--stack tr{display:block;padding:var(--s4) 0;border-bottom:1px solid var(--c-line)}
  .table--stack th,.table--stack td{display:block;border:0;padding:2px 0;text-align:left!important}
  .table--stack th{font-size:1.0625rem;margin-bottom:var(--s1)}
  .table--stack td[data-label]::before{content:attr(data-label) ": ";color:var(--c-muted)}
}

/* ---------- Quote ---------- */
.quote{margin:0}
.quote blockquote{margin:0 0 var(--s5);font:var(--display-weight) var(--t-xl)/1.25 var(--font-display);letter-spacing:var(--display-tracking);text-wrap:balance}
.quote figcaption{font-size:1rem;color:inherit}

/* ---------- Prose (text pages) ----------
   .prose        a single reading column (~68 characters)
   .prose-grid   reading column + a margin column for notes (.aside) and
                 room for .wide figures; use it instead of .prose, not with it */
.prose{max-width:34em}
.prose h2,.prose-grid h2{font-size:var(--t-xl);margin:var(--s8) 0 var(--s4)}
.prose h3,.prose-grid h3{margin:var(--s6) 0 var(--s3)}
.prose li,.prose-grid li{margin-bottom:.35em}
.prose-grid{display:grid;grid-template-columns:minmax(0,34em) minmax(0,1fr);column-gap:var(--s8)}
.prose-grid > *{grid-column:1}
.prose-grid > .aside{grid-column:2;grid-row:span 3;align-self:start;max-width:22em;font:400 var(--t-sm)/1.5 var(--font-body);color:var(--c-muted);border-top:1px solid var(--c-line);padding-top:var(--s3);margin-top:var(--s2)}
.prose-grid > .wide{grid-column:1 / -1;margin-block:var(--s7)}
@media (max-width:900px){.prose-grid{grid-template-columns:minmax(0,1fr)}.prose-grid > .aside{grid-column:1;grid-row:auto;margin-bottom:var(--s5)}}
.breadcrumb{font-size:var(--t-sm);color:var(--c-muted);margin-bottom:var(--s5)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.breadcrumb li+li::before{content:"/";margin-right:var(--s2);opacity:.6}
.breadcrumb a{color:inherit}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
label{font-weight:600;font-size:1rem}
.req{font-weight:400;color:var(--c-muted)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--c-ink);background:var(--c-bg);min-height:48px;padding:10px 14px;border:1.5px solid color-mix(in srgb,var(--c-ink) 35%,transparent);border-radius:min(var(--radius),8px);width:100%}
textarea{min-height:160px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--c-focus,var(--c-accent)) 40%,transparent);outline-offset:0;border-color:var(--c-focus,var(--c-accent))}
input[type=file]{padding:10px;min-height:auto}
.hint{font-size:var(--t-sm);color:var(--c-muted)}
.error{display:none;font-size:var(--t-sm);color:var(--c-error,#a4161a);font-weight:600}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--c-error,#a4161a)}
.field.has-error .error{display:block}
fieldset{border:0;margin:0 0 var(--s5);padding:0}
legend{font-weight:600;margin-bottom:var(--s2)}
.choice{display:flex;flex-wrap:wrap;gap:var(--s2)}
.choice label{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1.5px solid color-mix(in srgb,var(--c-ink) 25%,transparent);border-radius:min(var(--radius),8px);font-weight:500;cursor:pointer}
.choice input{width:auto;min-height:auto;margin:0;accent-color:var(--c-accent)}
.choice label:has(input:checked){border-color:var(--c-accent);box-shadow:inset 0 0 0 1px var(--c-accent)}
.form-note{font-size:var(--t-sm);color:var(--c-muted);margin-bottom:var(--s5)}
.form-done{display:none}
.form-done.is-visible{display:block}

/* ---------- Contact blocks ---------- */
.contact-stack > * + *{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--c-line)}
.contact-stack h2{font-size:var(--t-md);margin-bottom:var(--s3)}
.person{display:grid;grid-template-columns:96px 1fr;gap:var(--s4);align-items:center}
.person .ph{--ph-ratio:1;border-radius:50%}
.person .ph span{display:none}
.hours{font-size:1rem}
.hours td,.hours th{padding:var(--s2) 0;font-weight:400}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.is-today th,.hours tr.is-today td{font-weight:700}
.hours tr.is-today th::after{content:" (vandaag)";font-weight:400;color:var(--c-muted)}

/* ---------- Footer ---------- */
.site-footer{padding-block:var(--s8) var(--s6);font-size:1rem}
.site-footer .grid{row-gap:var(--s6)}
.site-footer h2{font:600 1rem/1.3 var(--font-body);letter-spacing:0;margin-bottom:var(--s3)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:var(--s2)}
.legal{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s6);font-size:var(--t-sm)}
.legal ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.legal li{margin:0}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}