/* ==========================================================================
   Turtle Island Times — "Ink Block"
   turtleislandtimes.ca

   The Broadsheet design system, as the brand package cuts it for this paper:
   a deep ink masthead with the nameplate reversed out and the turtle set into
   it, a spot-colour section rail carrying the nav and search, a paper column
   of overlay tiles, and the ink block again at the foot. The column floats on
   a screened field rather than the page running edge to edge.

   Broadsheet's rules, kept:
   - Everything is set in Source Serif 4. Size, weight and measure organise
     the page; there is no second family.
   - No boxes and no dividers between sections. Hierarchy comes from the
     serif scale and from negative space. The one rule that prints is the
     article rail's hairline.
   - Two inks. Cyan is for links; the spot carries the rail, tags and
     buttons. Never both accents in the same small component.
   - Photographs are never white-carded. A tile is the picture, an ink scrim
     rising from its foot, the headline on top and one spot tag in the corner.
   ========================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;              /* variable — one file carries 400 and 600 */
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-italic-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;
}

body.t-turtleisland {
  /* --- Broadsheet role colours ------------------------------------------ */
  --paper:      #F3F2F2;   /* the body column */
  --surface:    #EAE9E9;
  --ink:        #201E1D;   /* text */
  --cyan:       #0088B0;   /* links, and links only */
  --ink-700:    #006786;
  --ink-800:    #004961;   /* masthead, foot */
  --ink-900:    #0A303E;   /* screened field, scrims */

  /* The spot. The package offers magenta 700 (#AA0B56, inside the system) or
     a cut rust (#A8451F, one documented exception) and recommends the rust
     where the brand stands on its own. Flip this one value to switch the
     rail, the tags, the buttons and the live dot together. */
  --spot:       #A8451F;
  --spot-dark:  #8A3717;

  --n-300:      #D7D3D3;   /* the ground the column floats on */
  --n-500:      #9B9797;
  --n-600:      #7D7979;
  --n-700:      #605D5D;
  --rule:       color-mix(in srgb, #201E1D 16%, transparent);

  --serif: 'Source Serif 4', Charter, Georgia, 'Times New Roman', serif;

  --col:   1040px;         /* the paper column */
  --r:     2px;            /* Broadsheet's radius */

  background: var(--n-300);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.t-turtleisland a { color: var(--ink-700); text-decoration: none; }
.t-turtleisland a:hover { color: var(--cyan); text-decoration: underline; }
.t-turtleisland ::selection { background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.t-turtleisland :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.t-turtleisland img { max-width: 100%; display: block; }
.t-turtleisland h1, .t-turtleisland h2, .t-turtleisland h3, .t-turtleisland h4 {
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; margin: 0;
  text-wrap: balance;
}

/* --- The screened field, and the column that floats on it ---------------- */

.ti-field {
  background: var(--ink-900);
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1.2px, transparent 1.3px);
  background-size: 9px 9px;
  padding: 26px;
}
.ti-col {
  width: 100%; max-width: var(--col); margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}
.ti-pad { padding: 40px 40px 56px; }

/* --- Masthead: the ink block -------------------------------------------- */

.ti-mast { background: var(--ink-800); }
.ti-util {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #99E0FF; padding: 11px 26px;
}
.ti-util a { color: inherit; }
.ti-util a:hover { color: #fff; text-decoration: none; }
.ti-util .grp { display: flex; gap: 18px; }

.ti-name { position: relative; display: flex; justify-content: center; padding: 84px 26px 30px; }
/* The turtle sits over the nameplate and the caps cut into its shell, so the
   two read as one shape. The keyline and offset shadow are what hold white
   type against a white mark — they are part of the wordmark, not decoration. */
.ti-name .shell {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 140px; height: 124px; color: var(--paper);
}
.ti-name .wm {
  position: relative; margin: 0;   /* the section/article plate is a <p> — kill UA margins */
  font-family: var(--serif); font-weight: 600; font-size: 64px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--paper);
  text-shadow:
    -2px 0 0 var(--ink-900),  2px 0 0 var(--ink-900),
     0 -2px 0 var(--ink-900), 0  2px 0 var(--ink-900),
    -2px -2px 0 var(--ink-900), 2px -2px 0 var(--ink-900),
    -2px 2px 0 var(--ink-900),  2px 2px 0 var(--ink-900),
     4px 4px 0 var(--ink-900);
  text-align: center; text-wrap: balance;
}

/* --- The spot rail: nav and search --------------------------------------- */

.ti-rail {
  background: var(--spot);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 9px 26px;
}
.ti-rail nav { display: flex; flex-wrap: wrap; gap: 26px; }
.ti-rail a {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--paper);
}
.ti-rail a:hover, .ti-rail a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ti-rail form {
  display: flex; align-items: center; gap: 7px;
  background: var(--paper); padding: 5px 10px; border-radius: var(--r); min-width: 170px;
}
.ti-rail input {
  border: 0; background: none; font-family: var(--serif); font-size: 12px;
  color: var(--ink); flex: 1; min-width: 0;
}
.ti-rail input::placeholder { color: var(--n-600); }
.ti-rail button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--n-700); display: flex; }
.ti-rail svg { width: 14px; height: 14px; }

/* --- Condensed masthead, for article and section ------------------------- */

.ti-mast--slim .ti-name { padding: 30px 26px 18px; }
.ti-mast--slim .ti-name .shell { width: 62px; height: 55px; top: -2px; }
.ti-mast--slim .ti-name .wm { font-size: 30px; text-shadow:
  -1px 0 0 var(--ink-900), 1px 0 0 var(--ink-900),
   0 -1px 0 var(--ink-900), 0 1px 0 var(--ink-900), 2px 2px 0 var(--ink-900); }

/* --- Kickers and tags ---------------------------------------------------- */

.ti-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--n-700); margin: 0 0 10px;
}
.ti-tag {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; background: var(--spot); color: var(--paper);
  padding: 3px 8px; border-radius: var(--r);
}
.ti-tag--cyan { background: var(--cyan); }

/* --- The story tile: picture, scrim, headline, one tag ------------------- */

.ti-tile { position: relative; display: block; }
.ti-tile .shot { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ink-900); }
.ti-tile .shot img { width: 100%; height: 100%; object-fit: cover; }
.ti-tile .scrim {
  position: absolute; inset: auto 0 0 0; padding: 40px 14px 14px;
  background: linear-gradient(to top, rgba(10,48,62,.94), rgba(10,48,62,0));
  pointer-events: none;
}
.ti-tile .scrim h3 {
  font-size: 19px; color: var(--paper); text-shadow: 0 1px 2px rgba(10,48,62,.5);
}
.ti-tile .ti-tag { position: absolute; top: 12px; left: 12px; }
.ti-tile .dek { font-size: 14px; color: var(--n-700); margin: 10px 0 0; line-height: 1.5; }
.ti-tile .meta { font-size: 12px; color: var(--n-600); margin: 6px 0 0; }
.ti-tile:hover .scrim h3 { text-decoration: underline; text-underline-offset: 3px; }

/* Photo-less tiles keep the ink block rather than borrowing stock art. */
.ti-tile .shot--none {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 14px 14px; background: var(--ink-800);
}
.ti-tile .shot--none h3 { font-size: 19px; color: var(--paper); }

/* --- Front page ---------------------------------------------------------- */

.ti-lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; margin: 0 0 48px; }
.ti-lead .shot { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ink-900); }
.ti-lead .shot img { width: 100%; height: 100%; object-fit: cover; }
.ti-lead .scrim {
  position: absolute; inset: auto 0 0 0; padding: 56px 16px 16px;
  background: linear-gradient(to top, rgba(10,48,62,.95), rgba(10,48,62,.7) 45%, rgba(10,48,62,0));
  pointer-events: none;
}
.ti-lead h1 { font-size: 40px; }
.ti-lead .standfirst { font-size: 19px; line-height: 1.5; color: var(--n-700); margin: 14px 0 0; max-width: 46ch; }
.ti-lead .meta { font-size: 13px; color: var(--n-600); margin: 14px 0 0; }

.ti-sechead {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--n-700); margin: 0 0 20px;
}
.ti-river { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }

/* --- Article ------------------------------------------------------------- */

.ti-art { display: grid; grid-template-columns: 1fr 250px; gap: 56px; align-items: start; }
.ti-art .measure { max-width: 64ch; }
.ti-art h1 { font-size: 40px; margin: 6px 0 0; }
.ti-art .standfirst { font-size: 19px; line-height: 1.5; color: var(--n-700); margin: 16px 0 0; }
.ti-art .byrow {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-size: 13px; color: var(--n-600); margin: 20px 0 0;
}
.ti-art .byrow strong { color: var(--ink); font-weight: 600; }
.ti-art figure { margin: 28px 0 0; }
.ti-art figcaption { font-size: 13px; color: var(--n-600); margin: 8px 0 0; line-height: 1.5; }
.ti-body { font-size: 18px; line-height: 1.7; margin: 26px 0 0; }
.ti-body p { margin: 0 0 18px; }
.ti-body h2 { font-size: 24px; margin: 32px 0 12px; }
.ti-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.ti-body img { margin: 22px 0; }
/* The serif's true italic carries the pull quote — never a synthesized oblique,
   and never a box. */
.ti-body blockquote {
  margin: 30px 0; padding: 0 0 0 22px; border-left: 3px solid var(--spot);
  font-style: italic; font-size: 23px; line-height: 1.4; color: var(--ink);
}
.ti-body blockquote p { margin: 0 0 8px; }
.ti-body blockquote cite { display: block; font-style: normal; font-size: 13px; color: var(--n-600); letter-spacing: .04em; }

.ti-side { border-left: 1px solid var(--rule); padding-left: 26px; display: flex; flex-direction: column; gap: 34px; }
.ti-side h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--n-700); margin: 0 0 14px; }
.ti-side .it { display: block; margin: 0 0 16px; }
.ti-side .it h5 { font-size: 16px; font-weight: 600; line-height: 1.25; margin: 0; }
.ti-side .it .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--spot); }
.ti-side .ti-share a { display: inline-block; margin: 0 14px 6px 0; }

.ti-corr { font-size: 13px; color: var(--n-700); margin: 30px 0 0; }
.ti-corr a { color: var(--cyan); text-decoration: underline; }

/* --- Section front ------------------------------------------------------- */

/* The section name replaces the nameplate; the ink block still carries it. */
.ti-mast--section .ti-name { padding: 40px 26px 26px; }
.ti-mast--section .ti-name .wm { font-size: 46px; }
.ti-mast--section .ti-name .shell { display: none; }
.ti-secblurb { font-size: 15px; line-height: 1.55; color: var(--n-700); max-width: 62ch; margin: 0 0 36px; }

/* --- Newsletter and foot ------------------------------------------------- */

.ti-brief { margin: 52px 0 0; padding: 30px 0 0; border-top: 1px solid var(--rule); }
.ti-brief h3 { font-size: 22px; }
.ti-brief p { font-size: 15px; color: var(--n-700); margin: 8px 0 16px; }
.ti-brief form { display: flex; gap: 10px; flex-wrap: wrap; }
.ti-brief input {
  flex: 1; min-width: 220px; font-family: var(--serif); font-size: 15px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; color: var(--ink);
}
.ti-brief button {
  font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .06em;
  padding: 10px 22px; border: 0; border-radius: var(--r);
  background: var(--spot); color: var(--paper); cursor: pointer;
}
.ti-brief button:hover { background: var(--spot-dark); }
.ti-brief .done { font-size: 15px; color: var(--ink-700); }

.ti-foot { background: var(--ink-800); color: var(--paper); }
.ti-foot .cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding: 34px 26px 26px;
}
.ti-foot h4 {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #99E0FF; margin: 0 0 12px;
}
.ti-foot a { color: var(--paper); display: block; font-size: 14px; margin: 0 0 8px; }
.ti-foot a:hover { color: #fff; text-decoration: underline; }
.ti-foot .base {
  border-top: 1px solid rgba(243,242,242,.18);
  padding: 14px 26px; font-size: 12px; color: #99E0FF;
}

.ti-empty { padding: 48px 0; font-size: 17px; color: var(--n-700); }
.ti-empty a { color: var(--cyan); text-decoration: underline; }

.ti-pag { display: flex; gap: 8px; margin: 44px 0 0; font-size: 14px; }
.ti-pag a, .ti-pag span { padding: 6px 12px; border-radius: var(--r); }
.ti-pag span[aria-current] { background: var(--spot); color: var(--paper); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .ti-lead { grid-template-columns: 1fr; gap: 22px; }
  .ti-lead h1 { font-size: 31px; }
  .ti-art { grid-template-columns: 1fr; gap: 40px; }
  .ti-art h1 { font-size: 31px; }
  .ti-side { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 26px; }
  .ti-river { grid-template-columns: repeat(2, 1fr); }
  .ti-foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ti-field { padding: 0; }
  .ti-col { box-shadow: none; }
  .ti-pad { padding: 26px 18px 40px; }
  .ti-name { padding: 62px 18px 20px; }
  .ti-name .shell { width: 96px; height: 85px; }
  .ti-name .wm { font-size: 38px; }
  .ti-mast--slim .ti-name .wm { font-size: 23px; }
  .ti-util { font-size: 9px; padding: 9px 18px; }
  .ti-util > span:first-child { display: none; }   /* the tagline crowds the links */
  .ti-util .grp { width: 100%; justify-content: space-between; gap: 10px; }
  .ti-rail { flex-direction: column; align-items: stretch; gap: 10px; }
  .ti-rail nav { gap: 14px; overflow-x: auto; }
  .ti-river { grid-template-columns: 1fr; }
  .ti-foot .cols { grid-template-columns: 1fr; }
  .ti-body { font-size: 17px; }
}