/**
 *  @package michael-travels-theme
 *
 *  The site's base stylesheet: design tokens, typography, containers and the
 *  elements every page uses. Anything belonging to one template or one block
 *  lives in its own file beside this one, and Fuse loads it by name.
 *
 *  Mobile first. Breakpoints, matching the Fuse layout stylesheet:
 *      S    576px
 *      M    768px
 *      L    992px
 *      XL   1200px
 *      XXL  1450px
 */

/*  ============================================================================
    Design tokens
    ============================================================================  */

:root {

  /*  ----------  Colour  ----------  */

  /**
   *  Brighter, and still legible. Every pair below was measured rather than
   *  eyeballed. The weakest text on the site clears 4.63:1, where before any
   *  of this it sat at 4.37:1, under the 4.5:1 it needed.
   *
   *  Lightened twice. The ground is now a hair off white and cannot go much
   *  further: white is a luminance of 1.000 and it sits at 0.983. The rest
   *  moved with it by a comparable step, which is what keeps the palette
   *  reading as one thing rather than a light ground with old colours on it.
   *
   *  **The two light grounds have to stay apart.** Sections alternate between
   *  them, and that alternation is how a page shows its structure. The alt
   *  ground was lifted further than this at one point and the bands stopped
   *  being distinguishable; it is held a step below the ground on purpose.
   */
  --mt-ground: #fefdfb;
  --mt-ground-alt: #f7f4ed;

  /*  Lifted too, so a dark band reads as a break rather than as a hole.  */
  --mt-dark: #2c3e36;
  --mt-dark-alt: #374a42;

  --mt-text: #222222;
  --mt-muted: #726c5e;
  --mt-line: #d5cdbc;

  --mt-on-dark: #f9f6ef;
  --mt-on-dark-muted: #bcb7a9;
  --mt-line-dark: #495c53;

  /**
   *  Olive, and more of it: the saturation goes from 28% to 45%, which is what
   *  makes it read as fresher.
   *
   *  It cannot simply follow the ground up. The accent is the colour of a
   *  link, so it carries text, and every step the ground takes upward is a
   *  step the accent cannot take with it without falling under 4.5:1. It has
   *  moved by about a fifth of what the ground has. Check it against the alt
   *  ground, which is the tighter of the two, before touching it.
   *
   *  The deep grade is for hover, the light grade for dark sections, where the
   *  contrast runs the other way.
   */
  --mt-accent: #5b7730;
  --mt-accent-deep: #465c26;
  --mt-accent-light: #c3d197;

  /**
   *  Pure white, which the site's own off-whites are not. Two names for one
   *  value because they answer to different things: one is the text on an
   *  accent fill, the other is the brightest step over a dark ground or a
   *  photograph. Either can move without dragging the other with it.
   */
  --mt-on-accent: #ffffff;
  --mt-bright: #ffffff;

  /**
   *  The line joining the stops on a map, and the one colour here chosen to
   *  disagree with the rest. It is drawn over somebody else's map tiles, not
   *  over the site, so it has to carry against pale land, green and water
   *  while staying clearly not-the-site: 162 degrees of hue from the accent,
   *  and 7.1:1 on land where the accent would sink into it.
   */
  --mt-route: #7b1fa2;

  /**
   *  The same colours again as channels, for the scrims and washes that need
   *  an alpha. CSS cannot take a hex custom property apart, so these are kept
   *  by hand: **change one of these and change its hex above with it.**
   */
  --mt-dark-rgb: 44, 62, 54;
  --mt-ground-rgb: 254, 253, 251;
  --mt-accent-rgb: 91, 119, 48;
  --mt-bright-rgb: 255, 255, 255;

  /*  ----------  Type  ----------  */

  --mt-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --mt-font-body: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --mt-size-body: 1.0625rem;
  --mt-line-body: 1.65;
  --mt-measure: 68ch;

  /*  ----------  Spacing  ----------  */

  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-5: 24px;
  --mt-space-6: 32px;
  --mt-space-7: 48px;
  --mt-space-8: 64px;
  --mt-space-9: 96px;

  /*  ----------  Shape  ----------  */

  --mt-radius: 3px;
  --mt-radius-lg: 6px;

  --mt-header-height: 68px;

  /**
   *  The brand. The footer sets the site name at --mt-brand-size and the mark
   *  beside it follows from that; the header sets its name smaller, so if the
   *  mark there came off its own text the two would not agree. Both take the
   *  mark from --mt-brand-mark instead, and they hold together at every width
   *  rather than only where the clamp happens to land.
   */

  --mt-brand-size: clamp(1.5rem, 3vw, 2rem);
  --mt-brand-mark: calc(var(--mt-brand-size) * 1.15);

  /**
   *  The air above and below a section. Named, because sections that want
   *  less of it -- the stats bar, which is one short run of figures and
   *  does not need a full section's worth -- take a fraction of this rather
   *  than restating the clamp.
   */
  --mt-section-space-y: clamp(48px, 8vw, 120px);

  /*  ----------  Fuse layout overrides  ----------  */

  --fuse-site-max-width: 1300px;
  --fuse-container-padding-x: var(--mt-space-5);
  --fuse-container-padding-y: var(--mt-section-space-y);
  --fuse-grid-gap: var(--mt-space-5);

  /**
   *  Fuse states its narrow and thin containers as percentages, which hold
   *  on a desktop and fall apart on a phone -- 60% of a 375px screen is a
   *  column too narrow to read. Restated as a ceiling instead: full width
   *  until there is room to spare, then held.
   */
  --fuse-container-width-narrow: min(100%, 980px);
  --fuse-container-width-thin: min(100%, 720px);

  /*  ----------  Fuse button overrides  ----------  */

  --fuse-button-padding-x: 26px;
  --fuse-button-padding-y: 13px;
  --fuse-button-margin: 0;
  --fuse-button-font-size: 0.8125rem;
  --fuse-button-line-height: 1.2;
  --fuse-button-font-weight: 600;
  --fuse-button-border: 1px solid;
  --fuse-button-border-radius: 3px;
  --fuse-button-shadow: none;

  --fuse-button-colour-border: var(--mt-accent);
  --fuse-button-colour-background: var(--mt-accent);
  --fuse-button-colour-background-hover: var(--mt-accent-deep);
  --fuse-button-colour-text: var(--mt-on-accent);

}

@media screen and (min-width: 768px) {

  :root {
    --fuse-container-padding-x: var(--mt-space-7);
    --mt-header-height: 84px;
  }

}

@media screen and (min-width: 1200px) {

  :root {
    --fuse-container-padding-x: var(--mt-space-8);
  }

}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

}




/*  ============================================================================
    Base
    ============================================================================  */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 *  WCAG 2.2 SC 2.4.11, Focus Not Obscured.
 *
 *  The site header is fixed, so anything scrolled to lands underneath it: tab
 *  to a link just above the fold and the browser brings it into view behind
 *  the header, where it cannot be seen. Reserving the header's own height
 *  stops the browser scrolling anything that far up, and it fixes in-page
 *  anchors and the skip link at the same time.
 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--mt-header-height);
}

body {
  margin: 0;
  background: var(--mt-ground);
  color: var(--mt-text);
  font-family: var(--mt-font-body);
  font-size: var(--mt-size-body);
  line-height: var(--mt-line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

hr {
  height: 0;
  margin: var(--mt-space-7) 0;
  border: 0;
  border-top: 1px solid var(--mt-line);
}




/*  ============================================================================
    Typography
    ============================================================================  */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--mt-space-4);
  font-family: var(--mt-font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;

  /**
   *  Newsreader carries an optical size axis from 6 to 72. Letting it follow
   *  the type size is the difference between a display face that holds
   *  together at 4rem and one that looks like body text set large.
   */
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
}

h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
}

h4 {
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
}

h5,
h6 {
  font-size: 1.0625rem;
}

p,
ul,
ol,
blockquote,
figure,
table {
  margin: 0 0 var(--mt-space-5);
}

:is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}

blockquote {
  padding-left: var(--mt-space-5);
  border-left: 2px solid var(--mt-accent);
  font-family: var(--mt-font-display);
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.4;
}

a {
  color: var(--mt-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--mt-accent-deep);
}

/**
 *  A search highlight: enough to find, not enough to shout.
 *
 *  A wash of the accent rather than a block of it. Measured against the ground
 *  it sits on, the solid light accent came out at 1.60 and read as a coloured
 *  label; this is 1.26, against 1.07 for the yellow a browser would use. So it
 *  is quieter than a highlighter and still plainly there.
 *
 *  The weight is the other half of it, and is not decoration: the match should
 *  be findable by somebody who cannot tell the two greens apart.
 *
 *  The colour is named rather than inherited. Inheriting looked tidier and
 *  was wrong: a card's excerpt is muted, and muted text on this wash measures
 *  4.07:1, under the 4.5:1 it needs. Naming the body colour lifts the matched
 *  word to full strength, which is a second quiet signal on top of the wash:
 *  the match reads darker than the words around it.
 */


/*  The site mark, wherever it is placed. It is drawn in currentColor, so it
    takes the colour of the text beside it and no colour is named here; and it
    is sized in em, so it tracks that text rather than wanting a size set for
    every place it appears.

    Both axes are named rather than one left to auto. The viewBox is square, so
    there is nothing to work out, and an inline SVG carries no intrinsic size
    for the reset above (svg { max-width: 100%; height: auto }) to leave alone.  */
.site-logo {
  display: block;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
}


mark {
  padding: 0 2px;
  background: rgba(var(--mt-accent-rgb), 0.18);
  color: var(--mt-text);
  font-weight: 600;
}

/*  The accent is too dark to lift anything here, and the body colour would be
    dark text on a dark ground. Both come off the other end.  */
.background-dark mark {
  background: rgba(var(--mt-bright-rgb), 0.18);
  color: var(--mt-on-dark);
}

strong,
b {
  font-weight: 600;
}

/**
 *  The meta line: ITALY · TUSCANY · SEPTEMBER 2025. Set in the sans against
 *  the serif headings, which is most of what makes the page read as a
 *  publication rather than a blog.
 */
.mt-meta {
  margin: 0 0 var(--mt-space-3);
  color: var(--mt-muted);
  font-family: var(--mt-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mt-lead {
  max-width: var(--mt-measure);
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.55;
}

.mt-measure {
  max-width: var(--mt-measure);
}




/*  ============================================================================
    Sections

    A page is built from Fuse containers. The background class on a container
    is what gives the site its light-dark-light rhythm, so the colours a
    section needs are set here once rather than by each block.
    ============================================================================  */

/**
 *  A section declares its ground with one class, and everything that has to
 *  change with it is set here rather than by each block for itself.
 *
 *  The two light grounds are interchangeable — a section takes whichever one
 *  its neighbour did not, which is worked out as the page is built. The dark
 *  one is different in kind: it inverts the type, the rules and the links, so
 *  every one of those lives in a single place below.
 */

.background-ground {
  background: var(--mt-ground);
}

.background-alt {
  background: var(--mt-ground-alt);
}

.background-dark {
  background: var(--mt-dark);
  color: var(--mt-on-dark);
}




/*  ----------  What a dark ground changes  ----------  */

.background-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--mt-on-dark);
}

.background-dark .mt-meta,
.background-dark .mt-card-excerpt,
.background-dark .mt-card-counts {
  color: var(--mt-on-dark-muted);
}

.background-dark a:not(.button) {
  color: var(--mt-accent-light);
}

.background-dark a:not(.button):hover,
.background-dark a:not(.button):focus {
  color: var(--mt-bright);
}

.background-dark hr,
.background-dark .travels-section-divider {
  border-color: var(--mt-line-dark);
}

/*  Anything that draws its own thin rule against the ground.  */
.background-dark :is(.travels-visit, .travels-assistance, .travels-day + .travels-day) {
  border-color: var(--mt-line-dark);
}




/*  ============================================================================
    Buttons

    The shape comes from the Fuse button stylesheet, driven by the tokens set
    above. Only the variants it does not carry are added here.
    ============================================================================  */

a.button.secondary,
button.secondary {
  background: transparent;
  color: var(--mt-accent);
  border-color: var(--mt-line);
}

a.button.secondary:hover,
button.secondary:hover {
  background: var(--mt-accent);
  color: var(--mt-on-accent);
  border-color: var(--mt-accent);
}

.background-dark a.button.secondary,
.background-dark button.secondary {
  color: var(--mt-on-dark);
  border-color: var(--mt-line-dark);
}

.background-dark a.button.secondary:hover,
.background-dark button.secondary:hover {
  background: var(--mt-on-dark);
  color: var(--mt-dark);
  border-color: var(--mt-on-dark);
}

/*  A small button, used for cuisines, categories and other tags.  */
a.button.small,
button.small {
  --fuse-button-padding-x: 14px;
  --fuse-button-padding-y: 7px;
  --fuse-button-font-size: 0.6875rem;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}




/*  ============================================================================
    Single records

    The body of a trip, a day or a visit is blocks, and each block brings its
    own full-width section. Anything else typed straight into the editor —
    a paragraph, a list, a heading — has no section of its own, so it is given
    the site's measure here rather than running the full width of the screen.
    ============================================================================  */

/**
 *  A record's own writing. Held to the reading measure whatever the section
 *  around it is doing.
 */
.travels-prose {
  max-width: var(--mt-measure);
}

.travels-prose > :last-child {
  margin-bottom: 0;
}

/*  Inside a merged section, what follows the writing needs air above it.  */
.travels-section--merged .travels-prose {
  margin-bottom: var(--mt-space-7);
}

.travels-singular > *:not(.fuse-container) {
  max-width: var(--fuse-site-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--fuse-container-padding-x);
  padding-left: var(--fuse-container-padding-x);
}

.travels-singular > p:not(.fuse-container),
.travels-singular > ul:not(.fuse-container),
.travels-singular > ol:not(.fuse-container),
.travels-singular > blockquote:not(.fuse-container),
.travels-singular > h2:not(.fuse-container),
.travels-singular > h3:not(.fuse-container),
.travels-singular > h4:not(.fuse-container) {
  max-width: calc(var(--mt-measure) + (var(--fuse-container-padding-x) * 2));
}

/**
 *  The first section sits straight under the page header.
 *
 *  It used to be given a top margin, from when a record's content was bare
 *  prose that needed lifting off the header. Every section is a container with
 *  its own padding now, so the margin was a second gap on top of that one.
 */
.travels-singular > *:first-child {
  margin-top: 0;
}

/**
 *  Air at the top and bottom of a page written as loose blocks.
 *
 *  A record's sections, and any block that brings a Fuse container with it,
 *  carry their own padding. A paragraph placed straight into the editor does
 *  not, so a page written as plain prose ran from the header band to the
 *  footer with nothing at either end.
 *
 *  Given the padding a container would have had, and only at the end that
 *  wants it: a page opening with a container and closing with a paragraph is
 *  padded at the bottom alone. A record page, whose children are every one of
 *  them containers, is left exactly as it was.
 */
.travels-singular:has(> :first-child:not(.fuse-container)) {
  padding-top: var(--fuse-container-padding-y);
}

.travels-singular:has(> :last-child:not(.fuse-container)) {
  padding-bottom: var(--fuse-container-padding-y);
}




/*  ============================================================================
    Page header
    ============================================================================  */

.mt-page-header {
  position: relative;
}

.mt-page-header .wrap {
  position: relative;
  z-index: 1;
  max-width: var(--fuse-site-max-width);
  margin: 0 auto;
}

/**
 *  The strength of the scrim over a hero photograph, behind the title.
 *
 *  One value, because it is the number most likely to want changing: a bright
 *  photograph needs more of it than a dark one, and the title has to stay
 *  readable on both.
 */
:root {
  --mt-hero-scrim: 0.6;
}

.mt-page-header-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/*  ----------  Narrow: photograph, then the title in a dark band  ----------  */

.mt-page-header--hero .mt-page-header-body {
  padding: var(--mt-space-7) var(--fuse-container-padding-x);
  background: var(--mt-dark);
  color: var(--mt-on-dark);
}

.mt-page-header--hero .mt-page-header-body :is(h1, h2, h3) {
  color: var(--mt-on-dark);
}

.mt-page-header--hero .mt-page-header-body .mt-meta {
  color: var(--mt-on-dark-muted);
}

.mt-page-header--hero .mt-page-header-image {
  aspect-ratio: 3 / 2;
}

.mt-page-title {
  margin-bottom: 0;
}

.mt-page-header .mt-lead {
  margin: var(--mt-space-4) 0 0;
}

.mt-page-header .mt-meta a {
  color: inherit;
}




/*  ----------  Wide: the title sits over the photograph  ----------  */

@media screen and (min-width: 768px) {

  .mt-page-header--hero {
    display: flex;
    align-items: flex-end;
    min-height: min(72vh, 720px);
  }

  .mt-page-header--hero .mt-page-header-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }

  /**
   *  A scrim rather than a wash. It holds its full strength through the band
   *  the title sits in, then fades out above it — so the type has something
   *  solid behind it while the top half of the photograph is left alone.
   */
  .mt-page-header--hero .mt-page-header-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(var(--mt-dark-rgb), var(--mt-hero-scrim)) 0%,
      rgba(var(--mt-dark-rgb), var(--mt-hero-scrim)) 24%,
      rgba(var(--mt-dark-rgb), 0) 58%
    );
  }

  .mt-page-header--hero .mt-page-header-body {
    width: 100%;
    padding: var(--mt-space-9) var(--fuse-container-padding-x) var(--mt-space-7);
    background: transparent;
  }

  /**
   *  White over a photograph, not the site's off-white.
   *
   *  The cream reads warmly against a flat dark ground, but over a photograph
   *  it loses its edge — every bit of contrast is worth having when what is
   *  behind the type changes from one record to the next. The dark band on a
   *  narrow screen keeps the cream, where it has a known ground behind it.
   */
  .mt-page-header--hero .mt-page-header-body,
  .mt-page-header--hero .mt-page-header-body :is(h1, h2, h3),
  .mt-page-header--hero .mt-page-header-body .mt-meta,
  .mt-page-header--hero .mt-page-header-body .mt-lead,
  .mt-page-header--hero .mt-page-header-body a {
    color: var(--mt-bright);
  }

}

.mt-meta > * + *::before {
  content: "·";
  margin: 0 0.5em;
  opacity: 0.6;
}




/*  ============================================================================
    Withheld records

    Shown only to the author, who is the only person who can see them at all.
    Marked plainly so that what is published and what is not is obvious while
    reading the site, rather than only in the admin.
    ============================================================================  */

.travels-withheld {
  display: inline-block;
  margin: var(--mt-space-2) 0 0;
  padding: 3px 10px;
  background: var(--mt-ground-alt);
  border: 1px dashed var(--mt-line);
  border-radius: 100px;
  color: var(--mt-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.is-withheld {
  opacity: 0.72;
}




/*  ============================================================================
    Accessibility
    ============================================================================  */

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--mt-accent);
  outline-offset: 3px;
}

.background-dark :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--mt-accent-light);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  top: var(--mt-space-3);
  left: var(--mt-space-3);
  z-index: 200;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: var(--mt-space-3) var(--mt-space-5);
  background: var(--mt-dark);
  color: var(--mt-on-dark);
  border-radius: var(--mt-radius);
  text-decoration: none;
}