/* Gjedrem Apartment – «Vertskapets brev» (skisse B, valgt 21.10.2026).
   Et hvitt brevark på et lyseblått skrivebord. Newsreader for brevteksten, Public Sans for alt praktisk,
   blått blekk for lenker og knapper. Brukes også av Karls app (admin-app/style.css er en symlenke hit). */
:root{
  --desk:#eef1f6;--sheet:#fff;--ink:#17223a;--blue:#2341a0;--blue-hover:#1a3285;--on-blue:#fff;
  --soft:#555e73;--rule:#d8dde8;--rule-strong:#aeb6c7;--wash:#e8edf7;--taken:#dfe3ea;--taken-ink:#6b7385;
  --ok:#1d6b3e;--bad:#a3261f;--wait:#fbf1d6;--wait-ink:#6a4a00;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(20px,6vw,72px);color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --desk:#0c1019;--sheet:#151b27;--ink:#e8ebf3;--blue:#a8b7ff;--blue-hover:#c3ceff;--on-blue:#0c1019;
  --soft:#a6aec0;--rule:#2b3447;--rule-strong:#4a5570;--wash:#1d2537;--taken:#252c3b;--taken-ink:#8a92a5;
  --ok:#74d69e;--bad:#ff958c;--wait:#3a311b;--wait-ink:#f3d58c;color-scheme:dark}}
:root[data-theme="dark"]{
  --desk:#0c1019;--sheet:#151b27;--ink:#e8ebf3;--blue:#a8b7ff;--blue-hover:#c3ceff;--on-blue:#0c1019;
  --soft:#a6aec0;--rule:#2b3447;--rule-strong:#4a5570;--wash:#1d2537;--taken:#252c3b;--taken-ink:#8a92a5;
  --ok:#74d69e;--bad:#ff958c;--wait:#3a311b;--wait-ink:#f3d58c;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--desk);color:var(--ink);font:400 16px/1.55 var(--sans)}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
img{display:block;width:100%;height:100%;object-fit:cover}
.muted{color:var(--soft)}.small{font-size:14px}
.skip{position:absolute;left:-999px;top:8px;background:var(--sheet);padding:8px 12px;z-index:60}.skip:focus{left:8px}
.proto{font-size:13px;color:var(--soft);text-align:center;padding:8px 16px}
.sum[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Arket */
.sheet{max-width:1080px;margin:0 auto 64px;background:var(--sheet);box-shadow:0 1px 0 var(--rule),0 30px 60px -40px rgba(23,34,58,.25)}
.head{display:flex;align-items:center;gap:10px 22px;padding:20px var(--gut);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.head .name{font:500 13px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;margin-right:auto}
.head nav{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:15px;order:3;flex:1 1 auto}
.head .lang{order:4}
.head nav a{color:var(--ink);text-decoration:none;padding:6px 0}
.head nav a:hover,.head nav a[aria-current=page]{color:var(--blue);text-decoration:underline}
.lang{display:flex;gap:2px}
.lang button{font:500 13px var(--sans);letter-spacing:.06em;color:var(--soft);background:none;border:0;padding:8px 6px;min-width:36px;min-height:36px;cursor:pointer}
.lang button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.head .book{font-weight:600;font-size:15px;white-space:nowrap}
@media (min-width:900px){.head nav{order:0;flex:0 1 auto;margin-right:8px}.head .lang{order:0}.head .book{order:1}}

/* Brevet */
.letter{display:grid;grid-template-columns:1fr;padding:0 var(--gut) 56px}
.letter>*{min-width:0}
.opening{padding:44px 0 32px}
.dateline{font-size:14px;color:var(--soft);margin:0 0 22px}
h1{font:300 clamp(2.7rem,9vw,5.8rem)/.98 var(--serif);letter-spacing:-.025em;margin:0}
h1 em,h2 em{font-style:italic}
.lede{font:400 21px/1.5 var(--serif);color:var(--soft);margin:22px 0 0;max-width:34ch}
figure{margin:0}
.ph{background:var(--wash);overflow:hidden}
.wide{margin:8px calc(-1 * var(--gut)) 36px}.wide .ph{aspect-ratio:4/3}
.wide figcaption{padding-left:var(--gut);padding-right:var(--gut)}
figcaption{font:italic 400 15px/1.4 var(--serif);color:var(--soft);padding-top:10px}
figcaption .old{font:normal 500 12px/1 var(--sans);letter-spacing:.04em;color:var(--wait-ink);background:var(--wait);padding:3px 7px;border-radius:2px;margin-left:6px;white-space:nowrap;display:inline-block;vertical-align:1px}
.body p,.body li{font:400 19px/1.6 var(--serif)}
.body p{margin:0 0 20px}
.body h2{font:400 clamp(1.6rem,4vw,2.1rem)/1.15 var(--serif);margin:36px 0 14px;letter-spacing:-.01em}
.greet{font-size:22px!important}
.note{font-size:15px;color:var(--soft);border-top:2px solid var(--ink);padding-top:12px;align-self:start;margin:4px 0 32px}
.note h3{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.note dl{margin:0}.note dt{color:var(--ink);font-weight:500;margin-top:10px}.note dd{margin:0}
.note ul{list-style:none;padding:0;margin:0}.note li,.body .note li{padding:7px 0;border-bottom:1px solid var(--rule);font:15px/1.4 var(--sans)}
.pair,.trio{display:grid;grid-template-columns:1fr;gap:20px;margin:12px 0 36px}
.pair .ph,.trio .ph{aspect-ratio:4/3}
.trio .tall .ph{aspect-ratio:4/3}
.rules{padding-left:22px;margin:0 0 24px}.rules li{margin-bottom:6px}
.body .sign{font:italic 300 3.2rem/1 var(--serif);margin:24px 0 56px}
.ps{border-top:1px solid var(--rule);padding-top:32px}
.ps h2{font:400 1.6rem/1.2 var(--serif);margin:0 0 6px}
.ps h2 b{font-weight:500;font-style:italic}
.ps>p{color:var(--soft);font:16px/1.55 var(--sans)!important;margin:0 0 20px}
.price{display:grid;grid-template-columns:1fr auto;margin:0;font:400 20px/1.4 var(--serif);font-variant-numeric:tabular-nums}
.price dt,.price dd{padding:10px 0;border-bottom:1px dotted var(--rule-strong);margin:0}
.price dd{text-align:right}
.price small{font:13px var(--sans);color:var(--soft)}
.reply{background:var(--wash);padding:56px var(--gut)}
.reply h2{font:300 clamp(2.1rem,6vw,3.4rem)/1.05 var(--serif);letter-spacing:-.015em;margin:0 0 10px}
.reply p{color:var(--soft);margin:0 0 26px;max-width:56ch}
.after{display:grid;grid-template-columns:1fr;gap:44px;padding:56px var(--gut)}
.after h2{font:400 1.7rem/1.2 var(--serif);margin:0 0 16px}
details{border-top:1px solid var(--rule);padding:4px 0}
details:last-child{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font:500 19px/1.4 var(--serif);padding:12px 28px 12px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:10px;font:300 22px/1 var(--sans);color:var(--blue)}
details[open] summary::after{content:"–"}
details p{margin:0 0 14px;color:var(--soft)}
.map{width:100%;min-height:300px;border:0;filter:saturate(.4);display:block;background:var(--wash)}
.foot{border-top:1px solid var(--rule);padding:28px var(--gut) 36px;font-size:14px;color:var(--soft);display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot a{padding:4px 0;display:inline-block}
.big{font:400 clamp(1.8rem,6vw,2.6rem)/1.15 var(--serif)!important;margin:0 0 6px!important}
.big a{text-decoration:none}.big a:hover{text-decoration:underline}
.draft{background:var(--wait);color:var(--wait-ink);font:500 14px/1.45 var(--sans);padding:10px 14px;border-radius:3px;margin:0 0 28px}

/* Knapper og skjema */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid var(--blue);border-radius:3px;background:var(--blue);color:var(--on-blue);font:600 16px var(--sans);cursor:pointer;text-decoration:none;gap:8px}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:var(--on-blue);text-decoration:none}
.btn-ghost{background:none;color:var(--blue)}
.btn-ghost:hover{background:var(--wash);color:var(--blue)}
.btn:disabled{background:var(--taken);border-color:var(--taken);color:var(--taken-ink);cursor:default}
label{display:block;font-weight:500;margin:16px 0 0}
label .opt{font-weight:400;color:var(--soft)}
input:not([type=checkbox]):not([type=radio]),select,textarea{font:inherit;font-size:17px;padding:11px 12px;border:1px solid var(--rule-strong);border-radius:3px;width:100%;margin-top:6px;color:var(--ink);background:var(--sheet)}
textarea{resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:20px;height:20px;flex:none;margin:2px 0 0}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.choice{display:grid;gap:12px;border:0;padding:0;margin:8px 0 0}
.choice legend{font:400 1.5rem/1.2 var(--serif);margin-bottom:10px;padding:0}
.choice label{display:flex;gap:14px;align-items:flex-start;margin:0;padding:16px;background:var(--sheet);border:1px solid var(--rule-strong);border-radius:3px;cursor:pointer;font-weight:400;color:var(--soft)}
.choice label:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.choice b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.err{color:var(--bad);margin:14px 0 0;min-height:1.4em;font-weight:500}

/* Kalender (felles for bestilling og Karls app) */
.legend{display:flex;gap:8px 20px;font-size:14px;color:var(--soft);margin:0 0 18px;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px;border:1px solid var(--rule-strong);background:var(--sheet)}
.legend .l-taken{background:var(--taken);border-color:var(--taken)}
.legend .l-block{background:repeating-linear-gradient(135deg,var(--taken) 0 3px,var(--sheet) 3px 6px);border-color:var(--rule-strong)}
.legend .l-sel{background:var(--blue);border-color:var(--blue)}
.cal{display:grid;grid-template-columns:1fr;gap:16px}
.month{background:var(--sheet);border:1px solid var(--rule);padding:16px 12px}
.month h4{font:italic 400 21px/1 var(--serif);margin:0 0 12px;text-transform:capitalize}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dow{font-size:12px;color:var(--soft);text-align:center;padding-bottom:4px;text-transform:lowercase}
.d{min-height:44px;aspect-ratio:1;border:0;background:none;font:400 15px var(--sans);color:var(--ink);cursor:pointer;border-radius:50%;padding:0;font-variant-numeric:tabular-nums}
.d:hover:not(:disabled):not(.sel){background:var(--wash);box-shadow:inset 0 0 0 1px var(--blue)}
.d:disabled{color:var(--taken-ink);opacity:.55;cursor:default}
.d.taken{background:var(--taken);color:var(--taken-ink);border-radius:0;text-decoration:line-through;opacity:1}
.d.blocked{background:repeating-linear-gradient(135deg,var(--taken) 0 4px,var(--sheet) 4px 8px);color:var(--ink);border-radius:0;opacity:1}
.d.range{background:var(--wash);border-radius:0}
.d.sel{background:var(--blue);color:var(--on-blue);opacity:1}

/* Status, varsel */
.status{display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.04em;padding:6px 10px;border-radius:2px;border:1px solid currentColor}
.st-awaiting_payment,.st-awaiting_approval{color:var(--wait-ink);background:var(--wait);border-color:transparent}
.st-confirmed{color:var(--ok)}.st-rejected,.st-cancelled{color:var(--bad)}
.toast{position:fixed;left:16px;right:16px;bottom:calc(100px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;background:var(--ink);color:var(--sheet);padding:14px 18px;border-radius:4px;z-index:70;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Bestilling */
.progress li,.body .progress li{font:14px/1.4 var(--sans)}
.progress{display:flex;flex-wrap:wrap;gap:4px 10px;list-style:none;padding:0;margin:26px 0 0;font-size:14px;color:var(--soft)}
.progress li+li::before{content:"·";margin-right:10px;color:var(--rule-strong)}
.progress [aria-current=step]{color:var(--ink);font-weight:600}
.progress .past{color:var(--ink)}
.booking{display:grid;grid-template-columns:1fr;gap:28px;padding:36px var(--gut) 48px;background:var(--wash)}
.booking h2{font:400 clamp(1.6rem,4.5vw,2.1rem)/1.15 var(--serif);margin:0 0 8px}
.pane>p.muted{margin:0 0 18px}
.opts{display:grid;gap:4px;margin-top:20px}
.sum{background:var(--sheet);border:1px solid var(--rule);padding:22px 22px 18px;align-self:start}
.sum h3{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.sum .range{font:italic 400 21px/1.3 var(--serif);margin:0 0 4px}
.sum dl{display:grid;grid-template-columns:1fr auto;margin:14px 0 0;gap:8px 0;font-variant-numeric:tabular-nums}
.sum dt{color:var(--soft)}.sum dd{margin:0;text-align:right}
.sum .tot{border-top:1px solid var(--ink);padding-top:10px;margin-top:4px;font-weight:600;color:var(--ink)}
.actions{position:sticky;bottom:0;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--wash);border-top:1px solid var(--rule);padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));margin:0 calc(-1 * var(--gut))}
.actions .btn{flex:1 1 auto}
.actions .tally{flex:1 0 100%;font-variant-numeric:tabular-nums;font-size:15px}
.actions .tally b{font-size:17px}
.receipt{border:1px solid var(--rule);padding:28px clamp(18px,4vw,36px);background:var(--sheet)}
.receipt h2{font:300 clamp(2rem,6vw,2.8rem)/1.05 var(--serif)!important;margin:14px 0 16px!important}
.receipt p{font:400 19px/1.6 var(--serif);margin:0 0 16px}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:20px 0;font-variant-numeric:tabular-nums}
.receipt dt{color:var(--soft)}.receipt dd{margin:0}
.receipt .ref{font:600 20px var(--sans);letter-spacing:.04em}
.receipt .sign{font:italic 300 2.6rem/1 var(--serif);margin:20px 0 4px}

@media (min-width:600px){
  .pair{grid-template-columns:1.25fr 1fr}.trio{grid-template-columns:repeat(3,1fr)}
  .cal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide .ph{aspect-ratio:21/10}
}
@media (min-width:900px){
  .letter{grid-template-columns:200px minmax(0,600px) 1fr;column-gap:56px;padding-bottom:72px}
  .letter>*{grid-column:2}
  .letter>.wide{grid-column:1/-1;margin-left:0;margin-right:0}.wide figcaption{padding:10px 0 0}
  .wide .ph{aspect-ratio:21/9}
  .letter>.note{grid-column:1;grid-row:span 3;margin:8px 0 0}
  .letter>.pair,.letter>.trio{grid-column:2/4}
  .opening{padding:72px 0 40px}
  .body p,.body li{font-size:21px}
  .after{grid-template-columns:1fr 1fr;gap:56px;padding:64px var(--gut)}
  .reply{padding:64px var(--gut)}
  .booking{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .sum{position:sticky;top:20px}
  .actions{position:static;border-top:0;background:none;padding:24px 0 0;margin:0}
  .actions .tally{display:none}.actions .btn{flex:0 0 auto}
  .sheet{margin-top:0}
}
@media (min-width:1100px){.booking .cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{
  body{background:#fff;color:#000}.proto,.head nav,.lang,.head .book,.actions,.foot nav,.progress,.sum{display:none!important}
  .sheet{box-shadow:none;margin:0}.receipt{border:0;padding:0}
}