/* ============================================================================
   Page design — "03 — Field Notebook"
   The itinerary as a guide's notebook: ruled ivory, cards tipped onto the page,
   Newsreader for headings and DM Sans beneath, with fountain-pen blue doing the
   pointing. Warmer and busier than Minimal Luxury, and better for a trip whose
   selling point is the detail rather than the restraint.

   Styles the blocks in frontend/partials/, which every design shares - see
   frontend/templates/gsi-page.php. Nothing here changes what a block contains.
   ============================================================================ */

.gsi-skin-field-notebook{
  --ff-d:Newsreader,Georgia,serif;
  --ff-b:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --ff-m:'DM Mono',ui-monospace,monospace;
  --paper:#F7F5EF; --paper-card:#FCFBF7; --paper-sunk:#EFEBDF;
  --ink:#23211B; --ink-2:#57534A; --ink-faint:#8E8A7D;
  --acc:#2F4458; --acc-2:#1E2E3D; --acc-txt:#1E2E3D;
  --rule:#E6E2D6; --line:#DCD7C9;
  --gutter:clamp(22px,5vw,72px);

  /* ── the base stylesheet's own variables, re-pointed ────────────────────
     golden-safari.css sets its palette and its two faces on :root and then
     writes "font-family:var(--fh)!important" in twenty places - on section
     titles, camp names, accordion questions, the day labels. !important beats
     anything a skin file can say, so this design was rendering its headings in
     Cormorant Garamond and its labels in Jost whatever it asked for: comparing
     computed styles against the artwork came back "artwork newsreader / plugin
     cormorant garamond" and "artwork dm mono / plugin jost". Feeding the base
     different variables fixes all twenty at once, and its gold, chocolate and
     16px radius become this design's pen-blue, sunk ivory and 4px corners with
     them. See the same block in minimal-luxury.css.
     ────────────────────────────────────────────────────────────────────── */
  --fh:Newsreader,Georgia,serif;
  --fb:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --a:#2F4458; --a2:#1E2E3D; --a-txt:#2F4458; --a-txt2:#1E2E3D;
  --tx:#23211B; --tx2:#57534A;
  --bg:#F7F5EF; --bg2:#EFEBDF; --sf:#FCFBF7; --bd:#DCD7C9;
  --choco:#2F4458; --choco-deep:#1E2E3D;
  --r:0px;   /* the artwork's cards are square */
  /* ── the three colours an operator can change ────────────────────────────
     --paper, --ink and --band are the contract between this stylesheet and
     the Design Template box; everything else is derived from them in PHP -
     see colour_css() in golden-safari-itinerary.php.

     This design's band is the odd one of the three, and it is worth saying
     why. In Minimal Luxury and Signature the band is the page's own ink: a
     dark strip on a pale page. Here it is the SUNK ivory that the notebook's
     ruled sections run on - lighter than the paper's neighbours, not darker.
     Both are "the strip that is a different colour from the page", which is
     what the operator is actually choosing, and because the writing over it
     is measured from its luminance rather than assumed to be white, one
     control means both without anybody having to know which is which.

     The blue grounds are a separate matter: #enquiry and the featured review
     run on the ACCENT, so their text is --on-acc and follows the palette.
     ──────────────────────────────────────────────────────────────────────── */
  --paper-rgb:247,245,239;
  --ink-rgb:35,33,27;
  --acc-rgb:47,68,88;
  --band:#EFEBDF; --band-deep:#E3DECF;
  --on-band:#23211B; --on-band-2:#57534A; --on-band-rgb:35,33,27;
  --on-ink:#F7F5EF;  --on-ink-rgb:247,245,239;
  --on-acc:#FFFFFF;  --on-acc-rgb:255,255,255;

  /* The artwork's measurements. .nb-wrap is max-width 1140 with 64px of side
     margin and a further 36px inset past the margin rule, so what the content
     actually gets is 976px on any ordinary window - which is what the artwork
     measures. --gutter-sec is its 104px of vertical air. */
  --measure:976px;
  --gutter-sec:clamp(56px,8vw,104px);

  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-b);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  letter-spacing:normal;
  /* the ruled page, drawn rather than pictured */
  background-image:repeating-linear-gradient(
    transparent, transparent 37px, var(--rule) 37px, var(--rule) 38px);
  background-attachment:local;
}

.gsi-skin-field-notebook h1,
.gsi-skin-field-notebook h2,
.gsi-skin-field-notebook h3,
.gsi-skin-field-notebook h4{
  font-family:var(--ff-d); font-weight:500; color:var(--ink); letter-spacing:-.015em;
}
.gsi-skin-field-notebook h2 em,
.gsi-skin-field-notebook h3 em{ font-style:italic; color:var(--acc); }

/* ── the cover ─────────────────────────────────────────────────────────────
   .hero in notebook-template.html. The order is the thing I had backwards:
   the title is FIRST, set large in ink on the ruled page with a hairline of
   accent ruled down its left margin, and the photograph comes AFTER it as a
   full-width plate pasted across the page - not a small snapshot tipped in
   above the words. hero.php prints the photograph first, so the section is a
   flex column and the plate is ordered below; no markup has to change.

   The mockup's sizes: title clamp(46px,8vw,104px) at .98, em in accent
   italic, kicker 12px mono at .16em, and the meta values 32px in the display
   face rather than the 11px mono labels this had.
   ────────────────────────────────────────────────────────────────────────── */
.gsi-skin-field-notebook .gsi-hero{
  position:relative; display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.gsi-skin-field-notebook .gsi-hero-in{
  order:1; position:relative; max-width:1140px; width:100%; margin:0 auto;
  padding:clamp(72px,9vw,104px) var(--gutter) clamp(64px,8vw,92px)
          calc(var(--gutter) + clamp(18px,3vw,36px));
}
/* the ruled margin down the left of the text block */
.gsi-skin-field-notebook .gsi-hero-in::before{
  content:''; position:absolute; left:var(--gutter); top:0; bottom:0;
  width:1.5px; background:var(--acc); opacity:.5;
}
/* the pasted-in plate: full width, across the page, under the title */
.gsi-skin-field-notebook .gsi-hero-media{
  order:2; position:relative; width:100%; margin:0;
  aspect-ratio:24/9; max-height:62vh; overflow:hidden; background:var(--acc);
  box-shadow:0 -1px 0 var(--line) inset, 0 1px 0 var(--line);
}
.gsi-skin-field-notebook .gsi-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gsi-skin-field-notebook .gsi-hero-veil{ display:none; }
.gsi-skin-field-notebook .gsi-hero-tag{
  font-family:var(--ff-m); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); margin:0 0 24px;
}
.gsi-skin-field-notebook .gsi-hero-h{
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(46px,8vw,104px); line-height:.98; letter-spacing:-.025em;
  padding-bottom:.06em; color:var(--ink); max-width:15ch; margin:0;
}
.gsi-skin-field-notebook .gsi-hero-h em{ font-style:italic; color:var(--acc); }
.gsi-skin-field-notebook .gsi-hero-sub{
  font-size:18px; line-height:1.7; color:var(--ink-2); max-width:56ch; margin:24px 0 0;
}
.gsi-skin-field-notebook .gsi-hero-meta{
  display:flex; flex-wrap:wrap; gap:14px 44px; align-items:flex-start;
  margin-top:40px; padding-top:30px; border-top:1px solid var(--line); max-width:640px;
}
.gsi-skin-field-notebook .gsi-hero-fact{
  font-family:var(--ff-m); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
}
.gsi-skin-field-notebook .gsi-hero-fact b,
.gsi-skin-field-notebook .gsi-hero-fact strong{
  display:block; font-family:var(--ff-d); font-style:normal; font-weight:500;
  font-size:32px; color:var(--ink); letter-spacing:0; margin-top:6px;
}
.gsi-skin-field-notebook .gsi-hero-stars{ color:var(--acc); }
.gsi-skin-field-notebook .gsi-hero-rating small{ color:var(--ink-faint); margin-left:6px; }
.gsi-skin-field-notebook .gsi-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.gsi-skin-field-notebook .gsi-btn{
  display:inline-flex; align-items:baseline; gap:8px; text-decoration:none;
  padding:13px 24px; border-radius:3px; font-size:13px; font-weight:500;
  border:1px solid var(--acc); color:var(--acc); background:var(--paper-card);
}
.gsi-skin-field-notebook .gsi-btn-solid{ background:var(--acc); color:var(--on-acc); }
.gsi-skin-field-notebook .gsi-btn-solid:hover{ background:var(--acc-2); border-color:var(--acc-2); }
.gsi-skin-field-notebook .gsi-btn-amt{ font-family:var(--ff-d); font-size:19px; }
.gsi-skin-field-notebook .gsi-btn-from,
.gsi-skin-field-notebook .gsi-btn small{ font-family:var(--ff-m); font-size:10px; opacity:.75; }

/* ── the shared blocks ─────────────────────────────────────────────────── */
/* max-width/margin undo the base stylesheet's centred column. golden-safari.css sets
   ".gsec{padding:100px 40px;max-width:1280px;margin:0 auto}", and a design that only
   restyles the padding inherits that 1280px cap: the gutter is then measured inside a
   1280px box, so on any window wider than that the page never reaches the edge, and the
   moment a section is given a background - the alternating tint below - it paints as a
   slab floating in the middle of the page with the ruled paper showing either side.
   The reading column is set on the section's CHILDREN, in the rule after the tint,
   which is where a measure belongs; the section runs full width and insets with the
   gutter. */
.gsi-skin-field-notebook .gsec,
.gsi-skin-field-notebook section[id]{
  max-width:none; margin-inline:0;
  /* The measure is spent as the section's OWN side padding, so every child is
     inside the column by construction and left-aligned in it, which is what a
     notebook page is.

     It used to be a max-width plus margin-inline:auto on each child, and that
     broke on the six headings that are direct children of a section: this
     file's own "section[id] h2{margin:0 0 18px}" is a SHORTHAND, and a
     shorthand resets margin-inline to 0. Those headings kept the 976px cap and
     lost the auto that was centring the box, so each one sat 147px to the left
     of its own eyebrow and its own cards - which is exactly what he
     photographed under "Accommodation & Comfort Level". Spending the measure
     once, here, cannot be undone by a child's margin shorthand. */
  padding:var(--gutter-sec) max(var(--gutter), calc(50% - var(--measure) / 2));
  background:var(--paper);
  position:relative;
}

/* The margin rule. .nb-wrap draws a 1.5px vertical hairline down the left of
   every section and insets the content 36px past it, which is the single mark
   that makes the page read as a notebook rather than as an article. Drawn on
   the section here because the plugin's blocks have no wrapper of their own to
   hang it from, and sized off the same measure so it lands where the content
   starts at every width. */
.gsi-skin-field-notebook section[id]::before{
  content:''; position:absolute; top:0; bottom:0;
  left:calc(max(var(--gutter), calc(50% - var(--measure) / 2)) - 36px);
  width:1.5px; background:var(--rule-soft, rgba(47,68,88,.14));
}

/* Named grounds, not an alternation. Tinting every even block moves the rhythm
   whenever an itinerary is missing a section, so no two itineraries look alike
   and none looks like the artwork. In notebook-template.html the sunk ground
   belongs to five named sections and the rest run on the ruled paper. */
.gsi-skin-field-notebook .gsi-block--lodges  > section,
.gsi-skin-field-notebook .gsi-block--included > section,
.gsi-skin-field-notebook .gsi-block--parks   > section,
.gsi-skin-field-notebook .gsi-block--flights > section,
.gsi-skin-field-notebook .gsi-block--why     > section{
  background:var(--band);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ── the writing on those five ────────────────────────────────────────────
   The sunk ground is pale, so for as long as it stayed pale the sections
   could use the page's own ink and nobody noticed they had never said so.
   Give an operator the band and that stops being true: a dark band left five
   sections printing near-black on near-black - twenty-one pieces of text
   under 1.7:1, measured. So the band's sections say what their writing is,
   in the colour measured against the band rather than against the paper.

   With the design's own colours these are the same values the page already
   inherited (--on-band IS the ink here, --on-band-2 IS --ink-2), so nothing
   moves until somebody changes something.

   The exception is a card. A card brings its own opaque ground with it and
   keeps its own ink whatever the band does - which is why the second half of
   this block puts the page's ink back inside one. */
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) > section{ color:var(--on-band); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) :is(h1,h2,h3,h4){ color:var(--on-band); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) p{ color:var(--on-band-2); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) .sl{ color:var(--acc-band,var(--acc)); }
/* The included/excluded rows and the line over the quote button are on the
   band too. They read the page's inks, which are this design's band inks as
   drawn (--on-band is --ink, --on-band-2 is --ink-2), so nothing moved until a
   company's band was not the page's paper - then the list went dark on dark. */
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) .ii{ color:var(--on-band-2); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) .iy{ color:var(--acc-band,var(--acc)); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) .in{ color:var(--on-band-faint,var(--ink-faint)); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) .ie-cta span{ color:var(--on-band); }
/* numerals printed on a card sitting on the band read the accent for a card */
.gsi-skin-field-notebook [class*="-card"] .wh-n{ color:var(--acc-card,var(--acc-band,var(--acc))); }

/* .gsec-tint is the base stylesheet's own alternation; this design does its
   own, so the class must not lay a second one over it */
.gsi-skin-field-notebook .gsec.gsec-tint{ background:var(--paper); }

/* the section has already spent the measure, so a child takes the width it is
   given - and any inner wrapper the base stylesheet caps at 1280 is now inside
   a 976 column anyway */
.gsi-skin-field-notebook .gsec > *,
.gsi-skin-field-notebook section[id] > *{ max-width:none; margin-inline:0; }
.gsi-skin-field-notebook .gsec-in,
.gsi-skin-field-notebook .inc-in{ max-width:none; margin-inline:0; }

/* the eyebrow, with the artwork's 24px dash ruled in front of it */
.gsi-skin-field-notebook .sl{
  font-family:var(--ff-m); font-size:12px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc); margin:0 0 20px;
  display:flex; align-items:center; gap:12px;
}
.gsi-skin-field-notebook .sl::before{
  content:''; width:24px; height:1.5px; background:var(--acc); flex:0 0 auto;
}
.gsi-skin-field-notebook .gsec h2,
.gsi-skin-field-notebook section[id] h2{
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(34px,4.6vw,56px); line-height:1.08; letter-spacing:-.015em;
  margin:0 0 18px;
}
/* the standfirst, and the drop cap the artwork gives the overview's */
.gsi-skin-field-notebook .sec-p{
  font-size:18px; line-height:1.85; color:var(--ink-2); max-width:64ch; margin:0;
}
.gsi-skin-field-notebook .gsec h3{
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(18px,1.9vw,24px); margin:0 0 10px;
}
.gsi-skin-field-notebook p{ color:var(--ink-2); }
.gsi-skin-field-notebook a{ color:var(--acc); }

/* everything that is a row becomes a card tipped onto the page */
.gsi-skin-field-notebook .card,
.gsi-skin-field-notebook [class*="-card"],
.gsi-skin-field-notebook .lodge,
.gsi-skin-field-notebook .day{
  background:var(--paper-card); border:1px solid var(--line); border-radius:4px;
  padding:20px 22px; box-shadow:0 1px 2px rgba(35,33,27,.04), 0 12px 26px -20px rgba(35,33,27,.3);
}
.gsi-skin-field-notebook img{ border-radius:3px; }
.gsi-skin-field-notebook table{ width:100%; border-collapse:collapse; background:var(--paper-card); }
.gsi-skin-field-notebook th{
  font-family:var(--ff-m); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--acc); text-align:left; padding:11px 12px;
}
.gsi-skin-field-notebook td{
  padding:11px 12px; border-bottom:1px solid var(--rule); font-size:14px;
}
.gsi-skin-field-notebook td:first-child{ font-family:var(--ff-m); color:var(--acc); }

/* the reveal classes wait for JavaScript this design does not ship */
.gsi-skin-field-notebook .rv,
.gsi-skin-field-notebook .rv-left,
.gsi-skin-field-notebook .rv-right{ opacity:1 !important; transform:none !important; }

@media (max-width:860px){
  .gsi-skin-field-notebook .gsi-hero-media{ aspect-ratio:4/3; transform:none; }
}

/* ── the day-by-day section ───────────────────────────────────────────────
   The shared block carries .itin.itin-dark, painted chocolate by the base
   stylesheet for 01 — Golden Safari. A notebook has no dark pages: the days
   go on the ruled paper, in the same fountain-pen blue as the rest, with the
   day cards tipped in on the card stock. Each rule re-states a base rule at
   equal or greater weight.
   ───────────────────────────────────────────────────────────────────────── */
.gsi-skin-field-notebook .itin.itin-dark{ background:transparent; color:var(--ink); }
.gsi-skin-field-notebook .itin.itin-dark .itin-h h2{ color:var(--ink); }
.gsi-skin-field-notebook .itin.itin-dark .itin-h p{ color:var(--ink-2); }

.gsi-skin-field-notebook .itin .jd{ border-bottom:1px dashed var(--line); }
.gsi-skin-field-notebook .itin .jd-rail::after{ background:var(--line); }
.gsi-skin-field-notebook .itin .jd-dot{ background:var(--paper-card); border-color:var(--acc); }
.gsi-skin-field-notebook .itin .jd-dot.jd-dot-on{ background:var(--acc); }
.gsi-skin-field-notebook .itin .jd-num{ font-family:var(--ff-m); color:var(--acc); }

.gsi-skin-field-notebook .itin .jd-daylabel{ font-family:var(--ff-m); color:var(--acc); }
.gsi-skin-field-notebook .itin .jd-title{ color:var(--ink); }
.gsi-skin-field-notebook .itin .jd-desc{ color:var(--ink-2); }

.gsi-skin-field-notebook .itin .jd-start{
  border:1px solid var(--line); background:var(--paper-card);
}
.gsi-skin-field-notebook .itin .jd-start-tag{ font-family:var(--ff-m); color:var(--acc); }
.gsi-skin-field-notebook .itin .jd-start-body p{ color:var(--ink-2); }

.gsi-skin-field-notebook .itin .jd-meals{
  border-left:3px solid var(--acc); background:var(--paper-card);
}
.gsi-skin-field-notebook .itin .jd-meals-h{ font-family:var(--ff-m); color:var(--acc); }
.gsi-skin-field-notebook .itin .jd-meals p{ color:var(--ink-2); }

.gsi-skin-field-notebook .itin .jd-meta{ border-top:1px solid var(--line); }
.gsi-skin-field-notebook .itin .jd-meta-l{ font-family:var(--ff-m); color:var(--ink-faint); }
.gsi-skin-field-notebook .itin .jd-meta-v{ color:var(--ink); }
.gsi-skin-field-notebook .itin .jd-meta-night .jd-meta-v{ color:var(--acc); }

/* the accordion variant of the same block */
.gsi-skin-field-notebook .itin.itin-dark .dy-w{
  background:var(--paper-card); border-color:var(--line);
}
.gsi-skin-field-notebook .itin.itin-dark .dy-t{ color:var(--ink); }
.gsi-skin-field-notebook .itin.itin-dark .dy.active .dy-t{ color:var(--acc); }
.gsi-skin-field-notebook .itin.itin-dark .dy-l{ color:var(--ink-faint); }

/* ── no dark bands ────────────────────────────────────────────────────────
   The base stylesheet gives .gsec-dark to the parks and to "why book with
   us" and paints both chocolate. notebook-template.html has no dark page at
   all: the parks and the why run on the sunk ivory with the cards tipped
   onto it, and the only full-bleed colour in the whole document is the
   pen-blue of the closing band, which is set on #enquiry further down.

   This file used to keep the chocolate and put light text back over it. That
   was wrong twice: it is not the artwork, and the rules outlived their band -
   ".gsec.gsec-dark [class*=-card]" is three classes and it went on painting
   the park cards translucent white long after the band beneath them had been
   put back on paper, so the park names were white on ivory. The whole block
   is gone; the light-on-dark exceptions are stated once, on #enquiry.
   ───────────────────────────────────────────────────────────────────────── */
.gsi-skin-field-notebook .gsec.gsec-dark{ background:var(--band); color:var(--on-band); }
.gsi-skin-field-notebook .gsec.gsec-dark h2,
.gsi-skin-field-notebook .gsec.gsec-dark h3,
.gsi-skin-field-notebook .gsec.gsec-dark h4{ color:var(--on-band); }
.gsi-skin-field-notebook .gsec.gsec-dark p{ color:var(--on-band-2); }
/* The accent AS SEEN ON THE BAND. Every design puts its eyebrow and its
   numerals on the band in the accent, which reads because the band has
   always been dark. On a pale band it does not - Minimal Luxury's bronze
   measures 2.6:1 on one - so --acc-band is the same colour carried just
   far enough toward the band's own text to read, and no further. It is
   only emitted when the band has been changed; --acc is the fallback. */
.gsi-skin-field-notebook .gsec.gsec-dark .sl,
.gsi-skin-field-notebook .gsec.gsec-dark a{ color:var(--acc-band,var(--acc)); }
.gsi-skin-field-notebook .gsec.gsec-dark .card,
.gsi-skin-field-notebook .gsec.gsec-dark [class*="-card"],
.gsi-skin-field-notebook .gsec.gsec-dark .lodge{
  background:var(--paper-card); border-color:var(--line);
  box-shadow:0 1px 2px rgba(35,33,27,.04), 0 16px 34px rgba(35,33,27,.09);
}

/* the cover meta: mono label, then the value large in the display face */
.gsi-skin-field-notebook .gsi-hero-fact{ display:block; }
.gsi-skin-field-notebook .gsi-hero-fact-l{
  font-family:var(--ff-m); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ── the pinned action bar ────────────────────────────────────────────────
   .bar in notebook-template.html: slate rather than chocolate, mono labels,
   a white Reserve in the accent blue. */
/* The bar and the cover plate were the last things in this design still
   painting themselves: a scan of the rendered page turned up five colours
   here that no setting could reach. They are chrome, so nobody would think
   to look for them, and that is exactly why they should follow. */
.gsi-skin-field-notebook .gsi-bar{ background:rgba(var(--ink-rgb),.97); }
.gsi-skin-field-notebook .gsi-bar-title{ font-family:var(--ff-d); color:var(--on-ink); }
.gsi-skin-field-notebook .gsi-bar-price{ font-family:var(--ff-m); color:rgba(var(--on-ink-rgb),.62); }
.gsi-skin-field-notebook .gsi-bar-price .gsi-pb-amt{
  font-family:var(--ff-d); color:var(--on-ink); font-size:20px; font-weight:500;
}
.gsi-skin-field-notebook .gsi-bar-btn{
  font-family:var(--ff-m); color:rgba(var(--on-ink-rgb),.85); border-radius:0;
  border-color:rgba(255,255,255,.16);
}
.gsi-skin-field-notebook .gsi-bar-btn:hover{ border-color:rgba(var(--on-ink-rgb),.45); color:var(--on-ink); }
.gsi-skin-field-notebook .gsi-bar-reserve{
  background:#fff; border-color:#fff; color:var(--acc-2); font-weight:500;
}
.gsi-skin-field-notebook .gsi-bar-reserve:hover{ background:rgba(var(--on-ink-rgb),.9); color:var(--acc-2); }

/* ══════════════════════════════════════════════════════════════════════════
   THE SECTIONS BETWEEN THE COVER AND THE FOOT
   Everything below is notebook-template.html's treatment applied to the class
   names the shared partials emit. This design had its cover, its day-by-day
   and its action bar and nothing else, so from the parks downwards the page
   was wearing the base stylesheet — which is a different design.

   The rule this one obeys, and it is the opposite of 02 — Minimal Luxury's:
   a card IS a card. Paper-white, a hairline border, a real shadow, tipped onto
   the ruled page. Restraint is not what this design is for.
   ══════════════════════════════════════════════════════════════════════════ */

/* the shared card, from .lodge / .park / .addon / .rev, which are one thing */
.gsi-skin-field-notebook .wh-card,
.gsi-skin-field-notebook .bey-card,
.gsi-skin-field-notebook .rvc,
.gsi-skin-field-notebook .bt-card,
.gsi-skin-field-notebook .fc-card,
.gsi-skin-field-notebook .gsi-block--lodges .ac-item{
  background:var(--paper-card); border:1px solid var(--line); border-radius:0;
  box-shadow:0 1px 2px rgba(35,33,27,.04), 0 16px 34px rgba(35,33,27,.09);
  overflow:hidden; padding:0; margin:0;
  display:flex; flex-direction:column; text-align:left;
}
/* and the plate at the top of it, from .frame */
.gsi-skin-field-notebook .wh-ph,
.gsi-skin-field-notebook .gsi-block--lodges .ac-item .ac-th{
  position:static; display:block; width:100%; height:auto;
  border-radius:0; border-bottom:1px solid var(--line);
  overflow:hidden; margin:0; background:var(--acc);
}
.gsi-skin-field-notebook .wh-ph{ aspect-ratio:3/2; }
.gsi-skin-field-notebook .gsi-block--lodges .ac-item .ac-th{ aspect-ratio:4/3; }
.gsi-skin-field-notebook .wh-ph img,
.gsi-skin-field-notebook .gsi-block--lodges .ac-item .ac-th img{
  position:static; width:100%; height:100%; object-fit:cover;
  display:block; border-radius:0;
}

/* ── the camps (source: .lodge) ───────────────────────────────────────────
   Scoped with .gsi-block--lodges throughout, because the block's own rules are
   three classes deep - ".gsi-block--lodges .ac-item.has-th" pins the thumbnail
   to 52x52 - and a two-class selector here loses to them silently. That cost
   an hour on 02; it costs nothing here. */
.gsi-skin-field-notebook .gsi-block--lodges .ac-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-top:12px; margin-bottom:0;
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-col{
  display:contents; background:transparent; border:0; padding:0; box-shadow:none;
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-h{
  grid-column:1/-1; font-family:var(--ff-m); font-size:12px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--acc-band,var(--acc));
  margin:26px 0 0; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-grid > .ac-h:first-child{ margin-top:0; }
.gsi-skin-field-notebook .gsi-block--lodges .ac-item,
.gsi-skin-field-notebook .gsi-block--lodges .ac-item.has-th{
  grid-template-columns:none; width:100%; cursor:pointer;
  font-family:var(--ff-b); color:var(--ink); border:1px solid var(--line);
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-item:hover{ padding-left:0; }
/* the body of the card, since the block gives its text no wrapper of its own */
.gsi-skin-field-notebook .gsi-block--lodges .ac-item > :not(.ac-th){
  padding-inline:22px;
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-item .ac-k{
  grid-column:auto; display:block; font-family:var(--ff-m); font-size:10px;
  font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc); line-height:1.7; margin:20px 0 0;
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-item b{
  font-family:var(--ff-d); font-weight:500; font-size:24px; line-height:1.1;
  color:var(--ink); margin:6px 0 4px; letter-spacing:normal;
}
.gsi-skin-field-notebook .gsi-block--lodges .ac-item b:last-child{ padding-bottom:24px; }
.gsi-skin-field-notebook .gsi-block--lodges .ac-go{ display:none; }

/* ── the parks (source: .park) ────────────────────────────────────────────
   The base stylesheet burns the park name into the photograph; the artwork
   sets a 3:2 plate with the name and the note on paper underneath it. */
.gsi-skin-field-notebook .wh-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:12px;
 
}
.gsi-skin-field-notebook .wh-grid .wh-card:nth-child(2),
.gsi-skin-field-notebook .wh-grid .wh-card:nth-child(3){ margin-top:0; }
.gsi-skin-field-notebook .wh-veil{ display:none; }
/* The park plate's caption sits on the band itself rather than on a card of
   its own, so it takes the band's writing. On this design the two are the
   same colour until an operator gives the band one. */
.gsi-skin-field-notebook .wh-b{ position:static; padding:18px 20px 22px; color:var(--on-band); }
.gsi-skin-field-notebook .wh-n{
  display:block; font-family:var(--ff-m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc-band,var(--acc)); margin-bottom:8px;
}
.gsi-skin-field-notebook .wh-b h3{
  font-family:var(--ff-d); font-weight:500; font-size:23px; line-height:1.1;
  color:var(--on-band); margin:0 0 8px; letter-spacing:normal;
}
.gsi-skin-field-notebook .wh-b p{ font-size:14.5px; line-height:1.7; color:var(--on-band-2); }
/* The parks band is sunk paper, not chocolate, so the base stylesheet's
   light text has to be put back - in the band's colour rather than the
   page's ink, which on this design is the same thing until it is not. */
.gsi-skin-field-notebook .gsi-block--parks h2,
.gsi-skin-field-notebook .gsi-block--parks h3,
.gsi-skin-field-notebook .gsi-block--parks h4{ color:var(--on-band); }
.gsi-skin-field-notebook .gsi-block--parks p,
.gsi-skin-field-notebook .gsi-block--parks .sec-p{ color:var(--on-band-2); }
.gsi-skin-field-notebook .gsi-block--parks .sl{ color:var(--acc-band,var(--acc)); }

/* the migration note under the parks */
.gsi-skin-field-notebook .mig{
  display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start;
  max-width:var(--measure); margin:44px auto 0; padding-top:36px;
  border-top:1px solid var(--line);
}
.gsi-skin-field-notebook .mig-h{
  font-family:var(--ff-d); font-weight:500; font-size:clamp(22px,2.4vw,28px);
  line-height:1.15; color:var(--ink); margin:0 0 14px;
}
.gsi-skin-field-notebook .mig-b p{ font-size:15.5px; line-height:1.8; color:var(--ink-2); }
.gsi-skin-field-notebook .mig-stat{
  background:var(--paper-card); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 1px 2px rgba(35,33,27,.04), 0 16px 34px rgba(35,33,27,.09);
  padding:22px; text-align:left;
}
.gsi-skin-field-notebook .mig-v{
  font-family:var(--ff-d); font-weight:500; font-size:clamp(32px,4vw,44px);
  line-height:1; color:var(--acc);
}
.gsi-skin-field-notebook .mig-k{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:8px;
}

/* ── the add-ons (source: .addon) ─────────────────────────────────────────
   Four across, and the price sits at the foot above a hairline. The base
   stylesheet burns the text into the image here too. */
.gsi-skin-field-notebook .bey-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:12px;
 
}
.gsi-skin-field-notebook .bey-grid > .bey-card:first-child{ grid-row:auto; aspect-ratio:auto; }
.gsi-skin-field-notebook .bey-card{
  position:static; aspect-ratio:auto; opacity:1; transform:none; animation:none;
}
.gsi-skin-field-notebook .bey-card img{
  position:static; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:0; border-bottom:1px solid var(--line); transform:none; margin:0;
}
.gsi-skin-field-notebook .bey-ov{ display:none; }
.gsi-skin-field-notebook .bey-bd{
  position:static; padding:18px 20px 22px; color:var(--ink); z-index:auto;
  display:flex; flex-direction:column; flex:1;
}
.gsi-skin-field-notebook .bey-bd::before{ content:none; }
.gsi-skin-field-notebook .bey-when{
  font-family:var(--ff-m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc); margin-bottom:6px;
}
.gsi-skin-field-notebook .bey-title{
  font-family:var(--ff-d); font-weight:500; font-size:21px; line-height:1.15;
  color:var(--ink); margin:0 0 8px; letter-spacing:normal;
}
.gsi-skin-field-notebook .bey-title em{ color:var(--acc); }
.gsi-skin-field-notebook .bey-desc{
  max-height:none; opacity:1; overflow:visible; margin:0 0 12px;
  font-size:14px; line-height:1.65; color:var(--ink-2); max-width:none;
}
.gsi-skin-field-notebook .bey-pre{
  font-family:var(--ff-m) !important; font-size:12px; font-weight:400; letter-spacing:.02em;
  text-transform:none; color:var(--acc);
  margin:auto 0 0; padding-top:12px; border-top:1px solid var(--line); order:9;
}
.gsi-skin-field-notebook .bey-card.bey-noimg{ padding-top:0; }

/* ── what's in the price (source: .pack-grid) ─────────────────────────────
   Two ruled columns, the included under a pen-blue rule and the not-included
   under a plain one, each line marked in the mono face. */
.gsi-skin-field-notebook .ig{
  display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:12px;
 
}
.gsi-skin-field-notebook .ig > *{
  background:transparent; border:0; border-radius:0; box-shadow:none; padding:0;
}
.gsi-skin-field-notebook .ig h3{
  font-family:var(--ff-d); font-weight:500; font-size:24px; margin:0 0 14px;
  padding-bottom:12px; border-bottom:1.5px solid var(--acc);
}
/* The rows are .ii divs, each carrying its own marker in a .iy span - not a
   <ul> of <li>. Treating them as list items and drawing a marker with ::before
   put a second tick in front of the block's own one. */
.gsi-skin-field-notebook .ii,
.gsi-skin-field-notebook .ig li{
  display:flex; gap:12px; align-items:flex-start; list-style:none;
  padding:9px 0; font-size:15px; line-height:1.55; color:var(--ink-2);
  border-bottom:1px solid var(--rule); background:transparent;
}
.gsi-skin-field-notebook .ii:last-child,
.gsi-skin-field-notebook .ig li:last-child{ border-bottom:0; }
.gsi-skin-field-notebook .iy,
.gsi-skin-field-notebook .in{
  font-family:var(--ff-m) !important; flex:0 0 auto; margin-top:1px;
  color:var(--acc);
}
.gsi-skin-field-notebook .in{ color:var(--ink-faint); }
.gsi-skin-field-notebook .ie-cta{ margin-top:36px; }

/* ── the questions and the supplementary costs (source: .qa) ──────────────
   A ruled list, and the toggle is a drawn plus that loses its upright when the
   row opens - no chevron, no card. */
.gsi-skin-field-notebook .acc{ }
.gsi-skin-field-notebook .acc-i{
  background:transparent; border:0; border-top:1px solid var(--line);
  border-radius:0; box-shadow:none; margin:0; overflow:hidden;
}
.gsi-skin-field-notebook .acc-i:last-child{ border-bottom:1px solid var(--line); }
.gsi-skin-field-notebook .acc-i:hover,
.gsi-skin-field-notebook .acc-i.open{ border-color:var(--line); box-shadow:none; }
.gsi-skin-field-notebook .acc-q{
  padding:22px 44px 22px 0; background:transparent; border:0;
  /* a <button> does not inherit font properties: the base puts the family back
     with !important and stops, so without this the rows were the only type on
     the page at letter-spacing:normal on a page that sets one */
  letter-spacing:inherit;
}
.gsi-skin-field-notebook .acc-q:hover{ padding-left:0; }
.gsi-skin-field-notebook .acc-t{
  font-family:var(--ff-d); font-weight:500; font-size:20px; line-height:1.25;
  color:var(--ink); letter-spacing:normal;
}
.gsi-skin-field-notebook .acc-n{
  font-family:var(--ff-m) !important; font-size:12px; font-weight:400; letter-spacing:.14em;
  color:var(--acc);
}
.gsi-skin-field-notebook .acc-c{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.04em;
  text-transform:none; color:var(--ink-faint);
  background:transparent; border:0; border-radius:0; padding:0;
}
.gsi-skin-field-notebook .acc-i.open .acc-c{ background:transparent; border:0; }
.gsi-skin-field-notebook .acc-x{
  font-family:var(--ff-m); font-weight:400; font-size:20px;
  color:var(--acc); line-height:1;
}
.gsi-skin-field-notebook .acc-in{
  padding:0 30px 24px 0; font-size:16px; line-height:1.8; color:var(--ink-2);
}
.gsi-skin-field-notebook .acc-sub li{
  padding:8px 0 8px 20px; border-bottom:1px solid var(--rule);
  font-size:14.5px; color:var(--ink-2);
}
.gsi-skin-field-notebook .acc-sub li::before{
  content:''; width:8px; height:1.5px; background:var(--acc);
  border-radius:0; top:17px;
}
/* the FAQ block sets its list in two columns; the artwork runs one */
.gsi-skin-field-notebook .faq-grid{ display:block; }
.gsi-skin-field-notebook .faq-head-col{ margin-bottom:12px; }
.gsi-skin-field-notebook #faq .acc{ columns:1; column-gap:normal; max-width:var(--measure); }
.gsi-skin-field-notebook #faq .acc-i{
  break-inside:avoid; margin-bottom:0; border:0; border-top:1px solid var(--line);
  border-radius:0; background:transparent;
}
.gsi-skin-field-notebook #faq .acc-i:last-child{ border-bottom:1px solid var(--line); }
.gsi-skin-field-notebook #faq .acc-q{ padding:22px 44px 22px 0; align-items:start; }
.gsi-skin-field-notebook #faq .acc-t{ font-size:20px; }
.gsi-skin-field-notebook #faq .acc-in{ padding:0 30px 24px 0; }
.gsi-skin-field-notebook #extras .acc{ max-width:var(--measure); }
.gsi-skin-field-notebook #extras .acc-i{ background:transparent; }
.gsi-skin-field-notebook #extras .acc-n{
  font-family:var(--ff-m) !important; font-size:12px; font-weight:400; color:var(--acc);
  line-height:1.4;
}
.gsi-skin-field-notebook #extras .acc-t{ font-size:20px; }
.gsi-skin-field-notebook #extras .acc-in{ padding-left:0; }

/* ── why book with us (source: .why-grid) ─────────────────────────────────
   Two columns divided by hairlines on the sunk ground, NOT four cards on a
   chocolate band, which is what the base stylesheet draws. */
.gsi-skin-field-notebook .gs-ghost{ display:none; }
.gsi-skin-field-notebook .gsi-block--why h2,
.gsi-skin-field-notebook .gsi-block--why h3,
/* The why block is one of this design's band sections, so its writing is
   the band's writing rather than the page's ink - which is the same thing
   until somebody gives the band a colour. */
.gsi-skin-field-notebook .gsi-block--why h4{ color:var(--on-band); }
.gsi-skin-field-notebook .gsi-block--why p,
.gsi-skin-field-notebook .gsi-block--why .sec-p{ color:var(--on-band-2); }
.gsi-skin-field-notebook .gsi-block--why .sl{ color:var(--acc-band,var(--acc)); }
.gsi-skin-field-notebook .why-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:12px;
  border-top:1px solid var(--line);
}
.gsi-skin-field-notebook .why-c{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  padding:26px 30px 26px 0; opacity:1; transform:none; animation:none;
}
.gsi-skin-field-notebook .why-c:nth-child(2n){ border-right:0; padding-left:30px; }
.gsi-skin-field-notebook .why-c:hover{
  background:transparent; border-color:var(--line); transform:none;
}
.gsi-skin-field-notebook .why-n{
  font-family:var(--ff-m) !important; font-size:12px; font-weight:400; letter-spacing:.14em;
  color:var(--acc-band,var(--acc)); opacity:1; margin-bottom:8px;
}
.gsi-skin-field-notebook #why .why-t,
.gsi-skin-field-notebook #why h3,
.gsi-skin-field-notebook .gsec .why-t,
.gsi-skin-field-notebook .why-t{
  font-family:var(--ff-d); font-weight:500; font-size:22px; line-height:1.2;
  color:var(--on-band); margin-bottom:8px; letter-spacing:normal;
}
.gsi-skin-field-notebook #why{ color:var(--on-band); }
.gsi-skin-field-notebook #why .why-b,
.gsi-skin-field-notebook .why-b{ font-size:14.5px; line-height:1.75; color:var(--on-band-2); }
/* the emoji the block puts before each title is Twemoji colour on a page whose
   only colour is one blue; the numeral above already marks the row */
.gsi-skin-field-notebook .why-i{ display:none; }

/* ── the reviews (source: .rev) ───────────────────────────────────────────── */
.gsi-skin-field-notebook .rvc{ padding:22px 22px 24px; }
.gsi-skin-field-notebook .rvc:hover{ transform:none; box-shadow:0 1px 2px rgba(35,33,27,.04), 0 16px 34px rgba(35,33,27,.09); }
.gsi-skin-field-notebook .rvc-s{ color:var(--acc); font-size:12px; letter-spacing:2px; }
.gsi-skin-field-notebook .rvc-t{
  font-family:var(--ff-d); font-weight:500; font-size:19px; line-height:1.2;
  color:var(--ink);
}
.gsi-skin-field-notebook .rvc-b{ font-size:14px; line-height:1.7; color:var(--ink-2); }
.gsi-skin-field-notebook .rvc-w{ border-top:1px solid var(--line); }
.gsi-skin-field-notebook .rvc-av{
  width:30px; height:30px; background:var(--acc); color:var(--on-acc,#fff);
  font-family:var(--ff-d); font-weight:500; font-size:14px;
}
.gsi-skin-field-notebook .rvc-n{
  font-family:var(--ff-d); font-weight:500; font-size:15px; color:var(--ink);
}
.gsi-skin-field-notebook .rvc-f{
  font-family:var(--ff-m); font-size:10px; letter-spacing:.06em; color:var(--ink-faint);
}
.gsi-skin-field-notebook .rvc:first-child{
  grid-column:auto; background:var(--acc); color:#fff; border:0; padding:34px 36px;
  display:flex; flex-direction:column; gap:0;
}
.gsi-skin-field-notebook .rvc:first-child .rvc-t{ color:var(--on-acc); }
.gsi-skin-field-notebook .rvc:first-child .rvc-b{ color:var(--on-acc-soft,rgba(var(--on-acc-rgb),.82)); }
/* the featured card is on the accent here, not the ink, so its country line
   reads the accent's quiet voice once a colour is set - and exactly the base's
   own value until then */
.gsi-skin-field-notebook .rvc:first-child .rvc-f{ color:var(--on-acc-soft,rgba(var(--on-band-rgb,250,248,244),.55)); }
.gsi-skin-field-notebook .rvc:first-child .rvc-n{ color:var(--on-acc); }
.gsi-skin-field-notebook .rvc:first-child .rvc-w{ border-color:rgba(var(--on-acc-rgb),.24); }
.gsi-skin-field-notebook .rvc:first-child .rvc-av{ background:var(--on-acc); color:var(--acc); }

/* ── the season and the flights ───────────────────────────────────────────── */
.gsi-skin-field-notebook .bt-grid,
.gsi-skin-field-notebook .fc-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px;
  margin-top:12px; align-items:start;
}
.gsi-skin-field-notebook .bt-card,
.gsi-skin-field-notebook .fc-card{ padding:20px 22px 24px; }
.gsi-skin-field-notebook .bt-card.bt-good{ border-top:2px solid var(--acc); }
.gsi-skin-field-notebook .fc-kick{
  font-family:var(--ff-m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc); margin-bottom:6px;
}
.gsi-skin-field-notebook .bt-h,
.gsi-skin-field-notebook .fc-airport{
  font-family:var(--ff-d); font-weight:500; font-size:22px; line-height:1.15;
  color:var(--ink); margin:0 0 10px;
}
.gsi-skin-field-notebook .bt-d,
.gsi-skin-field-notebook .fc-desc{ font-size:14.5px; line-height:1.7; color:var(--ink-2); }

/* ── the price (source: the .tag row and the notebook's tables) ───────────── */
.gsi-skin-field-notebook .pt-tabs{
  display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.gsi-skin-field-notebook .pt-tab{
  background:var(--paper-card); border:1px solid var(--line); border-bottom:0;
  border-radius:4px 4px 0 0; box-shadow:none; padding:12px 20px;
  font-family:var(--ff-m); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); cursor:pointer;
}
.gsi-skin-field-notebook .pt-tab.on{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.gsi-skin-field-notebook .pt-block{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:26px 0 0;
}
.gsi-skin-field-notebook .pt-wrap{ overflow-x:auto; }
.gsi-skin-field-notebook .pt-lbl{
  font-family:var(--ff-m); font-size:11px; font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
}
.gsi-skin-field-notebook .pz{
  font-family:var(--ff-d); font-weight:500; font-size:clamp(20px,2.2vw,30px);
  line-height:1.1; color:var(--acc); letter-spacing:-.01em;
}
.gsi-skin-field-notebook .pt-note p{
  font-family:var(--ff-m); font-size:12px; color:var(--ink-faint);
}
.gsi-skin-field-notebook .rt-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 1px 2px rgba(35,33,27,.04), 0 16px 34px rgba(35,33,27,.09);
  padding:24px 18px; opacity:1; transform:none; animation:none;
}
.gsi-skin-field-notebook .rt-card:hover{ transform:none; }
.gsi-skin-field-notebook .rt-size{
  font-family:var(--ff-d); font-weight:500; font-size:26px; color:var(--ink);
}
.gsi-skin-field-notebook .rt-size-u,
.gsi-skin-field-notebook .rt-unit{
  font-family:var(--ff-m); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.gsi-skin-field-notebook .rt-label{ font-size:13.5px; color:var(--ink-2); }
.gsi-skin-field-notebook .rt-price{
  font-family:var(--ff-d); font-weight:500; font-size:clamp(20px,2.2vw,28px);
  color:var(--acc); border-top:1px solid var(--line); padding-top:14px;
}
.gsi-skin-field-notebook .rt-flag{
  background:var(--acc); color:#fff; border-radius:0;
  font-family:var(--ff-m); font-size:10px; letter-spacing:.1em; padding:5px 12px;
}

/* ── the route ────────────────────────────────────────────────────────────── */
.gsi-skin-field-notebook .dg.dg-sidebar{ display:block; }
.gsi-skin-field-notebook .mw{
  height:420px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper-sunk); box-shadow:0 1px 2px rgba(35,33,27,.04), 0 16px 34px rgba(35,33,27,.09);
}
.gsi-skin-field-notebook .dhl{
  display:flex; flex-wrap:wrap; gap:8px; margin:24px auto 0; padding:0;
  list-style:none; max-width:var(--measure);
}
.gsi-skin-field-notebook .hl-row{
  display:flex; align-items:baseline; gap:8px; margin:0;
  font-family:var(--ff-m); font-size:11px; letter-spacing:.02em; color:var(--ink-2);
  border:1px solid var(--line); background:var(--paper-card); padding:6px 11px;
  border-radius:0;
}
.gsi-skin-field-notebook .hl-d{ color:var(--acc); font-weight:500; }
.gsi-skin-field-notebook .hl-t{ color:var(--ink-2); }

/* ── the facts strip ──────────────────────────────────────────────────────── */
.gsi-skin-field-notebook .gsi-hl-list{
 
  display:grid; grid-template-columns:1fr 1fr; gap:0 44px;
}
.gsi-skin-field-notebook .k5-fact{
  display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:baseline;
  padding:9px 0; margin:0; background:transparent; border:0;
  border-bottom:1px solid var(--rule); border-radius:0; box-shadow:none;
}
.gsi-skin-field-notebook .k5-fact .k{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
}
.gsi-skin-field-notebook .k5-fact .v{
  font-family:var(--ff-d); font-weight:500; font-size:16px; color:var(--ink);
  text-align:right;
}
.gsi-skin-field-notebook .k5-fact-i{ opacity:.45; filter:grayscale(1); }

/* ── the enquiry (source: .reserve) ───────────────────────────────────────
   The artwork closes on the pen-blue, not on ink: the one full-bleed colour in
   the whole document. Addressed by id, because ".gsi-enq" is a single class and
   the rule painting every section paper is "section[id]" - an element and an
   attribute, which outranks it. That trap cost a round on 02. */
.gsi-skin-field-notebook #enquiry{
  background:var(--acc); color:#fff;
}
.gsi-skin-field-notebook #enquiry::before{ background:rgba(var(--on-acc-rgb),.18); }
.gsi-skin-field-notebook #enquiry h2{ color:var(--on-acc); }
.gsi-skin-field-notebook #enquiry h2 em{ color:rgba(var(--on-acc-rgb),.8); }
.gsi-skin-field-notebook #enquiry .sl{ color:var(--on-acc); }
.gsi-skin-field-notebook #enquiry .sl::before{ background:rgba(var(--on-acc-rgb),.7); }
.gsi-skin-field-notebook #enquiry .sec-p{ color:var(--on-acc-soft,rgba(var(--on-acc-rgb),.82)); }
.gsi-skin-field-notebook #enquiry .gsi-enq-in{ max-width:760px; margin:34px 0 0; }
.gsi-skin-field-notebook #enquiry .gsg-eq-wrap,
.gsi-skin-field-notebook #enquiry .gsg-eq-form{
  background:transparent; border:0; border-radius:0; box-shadow:none; padding:0;
}
.gsi-skin-field-notebook #enquiry .gsg-eq-row{
  display:grid; grid-template-columns:1fr 1fr; gap:0 22px;
}
.gsi-skin-field-notebook #enquiry .gsg-eq-row-3{ grid-template-columns:repeat(3,1fr); }
/* Every field, not a list of the types that existed when this was
   written. The party-size boxes are input[type=number] and were in
   none of these lists, so on all four designs Adults and Children
   rendered as raw browser inputs with a grey #767676 border in the
   middle of the form - found by scanning the page for colours that do
   not follow the design. A type added to the form later inherits the
   styling now instead of arriving naked. */
.gsi-skin-field-notebook #enquiry :is(input:not([type=hidden]):not([type=submit]):not([type=button]),
                                  textarea, select){
  width:100%; margin:0 0 18px; padding:13px 14px;
  background:rgba(var(--on-acc-rgb,255,255,255),.06); color:var(--on-acc,#fff);
  border:1px solid rgba(var(--on-acc-rgb,255,255,255),.28); border-radius:2px;
  font-family:var(--ff-b); font-size:15px; letter-spacing:inherit;
  transition:border-color .25s ease, background .25s ease;
}
/* background-color, never the shorthand: the shorthand resets the arrow the
   base paints on a select and it then tiles across the field */
.gsi-skin-field-notebook #enquiry select{ background-color:rgba(var(--on-acc-rgb),.06); }
.gsi-skin-field-notebook #enquiry select option{ background:var(--acc); color:var(--on-acc); }
.gsi-skin-field-notebook #enquiry input::placeholder,
.gsi-skin-field-notebook #enquiry textarea::placeholder{ color:rgba(var(--on-acc-rgb),.55); }
.gsi-skin-field-notebook #enquiry :is(input,textarea,select):focus{
  outline:none; border-color:var(--on-acc,#fff); background:rgba(var(--on-acc-rgb,255,255,255),.12);
}
.gsi-skin-field-notebook #enquiry .gsg-eq-lbl{
  display:block; font-family:var(--ff-m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-acc-soft,rgba(var(--on-acc-rgb,255,255,255),.7)); margin-bottom:4px;
}
.gsi-skin-field-notebook #enquiry .gsg-eq-btn,
.gsi-skin-field-notebook #enquiry button,
.gsi-skin-field-notebook #enquiry input[type=submit]{
  display:inline-block; width:auto; margin-top:16px; padding:16px 30px;
  background:var(--on-acc,#fff); color:var(--acc-on-inverse,var(--acc-2)); border:1px solid var(--on-acc,#fff); border-radius:2px;
  font-family:var(--ff-m); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; transition:background .25s ease;
}
.gsi-skin-field-notebook #enquiry .gsg-eq-btn:hover,
.gsi-skin-field-notebook #enquiry button:hover,
.gsi-skin-field-notebook #enquiry input[type=submit]:hover{ background:rgba(var(--on-acc-rgb),.9); }
/* the download band follows it, so it stops being a band and becomes the line
   under it */
.gsi-skin-field-notebook .gsi-block--enquiry + .gsi-block--download > section{
  background:var(--acc); padding-top:0; border-top:0;
}
.gsi-skin-field-notebook .gsi-block--enquiry + .gsi-block--download .gsi-dl-btn{
  background:transparent; color:var(--on-acc,#fff); border:1px solid rgba(var(--on-acc-rgb,255,255,255),.4);
  border-radius:2px; padding:14px 26px;
  font-family:var(--ff-m); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}

@media(max-width:960px){
  .gsi-skin-field-notebook .gsi-block--lodges .ac-grid,
  .gsi-skin-field-notebook .wh-grid,
  .gsi-skin-field-notebook .bey-grid{ grid-template-columns:1fr 1fr; }
  .gsi-skin-field-notebook .mig{ grid-template-columns:1fr; gap:28px; }
}
@media(max-width:700px){
  .gsi-skin-field-notebook section[id]::before{ display:none; }
  .gsi-skin-field-notebook .gsi-block--lodges .ac-grid,
  .gsi-skin-field-notebook .wh-grid,
  .gsi-skin-field-notebook .bey-grid,
  .gsi-skin-field-notebook .ig,
  .gsi-skin-field-notebook .why-grid,
  .gsi-skin-field-notebook .gsi-hl-list{ grid-template-columns:1fr; }
  .gsi-skin-field-notebook .why-c{ border-right:0; padding:22px 0; }
  .gsi-skin-field-notebook .why-c:nth-child(2n){ padding-left:0; }
  .gsi-skin-field-notebook .ig{ gap:28px; }
  .gsi-skin-field-notebook #enquiry .gsg-eq-row,
  .gsi-skin-field-notebook #enquiry .gsg-eq-row-3{ grid-template-columns:1fr; }
}

/* ── the last few, each losing to a more specific rule in the base ─────────
   Measured against the artwork rather than guessed. Every one of these was
   already set above and every one was being outranked: ".gsec h3" is two
   classes and an element and beat ".bey-title"; "#faq .acc-t" carries an id;
   and the mono roles are answering a font-family the base marks !important. */
.gsi-skin-field-notebook .gsec .bey-title{
  font-size:21px; line-height:1.15;
}
.gsi-skin-field-notebook #faq .acc-t,
.gsi-skin-field-notebook #extras .acc-t{ line-height:normal; }
.gsi-skin-field-notebook .why-n{ line-height:1.7; }
.gsi-skin-field-notebook .itin .jd-daylabel{
  font-family:var(--ff-m) !important;
}
.gsi-skin-field-notebook .itin .jd-title{
  font-size:clamp(24px,3vw,32px); line-height:1.12;
}

/* The day is two columns in the artwork - the writing, then a 300px plate -
   with the day's mark set above the title rather than out in a rail of its
   own. The block draws a third column for that rail with a dot and a numeral
   in it, which belongs to 01 - Golden Safari's timeline and has nothing to do
   with a notebook. */
.gsi-skin-field-notebook .itin .jd,
.gsi-skin-field-notebook .itin .jd:nth-of-type(even){
  grid-template-columns:1fr 300px; gap:40px;
  grid-template-areas:"body photo";
}
.gsi-skin-field-notebook .itin .jd-rail{ display:none; }
.gsi-skin-field-notebook .itin .jd-body{ grid-area:body; }
.gsi-skin-field-notebook .itin .jd-photo{ grid-area:photo; }

@media(max-width:860px){
  .gsi-skin-field-notebook .itin .jd,
  .gsi-skin-field-notebook .itin .jd:nth-of-type(even){
    grid-template-columns:1fr; gap:20px;
    grid-template-areas:"photo" "body";
  }
}

/* The day-by-day header is centred by the base stylesheet, which suits 01's
   timeline. Every heading in notebook-template.html sits on the left margin,
   and one centred heading in a column of left-aligned ones reads as a mistake
   rather than as emphasis. */
.gsi-skin-field-notebook .itin .itin-h,
.gsi-skin-field-notebook .itin .itin-h h2,
.gsi-skin-field-notebook .itin .itin-h p{ text-align:left; margin-inline:0; max-width:64ch; }

/* ── a card inside a band keeps its own ink ───────────────────────────────
   The five band sections above hand their writing to --on-band, which is
   right for anything sitting on the band itself and wrong for anything
   sitting on a card: a card brings an opaque light ground with it and
   keeps the page's ink whatever the band does. The park plates are the
   case that proves it - caption on paper, plate on the band.

   Last in the file on purpose. Several of the section rules above are the
   same weight as these once :is() is counted, and where two rules weigh
   the same the later one wins; putting the exception at the end is what
   makes it an exception rather than a coin toss.
   ──────────────────────────────────────────────────────────────────────── */
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) :is(.card,[class*="-card"],.lodge,.ac-item,table){ color:var(--ink); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) :is(.card,[class*="-card"],.lodge,.ac-item,table) :is(h1,h2,h3,h4){ color:var(--ink); }
.gsi-skin-field-notebook :is(.gsi-block--lodges,.gsi-block--included,.gsi-block--parks,.gsi-block--flights,.gsi-block--why) :is(.card,[class*="-card"],.lodge,.ac-item,table) p{ color:var(--ink-2); }