/* ============================================================
   ORDINARY HOURS — a journal of everyday city life
   The page is one day: paper, sky and ink change with the hour.
   ============================================================ */

@font-face { font-family: 'DM Serif Display'; src: url('assets/dm-serif.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Literata'; src: url('assets/literata.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('assets/oswald.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/ibm-plex-mono.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('assets/space-grotesk.ttf') format('truetype'); font-display: swap; }

/* ---------- period palettes: the day as a design system ---------- */

:root, html[data-period="midday"] {
  --paper: #f8f3e2;
  --sky-a: #d8ecf7;
  --sky-b: #f7ecc4;
  --ink: #221a10;
  --ink-soft: #5b5040;
  --accent: #b02c0c;
  --line: rgba(34, 26, 16, .18);
  --halo: rgba(34, 26, 16, .10);
  --chip-culture-ink: #2451b8; --chip-culture-bg: #e0e6f8;
  --chip-food-ink: #2f6b18;    --chip-food-bg: #e2eed2;
  --chip-movement-ink: #b3400f;--chip-movement-bg: #f8e2d4;
  --chip-people-ink: #6a2a8f;  --chip-people-bg: #eee2f6;
  --chip-places-ink: #0f6b66;  --chip-places-bg: #d9ecea;
}
html[data-period="dawn"] {
  --paper: #f8efe1;
  --sky-a: #ffd9a8;
  --sky-b: #a9d3e6;
  --ink: #221a10;
  --ink-soft: #5b5040;
  --accent: #b23a12;
  --line: rgba(34, 26, 16, .18);
  --halo: rgba(34, 26, 16, .10);
}
html[data-period="morning"] {
  --paper: #f6f2e3;
  --sky-a: #bfe0ef;
  --sky-b: #f6ecd2;
  --ink: #1e2230;
  --ink-soft: #4d5464;
  --accent: #1d4fb0;
  --line: rgba(30, 34, 48, .18);
  --halo: rgba(30, 34, 48, .10);
}
html[data-period="dusk"] {
  --paper: #f4e8d2;
  --sky-a: #f6c88b;
  --sky-b: #d3879c;
  --ink: #291a10;
  --ink-soft: #63503e;
  --accent: #8f2a12;
  --line: rgba(41, 26, 16, .2);
  --halo: rgba(41, 26, 16, .12);
}
html[data-period="evening"] {
  --paper: #241f2e;
  --sky-a: #3a2c52;
  --sky-b: #6e3350;
  --ink: #f4ecda;
  --ink-soft: #cfc4b2;
  --accent: #f4b04e;
  --win: #f4b04e;
  --line: rgba(244, 236, 218, .22);
  --halo: rgba(244, 236, 218, .12);
  --chip-culture-ink: #a9c3f5; --chip-culture-bg: #232c47;
  --chip-food-ink: #b8d98f;    --chip-food-bg: #26331f;
  --chip-movement-ink: #f5a97f;--chip-movement-bg: #3d2418;
  --chip-people-ink: #d4b3ec;  --chip-people-bg: #2e2340;
  --chip-places-ink: #93d8d3;  --chip-places-bg: #16302f;
}
html[data-period="night"] {
  --paper: #161322;
  --sky-a: #1d1937;
  --sky-b: #0f0c1d;
  --ink: #eee7d6;
  --ink-soft: #c9bfae;
  --accent: #f2b04e;
  --win: #f2b04e;
  --line: rgba(238, 231, 214, .22);
  --halo: rgba(238, 231, 214, .12);
  --chip-culture-ink: #a9c3f5; --chip-culture-bg: #1b2338;
  --chip-food-ink: #b8d98f;    --chip-food-bg: #1f2a18;
  --chip-movement-ink: #f5a97f;--chip-movement-bg: #301d13;
  --chip-people-ink: #d4b3ec;  --chip-people-bg: #241b34;
  --chip-places-ink: #93d8d3;  --chip-places-bg: #122625;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  transition: background-color .6s ease, color .6s ease;
  -webkit-font-smoothing: antialiased;
}

/* print halftone, always decorative */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
  background-size: 9px 9px;
  opacity: .045;
}

::selection { background: var(--accent); color: var(--paper); }

/* ---------- focus, always visible ---------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
  padding: 10px 16px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- masthead ---------- */
.masthead {
  max-width: 1360px;
  margin: 0 auto;
  padding: 30px clamp(16px, 4vw, 48px) 18px;
}
.masthead-overline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.masthead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.masthead-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
  text-transform: uppercase;
}
.masthead-title::first-letter { color: var(--accent); transition: color .6s ease; }
.masthead-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
  max-width: 30ch;
  text-align: right;
}

/* ---------- ticker strip ---------- */
.ticker {
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--accent);
  color: var(--paper);
  transition: background-color .6s ease;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 0;
  animation: ticker-roll 70s linear infinite;
}
.ticker-track span { padding: 0 1.4rem; }
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- page grid ---------- */
.page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 48px) 60px;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}

/* ---------- the sky rail ---------- */
.rail {
  position: sticky;
  top: 24px;
  border: 2px solid var(--ink);
  background: linear-gradient(175deg, var(--sky-a) 0%, var(--sky-b) 78%);
  transition: border-color .6s ease;
  display: flex;
  flex-direction: column;
}
.rail-sky {
  position: relative;
  height: 190px;
  overflow: hidden;
}
.sky-art { width: 100%; height: 100%; display: block; }
.sun-core { fill: var(--accent); transition: fill .6s ease; }
.sun-rays { stroke: var(--accent); transition: stroke .6s ease; }
.moon-plate { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.moon-crater { fill: var(--ink); opacity: .4; }
.skyline path { fill: var(--ink); opacity: .82; }
.skyline rect { fill: var(--ink); opacity: .82; }
.skyline .win { fill: var(--win, var(--sky-b)); opacity: .9; transition: fill .6s ease; }
.horizon { stroke: var(--ink); stroke-width: 2; }
.celestial { transition: transform .5s ease; }

.rail-plate {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 18px 20px 16px;
  transition: background-color .6s ease;
}
.clock {
  margin: 0;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(4.4rem, 5.6vw, 6.2rem);
  line-height: .95;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.clock-label {
  margin: 2px 0 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rail-word-row { border-top: 1px solid var(--line); padding-top: 12px; }
.rail-word {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  transition: color .6s ease;
}
.rail-phrase {
  margin: 6px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.rail-dial {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 16px 20px 18px;
  transition: background-color .6s ease;
}
.dial-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--ink);
  border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ink);
  transition: background-color .6s ease;
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--ink); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ink);
}
.dial-ticks {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.dial-hint {
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dial-hint em { font-style: normal; color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- toolbar ---------- */
.board { min-width: 0; }
.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) auto;
  gap: 14px 20px;
  align-items: start;
  padding: 18px 0 14px;
  border-bottom: 2px solid var(--ink);
}
.field-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.search-wrap { position: relative; }
.search-wrap .icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--ink-soft);
  pointer-events: none;
}
input[type="search"], select {
  width: 100%;
  font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 12px;
  min-height: 44px;
}
input[type="search"] { padding-left: 34px; }
input[type="search"]::placeholder { color: var(--ink-soft); opacity: .85; }
select { cursor: pointer; }
input[type="search"]:hover, select:hover { border-color: var(--accent); }

.action-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  font-size: .88rem;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.pill .icon { width: 15px; height: 15px; }
.pill:hover { background: var(--ink); color: var(--paper); }
.pill[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.pill-solid { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.pill-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill-ghost { border-style: dashed; }
.pill:active { transform: scale(.97); }
.linklike {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 2px;
}
.linklike:hover { color: var(--accent); }
.pocket-count {
  margin: 8px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ---------- ledger ---------- */
.ledger-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}
.ledger { list-style: none; margin: 0; padding: 0; }
.daypart {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 30px 0 10px;
}
.daypart h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.daypart .rule { flex: 1; border-top: 2px solid var(--ink); transform: translateY(-6px); }
.daypart .flavor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin: 0;
  text-align: right;
}

.story {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 100px;
  gap: 4px 26px;
  padding: 22px 10px;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease;
}
.story:hover { background: var(--halo); }
.story:hover .story-link { color: var(--accent); text-decoration-color: var(--accent); }
.stamp-block { display: flex; flex-direction: column; gap: 4px; }
.stamp-index {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.stamp-time {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color .6s ease;
}
.stamp-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.story-main { min-width: 0; }
.story-title {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.12;
  font-weight: 400;
  font-family: 'DM Serif Display', Georgia, serif;
  letter-spacing: -.01em;
}
.story-link {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.story-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.story-summary {
  margin: 0 0 10px;
  font-size: .98rem;
  color: var(--ink-soft);
  max-width: 58ch;
}
.story-meta {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.story-meta .dot::before { content: "·"; }
.stamp-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.cat-Culture { color: var(--chip-culture-ink); background: var(--chip-culture-bg); }
.cat-Food { color: var(--chip-food-ink); background: var(--chip-food-bg); }
.cat-Movement { color: var(--chip-movement-ink); background: var(--chip-movement-bg); }
.cat-People { color: var(--chip-people-ink); background: var(--chip-people-bg); }
.cat-Places { color: var(--chip-places-ink); background: var(--chip-places-bg); }
.flag-now {
  color: var(--paper);
  background: var(--accent);
  padding: 3px 8px;
}
.flag-kept { color: var(--accent); }
.story-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
svg.icon { width: 16px; height: 16px; flex: none; }
.story-arrow { 
  width: 30px; height: 30px;
  color: var(--ink-soft);
  transition: transform .2s ease, color .2s ease;
}
.story-arrow .icon { width: 28px; height: 28px; }
.story:hover .story-arrow { transform: translateX(5px); color: var(--accent); }
.row-keep {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid transparent;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.row-keep .icon { width: 17px; height: 17px; }
.row-keep:hover { color: var(--accent); border-color: var(--accent); }
.row-keep[aria-pressed="true"] { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.row-keep:active { transform: scale(.92); }

/* ---------- empty state ---------- */
.empty {
  border: 2px dashed var(--ink);
  padding: 44px 28px;
  margin-top: 22px;
  text-align: center;
}
.empty-big {
  margin: 0 0 8px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.empty-text {
  margin: 0 auto 20px;
  max-width: 44ch;
  color: var(--ink-soft);
}

/* ---------- colophon ---------- */
.colophon {
  max-width: 1360px;
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 48px) 60px;
  border-top: 2px solid var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.colophon p { margin: 0 0 6px; }

/* ---------- the clipping (dialog) ---------- */
.story-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--halo);
  overscroll-behavior: contain;
}
.story-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(2px) grayscale(.2);
}
.clipping {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 40px);
}
.clip-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 22px;
}
.clip-stamps { display: flex; align-items: center; gap: 12px; margin: 0; }
.clip-hour {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
}
.clip-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kbd-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px 5px;
  opacity: .7;
}
.clip-title {
  margin: 0 0 10px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.clip-byline {
  margin: 0 0 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.clip-body p {
  margin: 0 0 1.15em;
  font-size: 1.04rem;
  line-height: 1.72;
  max-width: 62ch;
}
.clip-body p:first-child::first-letter {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 3.5em;
  float: left;
  line-height: .82;
  padding: 4px 10px 0 0;
  color: var(--accent);
}
.clip-foot {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.clip-foot p { margin: 0; }

body.dialog-open { overflow: hidden; }

/* ---------- responsive: the day folds up for small screens ---------- */
@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .rail-sky { flex: 1 1 100%; height: 120px; }
  .rail-plate { flex: 1 1 55%; border-top: 2px solid var(--ink); border-left: 0; }
  .rail-dial { flex: 1 1 45%; border-top: 2px solid var(--ink); display: flex; flex-direction: column; justify-content: center; }
  .clock { font-size: 3.4rem; }
  .masthead-note { text-align: left; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .field-search { grid-column: 1 / -1; }
  .field-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .toolbar { grid-template-columns: 1fr; }
  .story { grid-template-columns: minmax(0, 1fr); padding: 20px 4px; }
  .stamp-block { flex-direction: row; align-items: baseline; gap: 12px; }
  .story-side { justify-content: space-between; width: 100%; order: 5; }
  .daypart .flavor { display: none; }
  .rail-plate, .rail-dial { flex: 1 1 100%; }
  .dial-hint { display: none; }
}

/* ---------- reduced motion: the day stands still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .celestial, .story-arrow, .pill, .row-keep, .story, .skip-link,
  body, .masthead-title::first-letter, .sun-core, .sun-rays, .rail-word,
  .stamp-time, .rail-plate, .rail-dial { transition: none !important; }
  .story:hover .story-arrow { transform: none; }
}