/* =====================================================================
   Native adapters: WordPress block markup -> the ported components.

   HAND-WRITTEN. This is the only stylesheet in the theme that may be
   edited directly. site.css, the component sheets under
   assets/components/ and the cove block's style.css are generated from
   the snapshot under _source/, the design of record, and have to stay
   faithful copies of it (see wordpress.md, "Porting a static site into a
   theme").
   Everything WordPress needs that the static site never had goes here.

   Loaded after the ported stylesheets, so it wins on equal specificity.

   THE RULE FOR ADDING TO THIS FILE. Most of the port needs nothing here:
   the ported selectors are class-based and element-loose, so a core
   block carrying the component class lands on them for free. Write an
   adapter only where core emits an element the ported rule cannot
   reach. Every rule below names the ported rule it mirrors and its line,
   because a value copied here is a value in two places.

   RE-READ THIS FILE AFTER EVERY CHANGE TO THE SNAPSHOT'S SHEETS. The .btn
   skin, the .shot label chip, the menu-bar link treatment, the logo
   sizing and the about quote mark are copied by value out of
   _source/assets/site.css and the pull-quote component, so a design
   change made there reaches nothing here and the copies quietly stop
   matching. Nothing can diff a design against a file of adapter rules;
   walking the citations after a change is the only guard.

   The citations name lines of the generated sheets under assets/.
   ===================================================================== */

/* Yellowtail, the brush face of the pinned menu bar's name (below), served
   from assets/fonts/ beside the four families site.css imports. It is
   declared here rather than enqueued so the editor, which loads this sheet
   through the same list, gets it too. */
@font-face { /* latin-ext */
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/yellowtail-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { /* latin */
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/yellowtail-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------------------
   Core's flow-layout margins: switched off in theme.json, not here

   theme.json sets settings.spacing.blockGap to null, which stops core
   printing its block-gap rules at all: the 24px between template parts
   on .wp-site-blocks, and the `> *`, `> :first-child` and `> :last-child`
   margins on every .is-layout-flow group. The editor builds its own copy
   of those rules in JavaScript and reads a null setting as "supported",
   so styles.spacing.blockGap is also set to "", which leaves it no gap
   value to print. Those rules are written as
   `:root :where(...)`, one pseudo-class of specificity, and arrive after
   the theme's stylesheets, so they beat every one-class ported margin
   (.eyebrow, .duo-role, .cove-after and the rest). Every margin on the
   page therefore comes from the ported sheets, as in the static site.
   Do not reset margins here to undo a gap; if one comes back, check that
   setting first.
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   core/button wears the .btn skin

   Mirrors: site.css:63 (.btn) and the variant rules at 67-72.
   Core emits <a class="wp-block-button__link">, which no ported selector
   names, so the skin has to be restated against core's class. The values
   are NOT recopied: .btn is expressed through --bg-btn / --fg-btn / --bd
   custom properties, so each variant below only sets those three, and
   the shape, type and transition come from the ported rule via @extend-
   by-declaration -- the block link is given the same property block.
   --------------------------------------------------------------------- */
.wp-block-button__link {
	--bg-btn: var(--ink);
	--fg-btn: #fff;
	--bd: transparent;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--bg-btn);
	color: var(--fg-btn);
	border: 1px solid var(--bd);
	cursor: pointer;
	transition: transform .25s var(--ease), background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link:active { transform: translateY(0); }

/* The three registered block styles, matching .btn-accent / .btn-line /
   .btn-ghost-light at site.css:67, 69 and 71. */
.wp-block-button.is-style-accent .wp-block-button__link { --bg-btn: var(--accent); --fg-btn: var(--accent-on); }
.wp-block-button.is-style-accent .wp-block-button__link:hover { --bg-btn: var(--accent-ink); }
.wp-block-button.is-style-line .wp-block-button__link { --bg-btn: transparent; --fg-btn: var(--fg); --bd: var(--line); }
.wp-block-button.is-style-line .wp-block-button__link:hover { --bd: var(--fg); }
.wp-block-button.is-style-ghost-light .wp-block-button__link { --bg-btn: transparent; --fg-btn: #fff; --bd: rgba(255,255,255,.34); }
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover { --bd: #fff; }


/* ---------------------------------------------------------------------
   core/image as a .shot photo slot

   Mirrors: site.css:101 (.shot), :105 (.shot-label), :106 (::before).
   .shot is a positioned box whose photo is absolutely filled into it. A
   core/image carrying .shot emits <figure><img><figcaption>, so the img
   needs the fill the static markup gave its .photo child, and the
   caption has to become the label chip. No value here is new: the
   figcaption block is .shot-label restated for an element the ported
   selector cannot reach.
   --------------------------------------------------------------------- */
.wp-block-image.shot { display: block; margin: 0; }
.wp-block-image.shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	border-radius: 0;
}
.wp-block-image.shot figcaption {
	position: absolute;
	z-index: 2;
	left: 16px;
	bottom: 14px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wp-block-image.shot figcaption::before {
	content: "";
	width: 13px;
	height: 13px;
	border-radius: 3px;
	border: 1.5px solid rgba(255,255,255,.6);
	background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,.6) 45% 55%, transparent 55%);
}


/* ---------------------------------------------------------------------
   core/navigation in the navy menu bar

   Mirrors: site.css:166 (header.site .menu a) and :167 (its hover and
   current states).

   WHY THE SELECTORS ARE DOUBLED. Core ships
     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
     { color: inherit }
   with the class written twice on purpose, which raises it to (0,3,0).
   That outranks `header.site .menu a` at (0,2,2), so without matching
   core's weight the unselected links inherit the dark body colour and
   vanish against the navy bar. The selectors below sit at (0,3,1).

   The container rule adds no values: it removes core's <ul>/<li> from
   layout so the anchors become the flex items the ported rule expects.
   --------------------------------------------------------------------- */
header.site .menu .wp-block-navigation__container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
header.site .menu .wp-block-navigation-item { margin: 0; }
header.site .menu .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-family: var(--font-cond);
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 500;
	font-size: 13.5px;
	color: rgba(255,255,255,.72);
	padding: 9px 15px;
	border-radius: 6px;
	transition: color .18s, background .18s;
}
header.site .menu .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
header.site .menu .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	color: #fff;
	background: rgba(255,255,255,.08);
}
header.site .menu .wp-block-navigation-item__label { color: inherit; }

/* The ported bar is a fixed 50px tall (site.css:165). A wrapped menu
   needs to grow instead, so height becomes a floor. */
header.site .menu { height: auto; min-height: 50px; }

@media (max-width: 900px) {
	/* Mirrors the mobile bar at site.css:189. */
	header.site .menu { min-height: 0; }
	header.site .menu .wp-block-navigation__container { gap: 2px 4px; }
}


/* ---------------------------------------------------------------------
   core/site-logo in the dark header cell

   Mirrors: site.css:141 (header.site .logo-img) and the mobile height
   at :177. The ported rule names .logo-img, which only the static markup
   had; core/site-logo emits its own wrapper and an <img> with no class.
   max-width:none is the one addition -- core constrains the image and
   the ported rule assumes it is free to be as wide as its height needs.
   --------------------------------------------------------------------- */
header.site .darkcell .wp-block-site-logo { flex: none; }
header.site .darkcell .wp-block-site-logo a { display: block; }
header.site .darkcell .wp-block-site-logo img {
	display: block;
	width: auto;
	height: 120px;
	max-width: none;
	filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
@media (max-width: 900px) {
	header.site .darkcell .wp-block-site-logo img { height: 76px; }
}



/* ---------------------------------------------------------------------
   core/quote inside the two quote bands

   Mirrors: testimonial.css:25 (.c-testimonial blockquote) and
   pull-quote.css:26 (.c-pull-quote blockquote). Both ported rules already name blockquote,
   which core/quote emits -- so the only thing needed is to undo core's
   own blockquote treatment (a left border and italics) that arrives with
   a different class. No sizes are recopied.
   --------------------------------------------------------------------- */
.quote .wp-block-quote,
.about-quote .wp-block-quote {
	padding: 0;
	border: 0;
	font-style: normal;
}

/* The about quote's opening mark. Mirrors pull-quote.css:27 (.c-pull-quote
   .qmark), copied by value: the design prints it as an aria-hidden
   <span class="qmark"> inside the blockquote, which core/quote cannot hold
   without failing validation, so it is drawn as a pseudo-element instead. */
.about-quote .wp-block-quote::before {
	content: "\201C";
	font-family: var(--font-serif);
	font-size: clamp(64px, 8vw, 110px);
	line-height: .4;
	color: var(--accent);
	display: block;
	height: .5em;
}


/* ---------------------------------------------------------------------
   The gallery Query Loop

   Mirrors: gallery.css:32 (.c-gallery .aged-grid). The ported grid expects .aged
   cards as its DIRECT children. core/post-template emits a <ul> with an
   <li> around each card, which puts a box between the grid and its items.

   display:contents on the <li> removes that box from layout, so the .aged
   cards become the grid items the ported rule was written for. Two things
   depend on this rather than it being cosmetic:

     - The type filter sets `display:none` on a matching .aged
       (redfish.js). With the <li> as the grid item, hiding the card
       inside it would leave an empty cell in the grid instead of
       reflowing.
     - .aged is `display:flex; flex-direction:column` and relies on being
       stretched by the grid to make .aged-quote's `margin-top:auto` sit
       at the card's foot.

   The list semantics go with the box, which is right here: the design's
   own markup is a <div> of <article>s, not a list, so this restores what
   the ported CSS and script both assume.
   --------------------------------------------------------------------- */
ul.aged-grid { list-style: none; margin: 0; padding: 0; }
.aged-grid > li { display: contents; }

/* The ported margin-top belongs to the grid; when the Query Loop wrapper
   sits between the filter bar and the grid, it carries it instead. */
.gallery-query { margin-top: clamp(30px, 4vw, 50px); }
.gallery-query .aged-grid { margin-top: 0; }

/* Editor-canvas fixes are NOT here. They live in editor.css, which loads
   through add_editor_style() only, so nothing editor-shaped reaches the
   front end. */

/* ---------------------------------------------------------------------
   THE BUSINESS'S NAME IN THE PINNED MENU BAR.

   Nothing in the static site had this. The header sticks at a negative
   offset (site.css:129), so scrolling slides the brand row up and
   leaves only the navy menu bar pinned -- and in that state no logo, no
   wordmark and no company name is on screen. This puts the name at the
   left of that bar, and only while it is pinned: redfish-header.js sets
   .nav-pinned at the moment the sticky element reaches its offset.

   The face is Yellowtail, declared at the top of this sheet. It is an
   approximation of the logo, which is hand-painted rather than set in a
   typeface, so nothing matches it exactly. The owner chose an
   approximation over reusing the logo image here, 2026-09-11.

   The links stay exactly where the ported rule centres them
   (site.css:165, justify-content: center), because the name is taken
   out of flow and pinned to the bar's left edge. Its inline padding
   mirrors .menu's own clamp() so the name lines up with the page gutter.
   --------------------------------------------------------------------- */
header.site .menu-brand { display: none; }

header.site.nav-pinned .menu-brand {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center;
  padding-inline: clamp(20px, 5vw, 40px);
  text-decoration: none; line-height: 1;
}
header.site.nav-pinned .menu-brand span {
  font-family: "Yellowtail", "Brush Script MT", cursive;
  font-size: 26px; color: #fff; letter-spacing: .01em;
  /* Yellowtail's descenders and its slant both overhang the text box. */
  padding-block: 2px; padding-inline-end: 2px;
}
header.site.nav-pinned .menu-brand:hover span { color: var(--accent-light); }
header.site .menu-brand:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; border-radius: 4px; }

/* Narrow: the ported rule lets .menu wrap onto several lines and drops its
   fixed height (site.css:189), so an absolutely-placed name would sit
   over the links. Put it back in flow as the bar's first item instead, and
   let the links take the rest. */
@media (max-width: 900px) {
  header.site.nav-pinned .botedge { display: flex; align-items: center; }
  header.site.nav-pinned .menu-brand { position: static; padding-inline: clamp(16px, 4vw, 24px) 0; flex: none; }
  header.site.nav-pinned .menu-brand span { font-size: 22px; }
  header.site.nav-pinned .menu { flex: 1 1 auto; justify-content: flex-start; padding-inline-start: clamp(10px, 3vw, 18px); }
}


/* ---------------------------------------------------------------------
   Narrow phones

   Two ported rules overrun a viewport under about 360px wide.

   .zz-media (zigzag.css:26) pairs aspect-ratio: 5/4 with a 280px
   min-height. A grid item with an aspect ratio takes its width from its
   height rather than stretching, so a track narrower than 350px got a
   350px photo. Capping the width lets min-height win over the ratio
   instead, which the photo's object-fit absorbs.

   The header's two action buttons share a row (site.css:185) and hold
   their labels on one line; below 360px the pair is wider than the cell,
   so each takes a row of its own.
   --------------------------------------------------------------------- */
.zz-media { max-width: 100%; }

@media (max-width: 359px) {
  header.site .actions { flex-wrap: wrap; }
  header.site .actions > .btn { flex-basis: 100%; }
}