/* "There's room for you here." - replica of the client's 1672x941 comp.
   One inpainted plate carries the art (the rounded card, the sunset photo blending into the
   green panel and contour lines); the baked marks are cleared below.
   Every word and the Book Now pill are live on a container-query artboard.
   Positions are comp px as % of 1672/941, sizes in cqw. */
@font-face{font-family:"NcDisplay";src:url("../assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url("../assets/fonts/fraunces-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:BkBody;src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HxNewsreader;src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.bk *{box-sizing:border-box}
.bk img{max-width:100%;height:auto;display:block}
.bk{--bk-paper:#fefcf8;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  --wrap:1320px;--pad:clamp(22px,5vw,68px);--bk-radius:22px;--bk-height:430px;background:var(--bk-paper)}
/* On the host pages (.c12) this follows the sign-off (.sx, which closes the article): a flat warm paper (242,234,223) that ends in
   clamp(86px,10vw,152px) of padding. The plate is transparent outside the card (its shadow is alpha),
   so this section paints the page paper (244,240,230) and ramps the sign-off's paper into it across
   the plate's blank band above the card (173/1672 of the canvas width). Quintic smootherstep at
   tenths, explicit rgb. The negative top margin restores the shared canvas-to-card gap. */
.c12 .bk{
  --bk-band:calc(0.1035 * (min(100vw,1320px) - 2 * clamp(22px,5vw,68px)));
  margin-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) - clamp(86px,10vw,152px) - var(--bk-band));
  padding-block:var(--bk-band) var(--bk-band);
  background:
    linear-gradient(to bottom,
      rgb(244 235 222) 0%,
      rgb(244 235.04 222.07) 10%,
      rgb(244 235.29 222.46) 20%,
      rgb(244 235.82 223.3) 30%,
      rgb(244 236.59 224.54) 40%,
      rgb(244 237.5 226) 50%,
      rgb(244 238.41 227.46) 60%,
      rgb(244 239.18 228.7) 70%,
      rgb(244 239.71 229.54) 80%,
      rgb(244 239.96 229.93) 90%,
      rgb(244 240 230) 100%)
      top/100% var(--bk-band) no-repeat,
    rgb(244 240 230);
}
.bk__wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
/* Match the referenced closing panel: the entire inner wrap is the visible card.
   Crop 22 source pixels inside the plate's baked 70px corners, then let CSS
   draw the smaller responsive corners. The source art remains unchanged. */
.bk__canvas{position:relative;width:100%;height:var(--bk-height);min-height:430px;container-type:inline-size;overflow:hidden;border-radius:var(--bk-radius);background:#0f2f22;
  box-shadow:0 22px 44px -24px rgb(20 45 31 / .38),0 7px 16px -9px rgb(20 45 31 / .24),0 1px 2px rgb(20 45 31 / .12);
  --bk-art-width:max(108.430610cqw,calc(var(--bk-height) * 3.034482759))}
.bk__canvas>*{position:absolute;margin:0;z-index:2;max-width:none}
/* Center the live content as one group. The small lower inset balances the
   headline's visible letters, which start below the top of its line box. */
.bk .bk__content{left:52.75%;right:4%;top:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  --bk-head-size:6.3cqw;--bk-accent-size:6.64cqw;
  padding-block-end:calc(.095 * var(--bk-head-size));--bk-message-gap:clamp(18px,2.84cqw,34px);--bk-action-gap:clamp(26px,3.2cqw,38px)}
.bk .bk__content>*{position:static;margin:0;max-width:none}
.bk .bk__content>.bk__h,.c12 main .bk .bk__content>.bk__h{margin-block:0 var(--bk-message-gap)}
.bk .bk__content>.bk__sub{margin-block:0 var(--bk-action-gap)}
.bk .bk__content>.bk__btn{margin:0}
/* A fine lit edge and shaded lower rim give the panel a subtle physical surface. */
.bk__canvas::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgb(255 246 224 / .24),inset 1px 0 0 rgb(255 246 224 / .1),inset 0 -2px 0 rgb(5 22 14 / .24),inset -1px 0 0 rgb(5 22 14 / .14)}
.bk .bk__art{inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bk .bk__plate{position:absolute;left:50%;top:50%;width:var(--bk-art-width);max-width:none;height:auto;transform:translate(-50%,-50%);pointer-events:none;user-select:none}
/* Clear the baked three-pine mark and its divider at source x884–979,
   y213–273. Follow the nearby green gradient and soften the patch edges. */
.bk .bk__art::after{
  content:"";position:absolute;left:calc(50% + .020334928 * var(--bk-art-width));top:calc(50% - .158791866 * var(--bk-art-width));
  width:calc(.071770335 * var(--bk-art-width));height:calc(.04784689 * var(--bk-art-width));z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(18 49 36 / 0),rgb(18 49 36 / .15)),linear-gradient(to right,#1c3b2a,#173626 50%,#133324);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.bk a{color:inherit;text-decoration:none}
/* The lower mountain mark and divider are baked into the plate at
   x1214–1309 / y598–651. Match their plain green field and feather the
   surrounding few pixels; the mobile photo crop already excludes them. */
@media (min-width:901px){
  /* Follow the source plate so the photo-to-panel boundary is a soft arc.
     The overlay rejoins the original green before the contour artwork. */
  .bk .bk__art::before{content:"";position:absolute;left:50%;top:50%;width:var(--bk-art-width);aspect-ratio:1672 / 941;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
    background:url("art/curved-fade-v2.svg") center / 100% 100% no-repeat}
  .bk__canvas::before{
    content:"";position:absolute;left:calc(50% + .22188995 * var(--bk-art-width));top:calc(50% + .072067081 * var(--bk-art-width));
    width:calc(.06698565 * var(--bk-art-width));height:calc(.04066986 * var(--bk-art-width));z-index:1;pointer-events:none;
    background:#123124;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}

/* --- headline: the "Every Part" Fraunces 600 face, at a quieter size.
   "you" shares the surrounding headline's regular NcDisplay face.
   Retain the spacing of the remaining content in the green panel. --- */
.bk .bk__h,.c12 main .bk .bk__h{text-wrap:nowrap;white-space:nowrap;font-family:"NcDisplay",Georgia,serif;font-size:var(--bk-head-size);font-weight:600;font-style:normal;color:#fff;text-shadow:0 2px 3px rgb(5 22 14 / .24)}
.bk .bk__h>span{display:block;font-size:var(--bk-head-size);line-height:1;letter-spacing:-.034em}
.bk .bk__l2{margin-top:-.079em}
/* The lighter italic needs a slightly larger size to balance the regular words. */
.bk .bk__h em,.c12 main .bk .bk__h em{font-family:R3Fraunces,"ITC Galliard",Georgia,serif;font-weight:400;font-style:italic;color:#deb27c;font-size:var(--bk-accent-size);line-height:1;letter-spacing:.02em;margin-right:-.05em;position:relative;top:.04em}
.bk .bk__h .bk__you,.c12 main .bk .bk__h .bk__you{font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-right:0;position:static;top:auto}

/* --- body voice: Newsreader --- */
.bk .bk__sub{font-family:BkBody,Georgia,serif;font-weight:400;white-space:nowrap}
.bk .bk__sub{font-size:1.98cqw;line-height:1;letter-spacing:-.034em;color:#f4f6f4}

/* Keep the shared pill layout and booking placement; match the hero font and colors. */
.bk .bk__btn{width:max-content;height:auto;min-height:50px;border-radius:999px;background:var(--hx-ochre,#af673c);color:var(--hx-white,#fff);border:1px solid var(--hx-ochre,#af673c);
  box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:14px 24px;font:400 15px var(--hx-serif,HxNewsreader,Georgia,serif);letter-spacing:0;white-space:nowrap;
  transition:color .24s var(--ease,cubic-bezier(.16,1,.3,1)),background-color .24s var(--ease,cubic-bezier(.16,1,.3,1)),box-shadow .24s var(--ease,cubic-bezier(.16,1,.3,1)),border-color .24s var(--ease,cubic-bezier(.16,1,.3,1))}
.bk .bk__btn:hover{background:var(--hx-ochre-deep,#8f5330);border-color:var(--hx-ochre-deep,#8f5330)}
.bk .bk__label{position:relative;top:2px;left:4px}
.bk .bk__btn span[aria-hidden]{font-size:1.12em;transition:transform .24s var(--ease,cubic-bezier(.16,1,.3,1))}
.bk .bk__btn:hover span[aria-hidden]{transform:translateX(4px)}
.bk .bk__btn:focus-visible{outline:3px solid #be7b36;outline-offset:5px}

@media (max-width:900px){
  .bk{overflow:visible}
  .c12 .bk{--bk-band:0px;margin-block-start:0;padding-block-end:26px;padding-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) - clamp(86px,10vw,152px));
    background:linear-gradient(to bottom,rgb(244 235 222) 0%,rgb(244 235.04 222.07) 10%,rgb(244 235.29 222.46) 20%,rgb(244 235.82 223.3) 30%,rgb(244 236.59 224.54) 40%,rgb(244 237.5 226) 50%,rgb(244 238.41 227.46) 60%,rgb(244 239.18 228.7) 70%,rgb(244 239.71 229.54) 80%,rgb(244 239.96 229.93) 90%,rgb(244 240 230) 100%) top/100% calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) - clamp(86px,10vw,152px)) no-repeat,rgb(244 240 230)}
  .bk__canvas{height:auto;min-height:430px;display:flex;flex-direction:column;padding:0}
  .bk__canvas>*{position:static}
  .bk .bk__content{position:static;flex:1;--bk-head-size:2.125rem;--bk-accent-size:2.425rem;--bk-message-gap:18px;--bk-action-gap:26px;padding:34px 22px calc(34px + .095 * var(--bk-head-size))}
  .bk .bk__content>.bk__h,.bk .bk__content>.bk__sub{width:100%}
  /* The photo crop sits inside the original curved edge; the canvas supplies
     the reference corner radius without a second baked curve showing through. */
  .bk .bk__art{position:relative;flex:none;width:100%;aspect-ratio:916 / 551;margin-bottom:0}
  .bk .bk__plate{left:-7.096070%;top:-21.288210cqw;width:182.532751%;height:auto;transform:none}
  .bk .bk__art::after{left:87.882096%;top:1.091703cqw;width:13.100436cqw;height:8.733624cqw}
  .bk .bk__h,.c12 main .bk .bk__h{white-space:normal;margin-bottom:18px}
  .bk .bk__h>span{display:block;line-height:1.02}
  .bk .bk__h em,.c12 main .bk .bk__h em{line-height:1.06}
  .bk .bk__l2{margin-top:0}
  .bk .bk__sub{white-space:normal;font-size:1.05rem;line-height:1.5;margin-bottom:26px}
  .bk .bk__btn{margin-bottom:0}
}

@media (max-width:620px){
  .bk{--pad:22px;--bk-radius:17px}
  .bk__canvas{min-height:520px}
}

/* Seamless sign-off paper -> booking paper (fade-effect.md overlay recipe).
   Paint the exact booking cream over the sign-off's paper/art with quintic
   easing. Both sides sample one curve, including the desktop negative margin.
   Absolute stop positions keep the final cream constant below the fade. */
.c12 main:has(.sy.bg-paper){
  --sy-book-tail:clamp(160px,18vw,240px);
  --sy-book-run:clamp(120px,12vw,200px);
  --sy-book-length:calc(var(--sy-book-tail) + var(--sy-book-run));
  --sy-book-band:calc(.1035 * (min(100vw,1320px) - 2 * clamp(22px,5vw,68px)));
  --sy-book-margin:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) - clamp(86px,10vw,152px) - var(--sy-book-band));
}
.c12 main:has(.sy.bg-paper) .sy.bg-paper,
.c12 main:has(.sy.bg-paper) .bk{
  --sy-book-offset:0px;
  --sy-book-fade:linear-gradient(to bottom,
    rgba(244,240,230,0.00000) calc(0 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.00856) calc(0.1 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.05792) calc(0.2 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.16308) calc(0.3 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.31744) calc(0.4 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.50000) calc(0.5 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.68256) calc(0.6 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.83692) calc(0.7 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.94208) calc(0.8 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,0.99144) calc(0.9 * var(--sy-book-length) - var(--sy-book-offset)),
    rgba(244,240,230,1.00000) calc(1 * var(--sy-book-length) - var(--sy-book-offset)));
}
.c12 main:has(.sy.bg-paper) .sy.bg-paper::after{
  content:"";position:absolute;inset-inline:0;bottom:0;
  height:calc(var(--sy-book-tail) - var(--sy-book-margin));
  z-index:0;pointer-events:none;background:var(--sy-book-fade);
}
.c12 main:has(.sy.bg-paper) .bk{
  --sy-book-offset:var(--sy-book-tail);
  background:var(--sy-book-fade),rgb(244,235,222);
}
@media(max-width:900px){
  .c12 main:has(.sy.bg-paper){--sy-book-margin:0px}
}