/* The Two Clocks — thetwoclocks.com
   Shared stylesheet. The per-element visual styling stays inline in each page
   (that is the signed-off design record). This file carries only the layer that
   cannot live inline: fonts, base reset, keyframes, hover/focus states and the
   audience toggle. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'DM Serif Display';src:url('/fonts/DMSerifDisplay-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('/fonts/DMSerifDisplay-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url('/fonts/Lora-VariableFont_wght.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Kalam';src:url('/fonts/Kalam-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Kalam';src:url('/fonts/Kalam-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:#F5F0E8}
a{color:#3B82C4;text-decoration:underline;text-underline-offset:3px;transition:opacity 140ms cubic-bezier(.2,0,.2,1)}
a:hover{opacity:.72}
p,ul,ol,blockquote,h1,h2,h3,h4,figure{margin:0}
p{text-wrap:pretty}
h1,h2,h3,h4{font-weight:400;text-wrap:pretty}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open]>summary [data-ind]{transform:rotate(45deg)}
input::placeholder,textarea::placeholder{color:rgba(45,55,72,0.5);font-style:italic}
img{max-width:100%}

/* Skip link */
.rs-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#0A1628;color:#FFFFFF;padding:12px 18px;font-family:'Lora',Georgia,serif;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none}
.rs-skip:focus{left:0}

/* ---------- Hover and focus states ----------
   These replace the design tool's style-hover / style-focus attributes. */
[data-hover="background:#DCE6F0"]:hover{background:#DCE6F0}
/* Framework dropdown. Both halves live here on purpose: when the hidden state
   was an inline overflow:hidden, no stylesheet rule could override it and the
   menu never opened. Clipping rather than display:none keeps the two links
   focusable, so the menu opens on Tab as well as on hover. */
.nav-drop{overflow:hidden}
.nav-drop:hover,
.nav-drop:focus-within,
.nav-drop.is-open{overflow:visible}
[data-focus]:focus-visible{outline:2px solid #3B82C4;outline-offset:2px}
[data-focus]:focus:not(:focus-visible){outline:none}

/* ---------- Keyframes ---------- */
@keyframes rsStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rsMarkIn{0%{opacity:0;transform:translate(min(30vw,320px),-220px) rotate(200deg) scale(0.6)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rsSweep{from{top:0}to{top:calc(100% - 3px)}}

/* ---------- Animation hooks ---------- */
/* Rule reveal under the challenge sentence. Decorative only: the text it sits
   under is always present and readable. */
[data-ul-reveal]{background-size:0% 3px}
[data-ul-reveal].is-revealed{background-size:100% 3px}

/* Framework identity mark: visible by default, animated in when JS is present */
[data-mark-in]{opacity:1}
.js [data-mark-in]{opacity:0}
.js [data-mark-in].is-in{opacity:1;animation:rsMarkIn 1.6s cubic-bezier(0.2,0.7,0.2,1) both}
.js [data-mark-in="hero"].is-in{animation-delay:0.2s}

/* ---------- Audience toggle (framework summary) ----------
   Both audiences' copy ships in the HTML. In-house is the default, so the page
   reads correctly with JavaScript off and for anything that does not run JS. */
[data-aud="agency"]{display:none}
[data-aud="in-house"]{display:block}
[data-aud="in-house"][data-aud-grid]{display:grid}
body.aud-agency [data-aud="in-house"]{display:none}
body.aud-agency [data-aud="agency"]{display:block}
body.aud-agency [data-aud="agency"][data-aud-grid]{display:grid}

/* ---------- Contact form states ---------- */
[data-form-state="sent"]{display:none}
[data-form-sent] [data-form-state="form"]{display:none}
[data-form-sent] [data-form-state="sent"]{display:block}

/* ---------- Framework sticky table of contents ----------
   The element ships with inline opacity:0 so JavaScript can fade it in on
   scroll. Inline styles beat this file, so both the no-JS fallback and the
   narrow-screen hide need !important. */
html:not(.js) #fw-toc{opacity:1 !important;pointer-events:auto !important}
@media (max-width:999px){#fw-toc{display:none !important}}

/* ---------- Small screens ----------
   The page sizes are inline clamp() values whose floors are tuned for a laptop.
   Those floors were lowered at source, so this block only has to deal with the
   things a clamp cannot fix: layouts that assume two or three columns, elements
   that pin themselves beside text that is no longer beside them, and a nav bar
   that was eating half a phone screen. Everything here is scoped to a media
   query, so the desktop design is untouched. */

/* The menu button is injected by site.js and only ever appears under 760px. */
.nav-btn{display:none;align-items:center;gap:9px;background:transparent;border:1px solid rgba(26,54,93,0.3);color:#0A1628;font-family:'DM Serif Display',serif;font-size:16px;line-height:1;padding:9px 14px;cursor:pointer}
.nav-btn-bars{display:grid;gap:3px;width:15px}
.nav-btn-bars i{display:block;height:2px;background:#1A365D}
body.nav-open .nav-btn{background:#DCE6F0}

/* Every size on this site is an inline style, and inline beats a stylesheet,
   so the overrides below have to be marked important to land at all. */
@media (max-width:760px){
  /* Logo left, button right, menu underneath when open. */
  header nav{display:none !important;order:3;flex:1 0 100%}
  .nav-btn{display:inline-flex;order:2}
  body.nav-open header nav{
    display:flex !important;flex-direction:column !important;
    align-items:stretch !important;gap:0 !important;
    width:100%;margin-top:10px;border-top:1px solid rgba(26,54,93,0.12)
  }
  body.nav-open header nav>a,
  body.nav-open header nav>.nav-drop{
    display:block !important;width:100%;padding:14px 0;
    border-bottom:1px solid rgba(26,54,93,0.1)
  }
  /* The framework menu cannot hover open on a phone, so both of its links sit
     in the list instead. This is what made the full framework unreachable. */
  body.nav-open .nav-drop{overflow:visible}
  body.nav-open .nav-drop>span{position:static !important;padding-top:6px !important}
  body.nav-open .nav-drop>span>span{border:0 !important;background:transparent !important;min-width:0 !important}
  /* The indent is the hierarchy cue. Colour is not: blue is the link colour
     everywhere else on the site, so a blue child link reads as a different
     kind of link rather than a nested one. Black, like the rest of the nav. */
  body.nav-open .nav-drop>span>span>a{padding:10px 0 10px 20px !important;border-top:0 !important;color:#0A1628 !important}
  body.nav-open .nav-drop>a{display:block !important;padding:14px 0 0 !important}
}

/* Landscape on a phone leaves about 390px of height. A sticky header took half
   of it, so below 600px tall the header scrolls away with the page. */
@media (max-height:600px) and (orientation:landscape){
  header{position:static !important}
}

/* Anything that pins itself beside body copy. At full width it is no longer
   beside anything, so it pins on top of the text instead — the About portrait.
   top:0 is the site header and is deliberately excluded. */
@media (max-width:900px){
  [style*="position:sticky;top:1"]{position:static !important;padding-top:0 !important}
  figure[style*="position:sticky"]{width:min(100%,230px) !important;margin-bottom:8px}
}

/* Fixed or multi-column grids that have no room left to be columns. The first
   is the credentials list, whose 120px label column is narrower than the
   uppercase labels running through it. */
@media (max-width:620px){
  [style*="minmax(120px,1fr) minmax(0,4fr)"]{grid-template-columns:minmax(0,1fr) !important;gap:6px 0 !important}
  [style*="clamp(96px,10vw,120px) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr) !important;gap:6px 0 !important}

  /* The questions / answers comparison. Side by side, the two columns are what
     pair a question with its answer. Stacked, nothing does, so each pair
     becomes one bordered card instead: tinted question across the top, the
     numbered answer directly beneath it, inside the same box. The connector
     rule that used to run between the columns comes out — stacked it reads as
     a progress bar — and the column headings go with it, since there are no
     longer any columns for them to head. */
  [style*="scroll-margin-top:140px;border-top:1px solid rgba(26,54,93,0.12)"]{
    border:1px solid rgba(26,54,93,0.18) !important;
    background:#FBF9F4;margin-bottom:16px
  }
  [style*="clamp(36px,6vw,88px) minmax(0,1fr)"]{
    grid-template-columns:minmax(0,1fr) !important;padding:0 !important;gap:0 !important
  }
  [style*="clamp(36px,6vw,88px) minmax(0,1fr)"]>span[aria-hidden="true"]{display:none !important}
  [style*="clamp(36px,6vw,88px) minmax(0,1fr)"]>span:last-child{padding:18px 22px}
  [style*="clamp(36px,6vw,88px) minmax(0,1fr);padding:0 0 14px 0"]{display:none !important}
}

/* ---------- Mobile: the large identity mark ----------
   The small bracket in the header already carries the mark. At full width the
   large one has nothing left to sit beside, so it lands under the copy on its
   own and eats most of the first screen. It comes out below 760px — the
   wrapper rather than the image, or its sized box would stay behind as a gap.
   Removing it is also what gives the At a Glance hero its room back.

   The band instance ([data-mark-band], the "method behind every answer"
   section) is the exception: nothing else in that section carries the mark, so
   rather than disappear it shrinks and moves above the eyebrow, where it reads
   as a section sign-off instead of a stranded picture. */
@media (max-width:760px){
  [data-mark-wrap]{display:none !important}
  [data-mark-band]{
    width:68px !important;order:-1;margin-right:0 !important;margin-bottom:-18px
  }
  /* Static at this size. The fly-in reads as decoration beside a big mark and
     as a twitch beside a small one. */
  .js [data-mark-band] [data-mark-in].is-in{animation:none;opacity:1}
  [data-hero-aud]{margin-top:24px}
  /* The newsletter ripple has the same problem as the large bracket: beside the
     subscribe form on a laptop, stranded under it on a phone. */
  [data-ripple]{display:none !important}
}

/* ---------- Lines set to balance ----------
   text-wrap:balance evens out line lengths, which is what you want for a
   headline across a wide column. In a narrow one it does the opposite of what
   it looks like it should: it pulls every line in to match the shortest, so
   the paragraph sits well clear of the button underneath it. Below 620px it
   goes back to filling the column. */
@media (max-width:620px){
  [data-balance]{text-wrap:normal !important;max-width:none !important}
}

/* ---------- Audience bar labels ----------
   Both labels ship in the HTML. The full ones are the default, so the bar
   reads correctly everywhere and for anything that does not run CSS; the
   short pair only appears where the full pair would overflow the screen. */
[data-lbl="short"]{display:none}
@media (max-width:560px){
  [data-lbl="full"]{display:none}
  [data-lbl="short"]{display:inline}
}

/* ---------- Primary buttons on narrow screens ----------
   These are set never to shrink, which is right in a row beside text. On a
   phone there is no row: the longest of them is roughly 380px of uppercase
   letter-spacing against about 342px of usable width, which is what gave the
   whole page a sideways scroll. Full width and wrapping instead. Scoped to
   links and buttons — the credentials labels share the same type treatment. */
@media (max-width:620px){
  a[style*="text-transform:uppercase;font-weight:700"],
  button[style*="text-transform:uppercase;font-weight:700"]{
    display:block !important;width:100%;box-sizing:border-box;text-align:center;
    letter-spacing:0.1em !important;padding:15px 14px !important;line-height:1.35
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  [data-ul-reveal]{background-size:100% 3px;transition:none}
  .js [data-mark-in]{opacity:1}
}

/* ---------- Print ---------- */
@media print{
  header,footer,#fw-toc,form{display:none}
  body{background:#FFFFFF}
}