/* where-to-stay - extracted from the blade 2026-08-18.
   Linked in place of the old inline <style> so document order, and therefore
   the cascade, is unchanged. Verified with a computed-style fingerprint of
   all 516 elements at 390px and 1440px: zero differences. */
    /* ── Section headings ─────────────────────────────────────────────────
       Bigger, tighter, with a diamond on the rule. Sizes stay in rem/clamp so
       the site's font resizer still moves them. */
    .page-wts .wts-head{max-width:46rem;margin:0 auto var(--space-9);text-align:center}
    .page-wts .wts-head__rule{position:relative;display:block;width:5rem;height:1px;
      background:linear-gradient(90deg,transparent,#c4a052,transparent);margin:0 auto var(--space-4)}
    .page-wts .wts-head__rule::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;
      transform:translate(-50%,-50%) rotate(45deg);background:#c4a052}
    .page-wts .wts-head__eyebrow{display:block;font-family:var(--sans);font-size:var(--text-xs);
      letter-spacing:.3em;text-transform:uppercase;color:#784356;margin-bottom:var(--space-3)}
    .page-wts .wts-head__title{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.4rem);
      line-height:1.08;letter-spacing:-.012em;margin:0 0 var(--space-4);text-wrap:balance}
    .page-wts .wts-head__title em{font-style:italic;color:#784356}
    .page-wts .wts-head__lead{color:var(--ink-mute);line-height:1.75;margin:0;
      font-size:1.05rem;text-wrap:pretty}

    /* Editorial intro: a drop cap, because this is the paragraph that sets
       the tone for the whole guide.

       The body is LEFT-aligned even though the heading above it is centred.
       A drop cap floats to the left edge of its paragraph box, so against
       centred text the L sat marooned with the sentence starting somewhere in
       the middle of the line. A drop cap anchors the first line or it does not
       work at all. Heading and rule stay centred; only the prose moves. */
    .page-wts .editorial-intro--centred .editorial-intro__paragraph,
    .page-wts .editorial-intro--centred .editorial-intro__cms-body{
      text-align:left;max-width:62ch;margin-inline:auto}
    /* .16rem, not .5rem: the serif L already carries its own right side-bearing,
       so half a rem on top of that left a visible gap and the word read as
       "L landudno". Tight enough that the cap and the lowercase l pair up. */
    .page-wts .editorial-intro__paragraph:first-of-type::first-letter{
      font-family:var(--serif);float:left;font-size:3.4rem;line-height:.82;
      padding:.28rem .16rem 0 0;color:#784356}

    /* ── The areas ────────────────────────────────────────────────────────
       Editorial grid rather than five equal boxes: the first two run wide,
       the remaining three sit beneath in a lighter row. Numerals are CSS
       counters, so the markup — and the heading order search engines read —
       is untouched. */
    .page-wts .wts-areas{display:grid;gap:var(--space-7);counter-reset:wtsarea;
      grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));max-width:76rem;margin:0 auto}
    .page-wts .wts-area{counter-increment:wtsarea;display:flex;flex-direction:column;
      transition:transform .5s cubic-bezier(.2,.6,.2,1)}
    .page-wts .wts-area:hover{transform:translateY(-4px)}
    .page-wts .wts-area__img{position:relative;overflow:hidden;border-radius:3px;
      aspect-ratio:4/3;margin-bottom:var(--space-4);
      box-shadow:0 1px 2px rgba(28,24,18,.06)}
    .page-wts .wts-area__img img,.page-wts .wts-area__img picture{width:100%;height:100%;
      object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
    .page-wts .wts-area:hover .wts-area__img img{transform:scale(1.06)}
    .page-wts .wts-area__img::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(to top,rgba(28,24,18,.42) 0%,rgba(28,24,18,.06) 42%,transparent 72%)}
    /* the gold hairline draws itself across on hover */
    .page-wts .wts-area__text{position:relative;border-top:1px solid rgba(196,160,82,.35);
      padding-top:var(--space-4)}
    .page-wts .wts-area__text::after{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
      background:#c4a052;transition:width .6s cubic-bezier(.2,.6,.2,1)}
    .page-wts .wts-area:hover .wts-area__text::after{width:3.5rem}
    .page-wts .wts-area__text::before{content:counter(wtsarea,decimal-leading-zero);
      font-family:var(--serif);font-size:var(--text-xs);letter-spacing:.18em;color:#c4a052;
      font-variant-numeric:lining-nums;display:block;margin-bottom:var(--space-2)}
    .page-wts .wts-area__name{font-family:var(--serif);font-size:1.4rem;line-height:1.2;
      margin:0 0 var(--space-2)}
    .page-wts .wts-area__body{line-height:1.75;margin:0 0 var(--space-3);color:var(--ink)}
    .page-wts .wts-area__for{font-family:var(--sans);font-size:var(--text-xs);letter-spacing:.14em;
      text-transform:uppercase;color:#784356;margin:0;padding-top:var(--space-2);
      border-top:1px solid rgba(120,67,86,.12)}

    /* ── Hotel / guest house / B&B — a proper glossary ─────────────────── */
    .page-wts .wts-types{max-width:56rem;margin:0 auto;display:grid;gap:0}
    .page-wts .wts-type{display:grid;gap:var(--space-2);padding:var(--space-5) 0;
      border-top:1px solid rgba(120,67,86,.12);transition:background .3s ease}
    .page-wts .wts-type:last-child{border-bottom:1px solid rgba(120,67,86,.12)}
    .page-wts .wts-type:hover{background:rgba(196,160,82,.05)}
    .page-wts .wts-type__name{font-family:var(--serif);font-size:1.45rem;line-height:1.2;
      color:#784356;margin:0;position:relative}
    .page-wts .wts-type__body{margin:0;line-height:1.75}
    @media (min-width:52rem){
      .page-wts .wts-type{grid-template-columns:14rem minmax(0,1fr);gap:var(--space-6);
        align-items:baseline;padding:var(--space-6) 0}
    }

    /* ── Six questions — the numeral is the furniture ──────────────────── */
    .page-wts .wts-asks{max-width:62rem;margin:0 auto;padding:0;list-style:none;counter-reset:ask;
      display:grid;gap:var(--space-7)}
    .page-wts .wts-ask{counter-increment:ask;position:relative;padding-left:4.25rem}
    .page-wts .wts-ask::before{content:counter(ask,decimal-leading-zero);position:absolute;
      left:0;top:-.35rem;font-family:var(--serif);font-size:2.75rem;line-height:1;
      color:rgba(196,160,82,.42);font-variant-numeric:lining-nums;
      transition:color .4s ease}
    .page-wts .wts-ask:hover::before{color:#c4a052}
    .page-wts .wts-ask__q{font-family:var(--serif);font-size:1.3rem;line-height:1.3;
      margin:0 0 var(--space-2)}
    .page-wts .wts-ask__a{margin:0;line-height:1.75;color:var(--ink-mute)}
    @media (min-width:60rem){
      .page-wts .wts-asks{grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-9)}
    }

    /* ── Where we fit — the one section allowed to feel like a brochure ── */
    .page-wts .wts-band{position:relative;
      background:linear-gradient(170deg,#f9f2e8 0%,#f4e9db 55%,#efe0cd 100%)}
    .page-wts .wts-band::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(196,160,82,.7),transparent)}
    .page-wts .wts-band__split{display:grid;gap:var(--space-8);align-items:start}
    .page-wts .wts-band__lead .wts-head__title{text-align:left}
    .page-wts .wts-band__body{line-height:1.8;margin:0 0 var(--space-5);font-size:1.05rem}
    .page-wts .wts-band__cta{display:inline-block;font-family:var(--sans);font-size:var(--text-xs);
      letter-spacing:.18em;text-transform:uppercase;color:#784356;
      border-bottom:1px solid currentColor;padding-bottom:3px;text-decoration:none;
      transition:color .3s ease,letter-spacing .3s ease}
    .page-wts .wts-band__cta:hover{color:#5a2f3f;letter-spacing:.22em}
    /* offset gold frame behind the photo */
    /* Portrait, not letterbox. The lead column was 354px shorter than the list
       beside it, leaving a hole under a 3:2 crop — and this is a doorway shot,
       which a tall frame suits anyway. Growing the left beats shrinking the right. */
    .page-wts .wts-band__img{position:relative;margin-top:var(--space-7);overflow:visible;
      aspect-ratio:4/5;border-radius:3px}
    .page-wts .wts-band__img::before{content:'';position:absolute;inset:auto -.75rem -.75rem auto;
      width:60%;height:60%;border-right:1px solid rgba(196,160,82,.65);
      border-bottom:1px solid rgba(196,160,82,.65);border-radius:0 0 3px 0;pointer-events:none}
    /* !important on object-fit: x-placeholder-image emits its own inline style,
       which otherwise wins and letterboxes the crop. */
    .page-wts .wts-band__img img{width:100%;height:100%;object-fit:cover!important;display:block;
      border-radius:3px;position:relative;z-index:1}

    /* Modelled on .wlk-kit (walking page, "Your Base"): marker in the gutter,
       serif title, one plain line under it. The two boxes this replaces were
       separated only by background opacity, so the yes and the no read alike. */
    .page-wts .wts-fit{display:grid;gap:var(--space-8)}
    .page-wts .wts-fit__label{display:block;font-family:var(--sans);font-size:var(--text-xs);
      letter-spacing:.2em;text-transform:uppercase;color:#784356;margin:0 0 var(--space-5);
      padding-bottom:var(--space-3);border-bottom:1px solid rgba(196,160,82,.4)}
    .page-wts .wts-fit__group--not .wts-fit__label{color:var(--ink-mute);
      border-bottom-color:rgba(120,67,86,.14)}
    .page-wts .wts-fit__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
    .page-wts .wts-fit__list li{position:relative;padding-left:var(--space-7)}
    .page-wts .wts-fit__list li::before{content:'\2713';position:absolute;left:0;top:.12em;
      font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--gold)}
    .page-wts .wts-fit__group--not .wts-fit__list li::before{content:'\2715';
      color:var(--ink-mute);opacity:.55}
    .page-wts .wts-fit__list h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;
      line-height:1.25;margin:0 0 .3rem;color:inherit}
    .page-wts .wts-fit__list p{margin:0;line-height:1.65;font-size:.97rem;color:var(--ink-mute)}

    @media (min-width:60rem){
      /* Lead gets the wider column. It was 1fr / 1.05fr, so the supporting list
         was 24px WIDER than the heading it hangs off — backwards. */
      .page-wts .wts-band__split{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:var(--space-10)}

      /* No sticky lead here (unlike .wlk-split__lead on the walking page) —
         the portrait photo brought the two columns level, so there is nothing
         for a sticky lead to solve and it only added movement. */

      /* Deliberately NOT 1fr 1fr — this sits in the narrower half of the split,
         so side-by-side wrapped every line three deep. Stacked, they read. */

      /* Five areas, not laid out as five identical boxes: two lead the row,
         three follow. Purely visual — the source order is unchanged. */
      .page-wts .wts-areas{grid-template-columns:repeat(6,minmax(0,1fr))}
      .page-wts .wts-area{grid-column:span 2}
      .page-wts .wts-area:nth-child(1),
      .page-wts .wts-area:nth-child(2){grid-column:span 3}
      .page-wts .wts-area:nth-child(1) .wts-area__img,
      .page-wts .wts-area:nth-child(2) .wts-area__img{aspect-ratio:16/10}
      .page-wts .wts-area:nth-child(1) .wts-area__name,
      .page-wts .wts-area:nth-child(2) .wts-area__name{font-size:1.75rem}
    }

    /* Motion is a courtesy, not a requirement. */
    @media (prefers-reduced-motion:reduce){
      .page-wts .wts-area,.page-wts .wts-area__img img,.page-wts .wts-area__text::after,
      .page-wts .wts-ask::before,.page-wts .wts-band__cta,.page-wts .wts-type{transition:none}
      .page-wts .wts-area:hover{transform:none}
      .page-wts .wts-area:hover .wts-area__img img{transform:none}
    }