/* Rebecca Laserna — calm, natural one-pager (v4) */
:root{
  /* Smood's ground and ink. They run #ffffff on every section with no tinted bands, and set body
     text at #010101. Her geometry (radii, shadows, frosted panel) is untouched — shapes stay hers. */
  --paper:#ffffff; --grey:#f4f6fc; --ink:#010101; --muted:#5c5c5c;
  /* --grey is Smood's own .background-lightgray; they segment sections with it (and #e6e8ef darker) */
  --head-h:88px;   /* Smood's bar is generous; hers was 66px */
  /* Smood's brand teal is #27857d — verified on their home, /klinik/city and /klinik/hyllie
     (/kontakt and /behandling ship #26857d, a 1-point authoring variance on their side).
     --accent is #27837d: two points of green off their exact, the closest shade that still clears
     4.5:1 for the white text sitting on it, so every filled surface reads as their colour.
     --accent-deep is their EXACT hue (174.9deg) darkened only as far as needed, because teal used
     AS TEXT on cream/sand binds harder — their exact is just 4.18:1 as text and would fail. */
  --accent:#27837d; --accent-deep:#216f69;
  --line:rgba(47,44,37,.14);
  /* one radius scale (was 7 ad-hoc values), one border recipe, two honest shadows */
  --r-sm:8px; --r-md:14px;
  --shadow-soft:0 18px 40px -28px rgba(20,45,40,.45);
  --shadow-btn:0 6px 16px -10px rgba(20,55,50,.42);
  --shadow-btn-hover:0 10px 22px -12px rgba(20,55,50,.5);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1080px;
  --measure:33em;   /* one reading measure; resolves against each element's own size */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 14px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  /* NB: CSS math needs whitespace around "+" — without it the whole declaration is dropped and the
     fluid scale silently falls back to 16px (which is what shipped). rem-based so it stays in step
     with the rem sizes elsewhere, which resolve against html, not body. */
  font-size:clamp(1.15rem, 1.08rem + 0.32vw, 1.22rem);line-height:1.6;letter-spacing:var(--ls-body,normal);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:var(--ls-heading,-.01em);margin:0}
p{margin:0 0 1em}
a{color:inherit}
/* height:auto is load-bearing — without it the width/height HTML attributes set a fixed used
   height and any CSS aspect-ratio is ignored (that is what silently distorted the room photo) */
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
/* one micro-caps label style — was two sizes, two trackings and teal on non-clickable text */
.kicker,.contact__block h3{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;
  font-size:.84rem;font-weight:700;color:var(--muted)}
/* one focus language everywhere: an outward ring. On saturated fills a cream halo keeps it legible
   instead of the old inset-white ring, which read as a different system and vanished in forced colours. */
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;border-radius:var(--r-sm)}
@media (forced-colors:active){ :focus-visible{outline-color:Highlight} }

/* one clear, warm call to action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;
  background:var(--accent);color:#fff;text-decoration:none;padding:.85em 1.85em;border-radius:var(--r-sm);
  font-weight:700;font-size:1.12rem;letter-spacing:.01em;box-shadow:var(--shadow-btn);
  transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:var(--shadow-btn-hover)}
.btn--sm{min-height:44px;padding:.5em 1.15em;font-size:.92rem;border-radius:var(--r-sm);box-shadow:none}
.btn:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,255,255,.95)}
/* one inline-link recipe — the colour and underline were declared in three places, free to drift */
/* links are teal TEXT, so they take --accent-deep: the fill colour is only 4.28:1 on cream and
   3.48:1 on the sand band when used as text, which fails AA. The underline is text-decoration, not a
   border: a border inflates the line box (the price note ran a 36px pitch against 29.7px elsewhere)
   and floats ~12px clear of the glyphs, reading as a detached rule. */
.textlink,.price__note a,.contact__block a:not(.textlink){color:var(--accent-deep);
  text-decoration:underline;text-decoration-color:rgba(33,111,105,.5);
  text-decoration-thickness:1px;text-underline-offset:.16em}
.textlink:hover,.price__note a:hover,.contact__block a:not(.textlink):hover{text-decoration-color:currentColor}
.textlink{font-weight:600}

/* header — overlaid and transparent over the hero, turning solid on scroll (as smood.se and Max do).
   Measured decision: in the band the text actually occupies the photograph never drops below
   L=0.357, so INK type clears 8:1 there unaided, while white type would have needed a ~55% black
   band that would have killed the bright coastal hero. So the bar keeps ink type throughout and
   carries only a soft light wash to calm the photographic texture behind the words. */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--ink);
  transition:background .3s ease,box-shadow .3s ease}
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.34) 60%,rgba(255,255,255,0) 100%);
  transition:opacity .3s ease}
.site-head.scrolled{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.site-head.scrolled::before{opacity:0}
.site-head .wrap{display:flex;align-items:center;gap:.8rem 1.4rem;min-height:var(--head-h);
  justify-content:space-between;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto}
.brand img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.brand span{font-family:var(--sans);font-size:1.36rem;font-weight:600;letter-spacing:-.01em;line-height:1;
  color:inherit;transition:color .3s ease}
/* like Smood's logotype: teal and heavier while the bar is transparent, resolving to ink once solid */
.site-head:not(.scrolled) .brand span{color:var(--accent-deep);font-weight:700}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem);flex-wrap:nowrap;white-space:nowrap}
.nav a:not(.btn){text-decoration:none;color:inherit;font-size:.95rem;font-weight:500;opacity:.88;transition:opacity .2s}
.nav a:not(.btn):hover{opacity:1}

/* hero — bright image, text floats in a tidy frosted box aligned to the content column's left edge */
/* the hero sizes itself from min-height + the panel, so it must not also inherit the tall
   section padding (that pushed it to 760px and past the first viewport) */
.hero{position:relative;min-height:min(84vh,720px);display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--head-h) + clamp(1.25rem,3vh,2.25rem)) 0 clamp(1.75rem,4vh,3rem)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .wrap{width:100%}
.hero__inner{position:relative;z-index:2;max-width:600px;
  background:rgba(255,255,255,.90);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.6rem,2.8vw,2.3rem) clamp(1.9rem,3vw,2.5rem);
  box-shadow:var(--shadow-soft)}
/* .hero p (0,1,1) outranks .kicker (0,1,0), so the eyebrow had been rendering at body size and
   never at its intended .78rem — restate the size here to win, matching the eyebrow style used in Kontakt */
.hero .kicker{color:var(--muted);font-size:.84rem}
/* 'massageterapeut' is 15 characters — never break it mid-word; the panel is sized to hold it */
.hero h1{color:var(--ink);font-size:clamp(1.9rem,3.9vw,3.15rem);margin:.3em 0 .35em;text-wrap:balance;
  overflow-wrap:normal;hyphens:manual}
.hero p{color:var(--ink);font-size:clamp(1.15rem, 1.08rem + 0.36vw, 1.28rem);margin-bottom:1.35em;line-height:1.5}

/* vacation notice — ONE element: a single line in her voice at the top of the hero panel.
   The sun icon, the uppercase eyebrow, the internal booking link and the persistent header chip
   were four parts saying one thing; the hero's own booking button sits directly below this. */
/* --r-sm, not --r-md: in this scale --r-md is the large-surface token (the hero panel, the
   portrait, the room photo) and --r-sm is the small-filled token (.btn, .btn--sm, the header
   chip). A ~47px notice belongs to the second group, and this keeps the bar rhyming with the
   Boka tid button sitting directly beneath it rather than echoing the panel around it. */
.vacnote{margin:0 0 1.25rem;padding:.7rem .95rem;background:var(--accent);color:#fff;
  border-radius:var(--r-sm)}
.vacnote .vacnote__lead{margin:0;font-family:var(--serif);font-size:1.14rem;line-height:1.35;color:#fff}
.vacnote .vacnote__lead time{font-weight:700;white-space:nowrap}
.vacnote .vacnote__msg{margin:.35rem 0 0;font-size:.99rem;line-height:1.4;color:#fff}

/* sections */
section{padding:clamp(3.6rem,8vw,6.5rem) 0}
.section-title{font-size:clamp(1.85rem,3.1vw,2.4rem);margin-bottom:1.5rem}
.lead{color:var(--muted);font-size:clamp(1.15rem, 1.08rem + 0.36vw, 1.28rem)}
/* every run of secondary prose shares one measure instead of four independently chosen caps */
.lead,.contact__note,.price__note,.treat__caption,.about__grid p{max-width:var(--measure)}

/* about */
.about,.prices{background:var(--grey);padding-block:clamp(4rem,8.8vw,7.25rem)}
.about__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about__photo{border-radius:var(--r-md);width:100%;aspect-ratio:4/5;object-fit:cover;max-height:560px}
.creds{list-style:none;margin:1.7em 0 0;padding:0;display:grid;gap:.6em}
.creds li{position:relative;padding-left:1.7em;color:var(--ink)}
.creds li::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;border-radius:50%;background:var(--muted)}

/* treatments — quiet tags, deliberately NOT button-like (they carry no affordance);
   marked up as a real list so a screen reader announces the count and item boundaries */
/* Ten short labels want scanning DOWN a column, not across a row. As a 3-wide grid they filled
   row-major (3/3/3/1), so the eye read across unrelated methods and the tenth sat alone on its
   own row. Multi-column rather than grid-auto-flow:column because the list is a free-text field
   in edit.php: multicol re-balances at ANY item count, where a column-flow grid needs its row
   count hard-coded and spawns a stray implicit column the moment she adds an eleventh method.
   NB: .creds sets `gap:.6em`, and column-gap DOES apply to multicol, so it must be overridden
   here; the row rhythm moves from grid gap onto the items themselves. */
.treat__methods{display:block;columns:2;column-gap:clamp(1.5rem,3vw,2.75rem)}
.treat__methods li{break-inside:avoid;margin-bottom:.6em}
.treat__methods li:last-child{margin-bottom:0}
.treat__caption{color:var(--muted);font-size:1.02rem;margin:.9rem 0 0}
/* a <figure> keeps the UA's default "1em 40px" margin unless it is reset — that was pushing the
   photo 40px in from the grid every other element sits on. Ratio is declared once so it can't
   fight a max-height and render a different crop at every width. */
.treat__room{margin:3.2rem 0 0}
.treat__room img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 32%;border-radius:var(--r-md)}

/* prices — three even cards, single column on phones */

.price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 2rem;margin:0}
.price{border-top:1px solid var(--line);padding:1.35rem 0 0;text-align:left}
.price .dur{color:var(--muted);font-size:1.02rem;letter-spacing:.02em}
.price .amt{font-family:var(--serif);font-size:2.2rem;color:var(--ink);margin:.1em 0 0;font-variant-numeric:lining-nums}
.price__cta{margin-top:2.4rem}
.price__note{color:var(--muted);margin-top:2.8rem}
.price__note a{padding:.35em 0}

/* contact — two balanced columns (phone + email stacked | address) */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3.5rem;margin-top:2.2rem;align-items:start}
.contact__col{display:grid;gap:1.7rem;align-content:start}
.contact__block h3{margin-bottom:.5em}
.contact__block a:not(.textlink){display:inline-block;padding:.55em 0;min-height:44px}
.contact__block p{margin:0 0 .35em}
.contact__note{color:var(--muted);margin:.2rem 0 1.9rem}

/* footer — closes quietly in the same warm palette */
.site-foot{background:var(--paper);color:var(--muted);border-top:1px solid var(--line);
  padding:2.4rem 0;text-align:center;font-size:.97rem}

@media (max-width:760px){
  .about__grid{grid-template-columns:1fr}
  .treat__methods{columns:1}
  .about__photo{max-width:340px;margin:0 auto}
  .price__grid{grid-template-columns:1fr}
  .price{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .price .amt{margin:0}
  .contact__grid{grid-template-columns:1fr}
  .site-head .wrap{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.55rem;padding-bottom:.55rem}
  .nav a:not(.btn){display:none}
  .brand{flex:0 1 auto;flex-direction:row;gap:.5rem;min-width:0}
  .brand img{width:32px;height:32px}
  .brand span{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .treat__room img{aspect-ratio:4/3}
  .nav .btn--sm{padding:.6em 1em;font-size:.85rem;min-height:44px;white-space:nowrap}
}
@media (max-width:360px){
  .brand img{width:28px;height:28px}
  .brand span{font-size:.92rem}
  .nav .btn--sm{padding:.55em .85em;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }