/* ==========================================================================
   Pixel, N46n v3 (12-11-2026), rulings PQ, PR, PS, PT, PU, PV. One file for four parts:
     H. the page header button (a round pill on every page type)
     A. the blog category filter (900 px breakpoint, equal space above and below, chips centred in height, left or centred)
     B. the guide template (hub, child page and their blocks), accepted as designed in v2
     C. the article template (four photo layouts, one field: photo_layout = band | beside | gallery | long)
   FILE: TEMPLATE - N46n v3, CSS for Nick (12-11-2026).css. It replaces the N46n v2 CSS file (and v1), which must not be loaded with it.
   LOAD ORDER: last, after n46l.css and the N46m v2 CSS. Load it on every page that prints a page header, plus the blog page, the category archives,
   the search results page, the guide pages and the single articles.
   Base: the live theme N46m. No new token, no new font, no hex colour, no priority override. Colours come from the rubrique accent of the page
   (style="--acc:var(--accent-...)", from which j6.css derives --acc-deep, --acc-wash and --acc-line, and n46i-boxes.css --acc-darker).
   Icons: Lucide (lucide-static 1.41.0, licence ISC, the set the theme already holds in assets/icons, line style, 24 px grid, 2 px stroke),
   printed with gpcf_icon(). One icon is new to the theme folder: triangle-alert.svg (same set and version). No emoji anywhere.
   ========================================================================== */

/* ==========================================================================
   H. THE PAGE HEADER BUTTON (ruling PV, task 1)
   One rule for every a.cta printed by gpcf_page_header(): home (if a page ever prints it), hub, archive, guide, article, profile, rates.
   Geometry only. A fully round pill, exactly as wide as its label plus its padding, the same shape the hub hero button (n46k, OC5) already has.
   The colours and the states are NOT touched: the rust panel-warm ground of NF2c, the hub variants (hero-v1 teal, hero-v2 turquoise, hero-v3 golden)
   and the golden rule of the button stay as ruled in n46i-boxes.css and n46k.css, with their hover, focus and white gap line.
   A label that cannot fit the column (a long business name in "Contact {business}") wraps onto two lines instead of leaving the pill.
   ========================================================================== */
body .pagehead a.cta{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-4);
  width:auto;
  min-width:0;
  max-width:100%;
  min-height:var(--tap-comfortable);
  padding:var(--space-3) var(--space-11);
  border-radius:var(--radius-pill);
  font-size:var(--size-card-title);
  font-weight:var(--weight-bold);
  line-height:1.2;
  text-align:center;
  text-wrap:balance;
}
/* On a phone the pill keeps the width of its label and is centred (as the hub already was); before, the other page types showed a full-width rectangle. */
@media (max-width:768px){
  body .pagehead a.cta{
    display:flex;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }
}
/* Hover on the page types that are not a hub. Ruling NF2c says the hover of the header button is the focus colour (the panel colour 80 % with 20 % ink),
   but n46i-boxes.css lists the header button in its focus rule only, so today the j6.css hover (a pale tint with the deep accent as text) wins and the rust
   button turns pale under the pointer. This rule gives it the NF2c hover. The hub variants keep their own hover (n46k.css, more specific).
   FLAG for Brain: delete this rule to keep today's pale hover. */
body .pagehead a.cta:hover{
  background-color:color-mix(in srgb,var(--panel-warm,var(--os-rusty-spice)) 80%,var(--os-ink-black));
  color:var(--on-dark);
}


/* ==========================================================================
   A. BLOG CATEGORY FILTER
   ========================================================================== */

/* ----- A1. The nav and its two rows ----- */
/* THE SWITCH (ruling PV, task 3). Where the chips sit across the page. Change this one declaration and nothing else:
     --catnav-justify:flex-start;   (a) the chips start at the left edge of the grid (the ruled default)
     --catnav-justify:center;       (b) the chips are centred across the page
   It moves the chip rows, the region row and the control captions together. On a phone (768 px and under) the rows always start at the left. */
:root{ --catnav-justify:flex-start; }
/* --catnav-space is the space between the chip block and the first row of cards, and it equals the space above the block: the theme prints
   12 px under the intro line (the p margin) and 24 px of section padding, so 12 + 24 = 36 px on each side. */
.gpcf-catnav{
  --catnav-space:calc(var(--space-5) + var(--space-10));
  margin:0 0 var(--catnav-space);
}
.gpcf-catnav ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:var(--catnav-justify);
  gap:var(--space-3);
  margin:0;
  padding:0;
  list-style:none;
}
.gpcf-catnav li{ display:flex; align-items:center; flex:0 0 auto; width:auto; margin:0; padding:0; list-style:none; }

/* Second row: the subcategories of the chosen rubrique, on a panel in that rubrique's own wash. */
.gpcf-catnav__sub{
  margin:var(--space-4) 0 0;
  padding:var(--space-4) var(--space-5);
  background:var(--acc-wash,var(--os-tint));
  border-radius:var(--radius-card);
}

/* Caption of a control, printed only where two controls meet (the Restaurants and Real estate archives): see A5. */
.gpcf-ctrlcap{
  display:flex;
  align-items:center;
  justify-content:var(--catnav-justify);
  gap:var(--space-2);
  margin:0 0 var(--space-3);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--os-text);
}
.gpcf-ctrlcap svg{ width:18px; height:18px; flex:none; stroke:var(--acc-deep,var(--os-link)); }

/* ----- A2. The chip: a rounded rectangle (ruling QN), exactly as wide as its label plus its padding ----- */
body .gpcf-catnav a.gpcf-catchip,
body .gpcf-chips .gpcf-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  box-sizing:border-box;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  max-width:none;
  min-height:var(--tap-min);
  padding:0 var(--space-8);
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  background:var(--os-card);
  color:var(--acc-deep,var(--os-link));
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body-sm);
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),color var(--duration-base) var(--ease),box-shadow var(--duration-base) var(--ease);
}
/* The accent dot of a rubrique chip (decorative, not read). */
body .gpcf-catnav a.gpcf-catchip--rub::before{
  content:"";
  flex:none;
  width:var(--space-3);
  height:var(--space-3);
  border-radius:50%;
  background:var(--acc,var(--os-accent));
}

/* ----- A3. States: hover, pressed, keyboard focus ----- */
/* Hover: a second line inside the border (a 2 px frame without a layout shift) in the deep accent, and the accent wash. */
body .gpcf-catnav a.gpcf-catchip:hover,
body .gpcf-chips .gpcf-chip:hover{
  background:var(--acc-wash,var(--os-tint));
  border-color:var(--acc-deep,var(--os-link));
  box-shadow:inset 0 0 0 1px var(--acc-deep,var(--os-link));
  text-decoration:none;
}
body .gpcf-catnav__sub a.gpcf-catchip:hover{ background:var(--os-card); }
/* Pressed: the accent line tint as the ground, the label in the darker accent (it holds 4.5:1 on that tint for all twelve rubriques). */
body .gpcf-catnav a.gpcf-catchip:active,
body .gpcf-chips .gpcf-chip:active{
  background:var(--acc-line,var(--os-line));
  border-color:var(--acc-deep,var(--os-link));
  color:var(--acc-darker,var(--acc-deep,var(--os-link)));
  box-shadow:inset 0 0 0 1px var(--acc-deep,var(--os-link));
}
/* Keyboard focus: a 3 px ring in the deep accent, 2 px off the chip. It shows on the white page and on the tint of the second row. */
body .gpcf-catnav a.gpcf-catchip:focus-visible,
body .gpcf-chips .gpcf-chip:focus-visible{
  outline:3px solid var(--acc-deep,var(--os-link));
  outline-offset:2px;
}

/* The page being shown: filled in the deep accent with white text, as the pressed region chip. */
body .gpcf-catnav a.gpcf-catchip[aria-current="page"],
body .gpcf-chips .gpcf-chip[aria-pressed="true"]{
  background:var(--acc-deep,var(--os-link));
  border-color:var(--acc-deep,var(--os-link));
  box-shadow:none;
  color:var(--on-dark);
}
body .gpcf-catnav a.gpcf-catchip[aria-current="page"]::before{ background:var(--on-dark); }
body .gpcf-catnav a.gpcf-catchip[aria-current="page"]:hover,
body .gpcf-catnav a.gpcf-catchip[aria-current="page"]:active,
body .gpcf-chips .gpcf-chip[aria-pressed="true"]:hover,
body .gpcf-chips .gpcf-chip[aria-pressed="true"]:active{
  background:var(--acc-darker,var(--acc-deep,var(--os-link)));
  border-color:var(--acc-darker,var(--acc-deep,var(--os-link)));
  box-shadow:none;
}
/* The rubrique that holds the page being shown (a subcategory archive): outlined in its deep accent on its wash. */
body .gpcf-catnav a.gpcf-catchip[aria-current="true"]{
  background:var(--acc-wash,var(--os-tint));
  border-color:var(--acc-deep,var(--os-link));
}

/* ----- A4. Tablet and phone ----- */
/* 769 px and over: the rows wrap as on desktop, one chip never stretches. From 769 to 900 px they used to scroll in one row (ruling PU); ruling QN4 takes
   that away, so a tablet shows every chip and none is cut at the edge. */
/* 768 px and under (ruling QJ): the chips of every row wrap onto as many lines as they need. All of them show, nothing scrolls sideways.
   The chip is lower than on a desktop (40 px high, 14 px of padding each side, same label size as on a desktop) and the gap is the same between chips and between lines.
   The category row and the region row take the same chip, so the two controls look alike. The second row keeps its rounded panel inside the page gutter. */
@media (max-width:768px){
  .gpcf-catnav ul{ justify-content:flex-start; gap:var(--space-3); }
  body .gpcf-catnav a.gpcf-catchip,
  body .gpcf-chips .gpcf-chip{
    min-height:var(--space-14);
    padding:0 var(--space-6);
  }
  .gpcf-chips{ gap:var(--space-3); }
}

/* ----- A5. Archives that carry two controls (Restaurants, Real estate): the category row first, the region row under it ----- */
/* The category row is a set of links (accent dot, one per page). The region row is a set of buttons that filter the cards already on the page.
   They are told apart by a caption each (.gpcf-ctrlcap, printed only on these archives), by the dot (category chips only) and by a hairline above the region row.
   The region caption is the first child of the .gpcf-chips group, so it stays hidden with the group until the script shows it. */
.gpcf-chips{ align-items:center; justify-content:var(--catnav-justify); }
.gpcf-chips > .gpcf-ctrlcap{
  flex:0 0 100%;
  margin:0;
  padding-top:var(--space-7);
  border-top:1px solid var(--os-line);
}
.gpcf-catnav > .gpcf-ctrlcap{ margin-bottom:var(--space-3); }

/* ----- A5b. Phones: each filter row is one dropdown (ruling QO) ----- */
/* One markup serves every width. The first child of the category nav and of the region group is a closed disclosure (details, summary, class gpcf-pick); the lists follow it.
   769 px and over: it is not shown, and the lists are the wrapped chips of A2 to A5, unchanged.
   768 px and under: the disclosure shows "level, current choice" with a chevron. The list under it shows only while the disclosure is open, as one rounded panel
   of full-width rows (44 px high, accent dot kept, the current one filled). The links stay in the page, so the category row works without script;
   the region row needs its script, as it always did. The subcategory row (second row of the category nav) keeps its chips. */
.gpcf-pick{ display:none; }
.gpcf-chips__list{ display:contents; }
@media (max-width:768px){
  .gpcf-pick ~ .gpcf-ctrlcap{ display:none; }
  .gpcf-pick{ display:block; flex:0 0 100%; min-width:0; margin:0; }
  .gpcf-pick > summary{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    box-sizing:border-box;
    width:100%;
    min-height:var(--tap-min);
    margin:0;
    padding:var(--space-3) var(--space-8);
    border:1px solid var(--os-line);
    border-radius:var(--radius-sm);
    background:var(--os-card);
    color:var(--os-text);
    font-family:var(--font-body);
    font-size:var(--size-body-sm);
    line-height:1.2;
    list-style:none;
    cursor:pointer;
  }
  .gpcf-pick > summary::-webkit-details-marker{ display:none; }
  .gpcf-pick__lvl{ flex:none; font-weight:var(--weight-regular); }
  .gpcf-pick__cur{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    flex:0 1 auto;
    min-width:0;
    font-weight:var(--weight-bold);
    color:var(--acc-deep,var(--os-link));
  }
  .gpcf-pick--rub .gpcf-pick__cur::before{
    content:"";
    flex:none;
    width:var(--space-3);
    height:var(--space-3);
    border-radius:50%;
    background:var(--acc,var(--os-accent));
  }
  .gpcf-pick > summary::after{
    content:"";
    flex:none;
    width:var(--space-3);
    height:var(--space-3);
    margin:0 var(--space-1) var(--space-1) auto;
    border-right:2px solid var(--acc-deep,var(--os-link));
    border-bottom:2px solid var(--acc-deep,var(--os-link));
    transform:rotate(45deg);
  }
  .gpcf-pick[open] > summary::after{ margin:var(--space-1) var(--space-1) 0 auto; transform:rotate(-135deg); }
  .gpcf-pick > summary:hover,
  .gpcf-pick[open] > summary{ border-color:var(--acc-deep,var(--os-link)); }
  .gpcf-pick > summary:focus-visible{
    outline:3px solid var(--acc-deep,var(--os-link));
    outline-offset:2px;
  }
  /* The panel: closed, the list is not shown; open, it is one rounded panel under the button. */
  .gpcf-catnav > .gpcf-pick ~ ul,
  .gpcf-pick ~ .gpcf-chips__list{ display:none; }
  .gpcf-catnav > .gpcf-pick[open] ~ ul,
  .gpcf-pick[open] ~ .gpcf-chips__list{
    display:flex;
    flex:0 0 100%;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:var(--space-1);
    margin:0;
    padding:var(--space-2);
    box-sizing:border-box;
    border:1px solid var(--os-line);
    border-radius:var(--radius-sm);
    background:var(--os-card);
  }
  .gpcf-catnav > .gpcf-pick[open] ~ ul{ margin-top:var(--space-3); }
  .gpcf-catnav > .gpcf-pick ~ ul > li{ display:block; width:100%; }
  body .gpcf-catnav > .gpcf-pick ~ ul a.gpcf-catchip,
  body .gpcf-pick ~ .gpcf-chips__list .gpcf-chip{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
    width:100%;
    min-height:var(--tap-min);
    padding:var(--space-3) var(--space-7);
    border:0;
    text-align:left;
    white-space:normal;
  }
}

/* ----- A6. The guide card in a grid: the article card plus a "Guide" tag on the photo ----- */
.card--guide .ph{ position:relative; }
.card--guide .card__tag{
  position:absolute;
  left:var(--space-3);
  bottom:var(--space-3);
  padding:var(--space-1) var(--space-4);
  border-radius:var(--radius-pill);
  background:var(--os-link);
  color:var(--on-dark);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  line-height:1.2;
  text-transform:uppercase;
}

/* ==========================================================================
   B. THE GUIDE TEMPLATE (fixed reference pages: a hub and its child pages)
   One column of 880 px inside .wrap; every block below is a field or a shortcode of the editor. The accent of the page is the rubrique
   accent on the body (Visas and immigration: Services aux expatriés). The box rule of n46i-boxes.css holds: white card, hairline, 14 px
   corners, no shadow; the accent appears as text, icons, solid tiles and buttons. One ruled exception: the Careful box (B5).
   ========================================================================== */
.gpcf-guide{
  max-width:880px;
  margin:var(--space-13) auto var(--space-16);
}
.gpcf-guide > * + *{ margin-top:var(--section-gap); }
.gpcf-guide svg{ flex:none; }

/* Small label (uppercase, 14 px). */
.gpcf-label{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--acc-deep,var(--os-link));
}

/* ----- B1. Page head: the title is the page header of record; under it the summary box and the page date ----- */
.gpcf-guide__summary{
  padding:var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
}
body p.gpcf-guide__lead{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.55;
  color:var(--os-text);
}
.gpcf-updated{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin:var(--space-5) 0 0;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-caption);
  line-height:1.3;
  color:var(--os-text);
}
.gpcf-updated svg{ width:18px; height:18px; stroke:var(--acc-deep,var(--os-link)); }

/* ----- B2. At a glance: three to five facts, an icon each ----- */
.gpcf-label + .gpcf-glance,
.gpcf-label + .gpcf-guidecards{ margin-top:var(--space-5); }
.gpcf-glance{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
/* The hairlines are the right and bottom borders of each item, pushed under the frame by the negative margins and clipped by it,
   so an odd count never leaves a grey cell. */
.gpcf-glance__item{
  display:flex;
  align-items:flex-start;
  gap:var(--space-4);
  margin:0 -1px -1px 0;
  padding:var(--space-9);
  border-right:1px solid var(--os-line);
  border-bottom:1px solid var(--os-line);
  background:var(--os-card);
}
.gpcf-glance__item svg{ width:26px; height:26px; margin-top:2px; stroke:var(--acc-deep,var(--os-link)); }
.gpcf-glance__k{
  display:block;
  font-family:var(--font-body);
  font-size:var(--size-caption);
  line-height:1.3;
  color:var(--os-muted);
}
.gpcf-glance__v{
  display:block;
  margin-top:var(--space-1);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  line-height:1.3;
  color:var(--os-heading);
}

/* ----- B3. Chapter card: icon, heading, body, its own "Last updated" and source ----- */
.gpcf-chapter{
  padding:var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
}
.gpcf-chapter__head{ display:flex; align-items:center; gap:var(--space-5); }
.gpcf-tile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:var(--tap-min);
  height:var(--tap-min);
  border-radius:var(--radius-md);
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
}
.gpcf-tile svg{ width:24px; height:24px; stroke:currentColor; }
.gpcf-chapter h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading);
}
body .gpcf-chapter__body{ margin-top:var(--space-6); }
body .gpcf-chapter__body > * + *{ margin-top:var(--space-5); }
body .gpcf-chapter__body > p,
body .gpcf-chapter__body > ul:not([class]) > li{
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-text);
}
body .gpcf-chapter__body > p{ margin-bottom:0; }
body .gpcf-chapter__body > ul:not([class]){ margin-bottom:0; margin-left:0; padding-left:var(--space-9); }
body .gpcf-chapter__body > ul:not([class]) > li + li{ margin-top:var(--space-2); }
.gpcf-chapter__foot{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-10);
  margin-top:var(--space-9);
  padding-top:var(--space-5);
  border-top:1px solid var(--os-line);
  font-family:var(--font-body);
  font-size:var(--size-caption);
  line-height:1.3;
  color:var(--os-text);
}
.gpcf-chapter__foot span,
.gpcf-chapter__foot a{ display:inline-flex; align-items:center; gap:var(--space-2); }
.gpcf-chapter__foot svg{ width:18px; height:18px; stroke:var(--acc-deep,var(--os-link)); }
.gpcf-chapter__foot a{ color:var(--acc-deep,var(--os-link)); text-decoration:underline; text-underline-offset:3px; }
.gpcf-chapter__foot a:hover{ color:var(--acc-darker,var(--acc-deep,var(--os-link))); }
.gpcf-chapter__foot a:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; border-radius:var(--radius-sm); }

/* ----- B4. The standard notice: the same text on every guide; neutral ground, no line ----- */
.gpcf-notice{
  display:flex;
  gap:var(--space-5);
  padding:var(--space-9) var(--space-10);
  background:var(--os-sunken);
  border-radius:var(--radius-card);
}
.gpcf-notice svg{ width:26px; height:26px; margin-top:2px; stroke:var(--acc-deep,var(--os-link)); }
body .gpcf-notice p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-body-sm);
  line-height:1.6;
  color:var(--os-text);
}

/* ----- B5. The Careful box: warnings, common mistakes, penalties. It is the warning colour already ruled for the guides (.callout--warn, the red-brown
   --os-oxidized-iron, white on it 6.97:1) made unmistakable: a 2 px frame, a solid tile with the alert icon and the label "Careful" in capitals.
   The ordinary note stays the soft wash of the guides (.callout). This frame is the one exception to the single white card of n46i-boxes.css. ----- */
.gpcf-careful{
  padding:var(--space-10);
  background:var(--os-card);
  border:2px solid var(--os-oxidized-iron);
  border-radius:var(--radius-card);
}
.gpcf-careful__head{ display:flex; align-items:center; gap:var(--space-5); }
.gpcf-careful .gpcf-tile{ background:var(--os-oxidized-iron); }
.gpcf-careful__label{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
  color:var(--os-oxidized-iron);
}
body .gpcf-careful__body{ margin-top:var(--space-6); }
body .gpcf-careful__body > * + *{ margin-top:var(--space-4); }
body .gpcf-careful__body > p,
body .gpcf-careful__body > ul > li{
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-text);
}
body .gpcf-careful__body > p{ margin-bottom:0; }
body .gpcf-careful__body strong{ color:var(--os-heading); }
body .gpcf-careful__body > ul{ margin-bottom:0; margin-left:0; padding-left:var(--space-9); }
body .gpcf-careful__body > ul > li + li{ margin-top:var(--space-2); }

/* ----- B6. Steps (a procedure) ----- */
.gpcf-steps{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:gpcf-step;
}
body .gpcf-steps > li{
  position:relative;
  counter-increment:gpcf-step;
  margin:0;
  padding:0 0 var(--space-10) 52px;
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-text);
}
body .gpcf-steps > li:last-child{ padding-bottom:0; }
body .gpcf-steps > li::before{
  content:counter(gpcf-step);
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-body);
  line-height:1;
}
body .gpcf-steps > li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:17px;
  top:42px;
  bottom:var(--space-2);
  width:2px;
  background:var(--acc-line,var(--os-line));
}
body .gpcf-steps strong{ display:block; color:var(--os-heading); }

/* ----- B7. Documents checklist: a box to tick, drawn in CSS (no icon file, and it prints as a real tick box) ----- */
.gpcf-checklist{ margin:0; padding:0; list-style:none; }
body .gpcf-checklist > li{
  position:relative;
  margin:0;
  padding:0 0 0 36px;
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-text);
}
body .gpcf-checklist > li + li{ margin-top:var(--space-4); }
body .gpcf-checklist > li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  box-sizing:border-box;
  width:22px;
  height:22px;
  border:2px solid var(--acc-deep,var(--os-link));
  border-radius:6px;
  background:var(--os-card);
}
body .gpcf-checklist small{ display:block; font-size:var(--size-caption); line-height:1.4; color:var(--os-muted); }

/* ----- B8. Fees table: scrolls sideways inside its own wrapper on a phone ----- */
.gpcf-tablewrap{ overflow-x:auto; border:1px solid var(--os-line); border-radius:var(--radius-card); background:var(--os-card); }
.gpcf-fees{ width:100%; min-width:460px; border-collapse:collapse; font-family:var(--font-body); font-size:var(--size-body); line-height:1.4; color:var(--os-text); }
.gpcf-fees caption{
  padding:var(--space-5) var(--space-9) 0;
  text-align:left;
  font-weight:var(--weight-bold);
  font-size:var(--size-caption);
  color:var(--os-text);
  caption-side:bottom;
  padding-bottom:var(--space-5);
}
.gpcf-fees th,
.gpcf-fees td{ padding:var(--space-5) var(--space-9); text-align:left; vertical-align:top; border-bottom:1px solid var(--os-line); }
.gpcf-fees thead th{ background:var(--acc-wash,var(--os-tint)); font-weight:var(--weight-bold); color:var(--os-heading); }
.gpcf-fees tbody tr:last-child th,
.gpcf-fees tbody tr:last-child td{ border-bottom:0; }
.gpcf-fees tbody th{ font-weight:var(--weight-bold); color:var(--os-heading); }
.gpcf-fees .gpcf-fees__num{ text-align:right; white-space:nowrap; font-weight:var(--weight-bold); color:var(--os-heading); }

/* ----- B9. In Phuket: office, address, hours, map link ----- */
.gpcf-phuket{
  padding:var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
}
.gpcf-phuket__head{ display:flex; align-items:center; gap:var(--space-5); }
.gpcf-phuket h2{ margin:0; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--size-h3); line-height:var(--lh-h3); color:var(--os-heading); }
.gpcf-phuket .gpcf-btn{ margin-top:var(--space-9); }
.gpcf-phuket dl{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:var(--space-4) var(--space-10);
  margin:var(--space-9) 0 0;
}
.gpcf-phuket dt{ margin:0; font-family:var(--font-body); font-weight:var(--weight-bold); font-size:var(--size-body); line-height:1.4; color:var(--os-heading); }
.gpcf-phuket dd{ margin:0; font-family:var(--font-body); font-size:var(--size-body); line-height:1.4; color:var(--os-text); }

/* ----- B10. Buttons of the guide: pills, exactly as wide as the label plus padding ----- */
.gpcf-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  box-sizing:border-box;
  width:auto;
  min-height:var(--tap-min);
  padding:0 var(--space-9);
  border:1px solid var(--acc-deep,var(--os-link));
  border-radius:var(--radius-pill);
  background:var(--os-card);
  color:var(--acc-deep,var(--os-link));
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-small);
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),color var(--duration-base) var(--ease);
}
.gpcf-btn svg{ width:18px; height:18px; stroke:currentColor; }
.gpcf-btn:hover{ background:var(--acc-wash,var(--os-tint)); border-color:var(--acc-darker,var(--acc-deep,var(--os-link))); color:var(--acc-darker,var(--acc-deep,var(--os-link))); text-decoration:none; }
.gpcf-btn:active{ background:var(--acc-line,var(--os-line)); }
.gpcf-btn:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; }

/* ----- B11. Sources at the foot: numbered official links with the read date ----- */
.gpcf-sources{ padding:var(--space-10); background:var(--os-card); border:1px solid var(--os-line); border-radius:var(--radius-card); }
body .gpcf-sources__list{ margin:var(--space-5) 0 0; padding-left:var(--space-10); }
body .gpcf-sources__list li{
  margin:0;
  padding-left:var(--space-2);
  font-family:var(--font-body);
  font-size:var(--size-body-sm);
  line-height:1.5;
  color:var(--os-text);
}
body .gpcf-sources__list li + li{ margin-top:var(--space-4); }
body .gpcf-sources__list li::marker{ font-weight:var(--weight-bold); color:var(--acc-deep,var(--os-link)); }
body .gpcf-sources__list a{ color:var(--acc-deep,var(--os-link)); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
body .gpcf-sources__list a:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; border-radius:var(--radius-sm); }
body .gpcf-sources__list time{ display:block; font-size:var(--size-caption); color:var(--os-muted); }

/* ----- B12. Hub: the cards that lead to the child pages, and previous and next at the foot of a child page ----- */
.gpcf-guidecards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--card-gap); }
body a.gpcf-gcard{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  color:inherit;
  text-decoration:none;
  transition:box-shadow var(--duration-base) var(--ease),transform var(--duration-base) var(--ease);
}
body a.gpcf-gcard:hover{ box-shadow:var(--shadow-floating); transform:translateY(-2px); text-decoration:none; }
body a.gpcf-gcard:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; }
.gpcf-gcard h3{ margin:0; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--size-card-title); line-height:var(--lh-card-title); color:var(--os-heading); }
.gpcf-gcard p{ margin:0; font-family:var(--font-body); font-size:var(--size-body-sm); line-height:1.5; color:var(--os-text); }
.gpcf-gcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:auto; padding-top:var(--space-3); font-family:var(--font-body); font-size:var(--size-caption); color:var(--os-muted); }
.gpcf-gcard__foot svg{ width:20px; height:20px; stroke:var(--acc-deep,var(--os-link)); }
.gpcf-pager{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--card-gap); }
body a.gpcf-pager__link{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  padding:var(--space-9) var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  color:var(--acc-deep,var(--os-link));
  text-decoration:none;
}
body a.gpcf-pager__link:hover{ border-color:var(--acc-deep,var(--os-link)); box-shadow:inset 0 0 0 1px var(--acc-deep,var(--os-link)); }
body a.gpcf-pager__link:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; }
.gpcf-pager__link svg{ width:22px; height:22px; stroke:currentColor; }
.gpcf-pager__link--next{ flex-direction:row-reverse; text-align:right; }
.gpcf-pager__link--next:only-child{ grid-column:2; }
.gpcf-pager__k{ display:block; font-family:var(--font-body); font-size:var(--size-caption); color:var(--os-muted); }
.gpcf-pager__t{ display:block; font-family:var(--font-body); font-weight:var(--weight-bold); font-size:var(--size-body); line-height:1.3; color:var(--os-heading); }

/* ----- B13. The advertiser slot (guides and articles): marked as advertising, optional ----- */
.gpcf-adslot__label{
  display:inline-block;
  margin:0 0 var(--space-3);
  padding:var(--space-1) var(--space-4);
  border:1px solid var(--os-line);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--os-text);
}
.gpcf-adslot__card{
  display:flex;
  align-items:center;
  gap:var(--space-10);
  padding:var(--space-10);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
}
.gpcf-adslot__ph{ flex:0 0 150px; align-self:stretch; min-height:110px; border-radius:var(--radius-md); background:var(--os-sunken); }
.gpcf-adslot__card h3{ margin:0; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--size-h3); line-height:var(--lh-h3); color:var(--os-heading); }
.gpcf-adslot__card p{ margin:var(--space-2) 0 var(--space-5); font-family:var(--font-body); font-size:var(--size-body-sm); line-height:1.5; color:var(--os-text); }

/* ----- B14. Phone ----- */
@media (max-width:768px){
  .gpcf-guide{ margin-top:var(--space-10); margin-bottom:var(--space-15); }
  .gpcf-guide__summary,
  .gpcf-chapter,
  .gpcf-careful,
  .gpcf-phuket,
  .gpcf-sources,
  .gpcf-adslot__card{ padding:var(--space-9); }
  .gpcf-glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gpcf-glance__item{ padding:var(--space-7); }
  .gpcf-phuket dl{ grid-template-columns:1fr; gap:var(--space-1); }
  .gpcf-phuket dd{ margin-bottom:var(--space-4); }
  .gpcf-guidecards,
  .gpcf-pager{ grid-template-columns:1fr; }
  .gpcf-adslot__card{ flex-direction:column; align-items:flex-start; gap:var(--space-5); }
}

/* ----- B15. Print: the guide column prints as a checklist (no advertiser slot, no previous and next, no buttons; frames in the text colour; link addresses written out; no block split across pages).
   The site header and the page header band print as the theme prints them; this file does not touch them. ----- */
@media print{
  .gpcf-adslot,
  .gpcf-pager,
  .gpcf-btn{ display:none; }
  .gpcf-guide{ max-width:none; margin:0; }
  .gpcf-chapter,
  .gpcf-careful,
  .gpcf-phuket,
  .gpcf-sources,
  .gpcf-notice,
  .gpcf-glance,
  .gpcf-steps > li{ break-inside:avoid; }
  .gpcf-chapter,
  .gpcf-careful,
  .gpcf-phuket,
  .gpcf-sources,
  .gpcf-glance,
  .gpcf-guide__summary{ border-color:var(--os-text); }
  body .gpcf-sources__list a::after,
  .gpcf-chapter__foot a::after{ content:" (" attr(href) ")"; text-decoration:none; overflow-wrap:anywhere; }
}

/* ==========================================================================
   C. THE ARTICLE TEMPLATE (single.php)
   Unchanged and not restyled: the header (title, date, by line, summary line = the header .sub, or the standfirst of a client article), the body typography
   of article.css (.abody), the rail and the band. The header band photo is the wide photo of the article (ruling PU): nothing is ever printed under the title,
   and an article never shows two large pictures one under the other.
   One field chooses the layout of the pictures in the body: photo_layout, four values (the body class or the data attribute Nick prefers):
     band     the header band photo only. No picture in the body.
     beside   the header band photo and ONE photo beside an early paragraph (figure.gpcf-fig.gpcf-fig--side).
     gallery  the header band photo and a gallery of three (div.gpcf-gallery) at mid-article.
     long     for articles above about 1,200 words: the header band photo, one photo beside an early paragraph, a gallery of three at mid-article,
              an optional pull quote (the blockquote of article.css), and a closing photo only if one exists (figure.gpcf-fig.gpcf-fig--close).
   Blocks the editor inserts in the body:
     figure.gpcf-fig.gpcf-fig--side   : one photo beside the paragraph that follows it (right, 38 % of the column; full width on a phone)
     div.gpcf-gallery                 : three photos in a row (a first photo full width, then two, on a phone)
     figure.gpcf-fig.gpcf-fig--close  : the closing photo, medium (62 % of the column, 3:2; full width on a phone), after the last paragraph and before the sources
   ========================================================================== */
article.abody{ display:flow-root; }
body .gpcf-fig{ margin:var(--space-10) 0 0; }
body .gpcf-fig img{ display:block; width:100%; height:auto; margin:0; border-radius:var(--radius-card); background:var(--os-sunken); }
body .gpcf-fig figcaption{ margin-top:var(--space-3); font-family:var(--font-body); font-size:var(--size-caption); line-height:1.4; color:var(--os-muted); }
body .gpcf-fig--side{ float:right; width:38%; margin:var(--space-2) 0 var(--space-9) var(--space-10); }
body .gpcf-fig--side img{ aspect-ratio:3 / 2; object-fit:cover; }
/* A heading or a pull quote never starts beside a floated photo. */
article.abody h2,
article.abody blockquote{ clear:right; }
body .gpcf-fig--close{ width:62%; margin-top:var(--space-13); }
body .gpcf-fig--close img{ aspect-ratio:3 / 2; object-fit:cover; }
.gpcf-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--card-gap); margin:var(--space-10) 0 0; }
body .gpcf-gallery .gpcf-fig{ margin:0; }
body .gpcf-gallery .gpcf-fig img{ aspect-ratio:4 / 3; object-fit:cover; }
@media (max-width:768px){
  body .gpcf-fig--side{ float:none; width:100%; margin:var(--space-10) 0 0; }
  body .gpcf-fig--close{ width:100%; }
  .gpcf-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
  body .gpcf-gallery .gpcf-fig:first-child{ grid-column:1 / -1; }
}

/* After the body, in .amain (outside .abody, so the body typography does not reach them): sources, advertiser slot, related articles. */
.amain > .gpcf-sources,
.amain > .gpcf-adslot{ margin-top:var(--space-13); }
.gpcf-related{ margin-top:var(--space-16); }
.gpcf-related h2{ margin:0 0 var(--space-9); font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--size-h2); line-height:var(--lh-h2); color:var(--os-heading); }
.gpcf-related .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1100px){
  .gpcf-related .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .gpcf-related .cards{ grid-template-columns:1fr; }
}


/* ==========================================================================
   C. N46n v4 (12-11-2026): five display points found in the build. Everything above is v3, unchanged. Each rule below is scoped so that it
   beats the theme's own rule on specificity (no important, no new token). The selectors are listed in the DONE report with the theme rule each one beats.
   ========================================================================== */

/* ----- C1. A guide (page or post) has no rail: one column of 880 px, centred, as accepted ----------------------------------------------
   Needs the body class gpcf-is-guide on a flagged page or post (gpcf_n46n_is_guide(), filter body_class). Without the class nothing below applies,
   so unflagged pages and articles keep the column and the rail of the theme. The rail is also removed in the PHP (the DONE report says how);
   the rule here keeps it out of sight if a template still prints it. */
body.gpcf-is-guide :is(.split, .asplit){ grid-template-columns:minmax(0, 1fr); }
body.gpcf-is-guide :is(.split, .asplit) > .rail{ display:none; }
body.gpcf-is-guide :is(.sigmain, .amain){ width:100%; max-width:880px; margin-inline:auto; }

/* ----- C2. Headings of the guide blocks on a page or a post: the theme's heading rule for the body must not reach them ------------------
   The theme sets h2 inside .entry-content and .abody to the page heading size, in the accent colour, with a top margin of 34 px. The blocks of B3, B5, B9 and B11
   keep their own sizes. */
html body section.gpcf-sources > h2.gpcf-label{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--acc-deep,var(--os-link));
}
html body section.gpcf-chapter .gpcf-chapter__head > h2,
html body section.gpcf-phuket .gpcf-phuket__head > h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  letter-spacing:normal;
  text-transform:none;
  color:var(--os-heading);
}
html body aside.gpcf-careful .gpcf-careful__head > h2.gpcf-careful__label{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
  color:var(--os-oxidized-iron);
}

/* ----- C3. The advertiser slot with a real picture (logo or photo, any ratio) -----------------------------------------------------------
   The picture is shown whole (never cropped) and centred in the grey panel. The picture must be a size that keeps its ratio (medium), not the 150 by 150 crop. */
.gpcf-adslot__ph{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
body .gpcf-adslot__ph > img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:200px;
  margin:0;
  border:0;
  border-radius:0;
  object-fit:contain;
}
@media (max-width:768px){
  /* One column: the panel is as wide as the card, the picture sits in the middle of it, never wider than itself and never taller than 200 px. */
  .gpcf-adslot__ph{ flex:0 0 auto; align-self:stretch; box-sizing:border-box; width:100%; min-height:0; padding:var(--space-5); }
  body .gpcf-adslot__ph > img{ width:auto; max-width:100%; max-height:200px; }
}

/* ----- C4. Fees table: the caption under the table, one frame, the accepted header (B8) ---------------------------------------------------
   HTML wants the caption first in the table; caption-side moves it under the rows. The theme's table style (section 5 of j6.css) wins over B8 on specificity:
   it puts the caption on top, draws a second frame and a 24 px margin, paints the header in the deep accent and, on a phone, stacks a two-column table as cards
   (the fee then falls outside the 460 px table and cannot be read). The doubled class lifts these rules above all of it. */
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees{
  display:table;
  width:100%;
  min-width:460px;
  margin:0;
  border:0;
  border-radius:0;
  border-collapse:collapse;
  background:none;
  overflow:visible;
  font-size:var(--size-body);
  line-height:1.4;
  color:var(--os-text);
}
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees caption{
  display:table-caption;
  caption-side:bottom;
  padding:var(--space-5) var(--space-9);
  text-align:left;
  font-weight:var(--weight-bold);
  font-size:var(--size-caption);
  line-height:1.4;
  color:var(--os-text);
}
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees thead{ display:table-header-group; position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees tbody{ display:table-row-group; }
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees tr{ display:table-row; margin:0; border:0; border-radius:0; overflow:visible; background:none; }
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees tbody tr > :is(th, td),
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees thead tr > :is(th, td){
  display:table-cell;
  position:static;
  padding:var(--space-5) var(--space-9);
  border:0;
  border-bottom:1px solid var(--os-line);
  border-radius:0;
  box-shadow:none;
  background:none;
  text-align:left;
  vertical-align:top;
  font-size:var(--size-body);
  font-weight:var(--weight-regular);
  color:var(--os-text);
}
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees thead tr > th{ background:var(--acc-wash, var(--os-tint)); font-weight:var(--weight-bold); color:var(--os-heading); }
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees tbody tr > th{ font-weight:var(--weight-bold); color:var(--os-heading); }
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees tbody tr:last-child > :is(th, td){ border-bottom:0; }
html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees .gpcf-fees__num{ text-align:right; white-space:nowrap; font-weight:var(--weight-bold); color:var(--os-heading); }
/* On a phone a two-column table needs no 460 px: it takes the width of its wrapper and the fee stays in view; a wider table still scrolls inside the wrapper (B8). */
@media (max-width:768px){
  html body .gpcf-tablewrap table.gpcf-fees.gpcf-fees{ min-width:0; }
}

/* ==========================================================================
   D. N46o (12-11-2026): the body column, one width and clear gaps (ruling RE); the header band on tablets (ruling QW2).
   Scope: the content column of advertiser profiles (.desc), articles (.abody) and pages (.entry-content). Tokens only.
   ========================================================================== */

/* ----- D1. One width (RE2): text, photos and video share the same left and right edges ----- */
/* client-profile.css (.desc p) caps the text of an advertiser profile at 70ch, about 610 px, while photos and video take the full
   820 px column. The cap goes on profiles only; articles and pages have none. */
body .desc p{ max-width:none; }
/* A video box pasted in the content with its own width (style "aspect-ratio:16/9; max-width:800px; margin:0 auto") sits 10 px inside
   each edge of the column. min-width wins over max-width, so the box takes the column width again; its 16:9 ratio keeps the height in step. */
body :is(.entry-content, .abody, .desc) div[style*="aspect-ratio"]:has(> iframe){ min-width:100%; }

/* ----- D2. Clear gaps (RE3): a photo or a video never touches the text or the heading above it ----- */
/* Articles already keep 16 px above every photo (article.css, .abody img). On a profile the editor prints each captioned photo as
   <figure style="margin:0 0 20px 0">: the inline margin wipes the 16 px that style.css sets above a figure, and .desc img has no margin.
   The profile photo gets the article's gap, on the image itself, so no inline style is fought. */
body .desc :is(figure, .wp-caption) > img,
body .desc :is(figure, .wp-caption) > a > img{ margin-top:var(--space-7); }
/* A video box keeps its own inline margin (0 on top), so the gap goes under the block above it: a heading or a paragraph, placed straight
   before the box, or straight before the text block that opens with it. Heading to text and text to text gaps do not move. */
body :is(.entry-content, .abody, .desc) :is(h2, h3, h4, p, ul, ol):has(+ div[style*="aspect-ratio"] > iframe, + .wpb_text_column > .wpb_wrapper > div[style*="aspect-ratio"]:first-child > iframe){
  margin-bottom:var(--space-7);
}

/* ----- D3. Header band on a tablet (QW2): 769 to 1099 px ----- */
/* n46h-band.css keeps the five figures in one row that never wraps (each item flex:none, white-space:nowrap). From 769 px the phone
   scroller is off, and below about 1060 px the row is wider than the band: the time item runs out of the page (FR about 200 px,
   RU about 210 px, EN about 170 px at 800 px). In this range the band takes two lines instead: the figures on the first line, the date
   and the time on the second, on the right as on a desktop. Nothing is dropped, nothing shrinks. An empty full-width item placed before
   the date makes the break, so it falls at the same place in every language and the hairline before the time stays between date and time.
   From 1100 px the row fits on one line and nothing changes. */
@media (min-width:769px) and (max-width:1099px){
  .gpcf-hband__items{
    flex-wrap:wrap;
    row-gap:var(--space-1);
    padding:var(--space-3) 0;
  }
  .gpcf-hband__items::before{
    content:"";
    order:1;
    flex-basis:100%;
  }
  .gpcf-hb.gpcf-hb-date,
  .gpcf-hb.gpcf-hb-time{ order:2; }
}

/* ==========================================================================
   E. N46o-2 (12-11-2026): the Directory close button (ruling RF4) and no automatic hyphenation in page titles (ruling RF2).
   E1 needs the markup and the script lines given in DONE - N46o-2 (header.php and assets/js/gpcf-header.js). E2 is CSS only. Tokens only.
   ========================================================================== */

/* ----- E1. Close X of the desktop Directory panel (RF4) ----- */
/* header.php prints the panel (#gpcf-launcher-panel). The Real estate row (.cats-more) and the X now share one row, .gpcf-launcher-foot,
   the same width and gutters as the tile grid above it. The X sits at the right end, so it stands under the last tile, Practical life,
   on the same line as Real estate. The row keeps the height of the old Real estate row (44 px link, 16 px below), so the panel does not grow. */
.gpcf-launcher-foot{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--page-gutter) var(--space-7);
}
/* j6.css and header-footer.css give .cats-more its own width, margin and padding; inside the row the X takes the right end. */
body .gpcf-launcher-panel .gpcf-launcher-foot .cats-more{
  flex:1 1 auto;
  max-width:none;
  margin:0;
  padding:0;
}
.gpcf-launcher-close{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:var(--tap-min);
  height:var(--tap-min);
  margin:0 0 0 auto;
  padding:0;
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-sm);
  background:none;
  color:var(--on-dark);
  cursor:pointer;
  transition:border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.gpcf-launcher-close svg{
  display:block;
  width:20px;
  height:20px;
  stroke:currentColor;
}
.gpcf-launcher-close:hover{
  border-color:var(--on-dark);
  background:var(--on-dark-fill);
}
.gpcf-launcher-close:focus-visible{
  outline:3px solid var(--on-dark);
  outline-offset:2px;
}

/* ----- E2. Page titles are never hyphenated (RF2) ----- */
/* style.css (B3) sets hyphens:auto on the headings of the content column and on the page header titles (.pagehead h1, .phero h1,
   .entry-title, .sigpage-title); n46l.css already sets manual on the hub title only. This rule sets manual on all of them, so a long
   word moves to the next line whole instead of being cut with a hyphen. A hyphen the editor types by hand still shows. */
body :is(.pagehead, .phero) h1,
body :is(.entry-title, .sigpage-title){
  -webkit-hyphens:manual;
  hyphens:manual;
}