/* Hard Goods — house stylesheet.
   Light is the primary register (Mr Porter reference). Dark is a courtesy for people
   who browse at night; every token is redefined, nothing is left to the browser. */

:root {
  /* Ground is neutral grey, not cream. Every reference (HAY #F2F2F2, Our Legacy
     #FFFFFC, SCRT #FFF) runs cold; the warm paper was the classical tell. */
  --paper:    #F1F1EF;
  --paper-2:  #E7E7E4;
  --paper-3:  #DBDBD7;
  --ink:      #111110;
  --ink-2:    #4E4E4A;
  --ink-3:    #86867F;
  --rule:     #D4D4CF;
  --rule-2:   #BEBEB8;
  --accent:   #1F2BFF;
  --on-accent:#F1F1EF;
  --shadow:   0 1px 2px rgba(17,17,16,.05);

  /* One superfamily pair, no serif. Familjen Grotesk carries the display weight
     (Swedish, sharper than Helvetica, and not a clone of it); Inter holds the
     reading sizes, where Familjen gets loose. */
  --display: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:   var(--display);          /* nothing is set in a serif any more */

  --measure: 36rem;
  --gutter: 1.25rem;
  --page: 1380px;

  /* The extremity lives here: an 11px label against a 5rem headline. */
  --label:   .6875rem;
  --track-label: .16em;
  --track-tight: -.035em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0D0D0C;
    --paper-2: #171716;
    --paper-3: #21211F;
    --ink:     #F1F1EF;
    --ink-2:   #9E9E97;
    --ink-3:   #6E6E68;
    --rule:    #262624;
    --rule-2:  #383834;
    --accent:  #5B66FF;
    --on-accent:#0D0D0C;
    --shadow:  0 1px 2px rgba(0,0,0,.45);
  
  }
}

:root[data-theme="dark"] {
    --paper:   #0D0D0C;
    --paper-2: #171716;
    --paper-3: #21211F;
    --ink:     #F1F1EF;
    --ink-2:   #9E9E97;
    --ink-3:   #6E6E68;
    --rule:    #262624;
    --rule-2:  #383834;
    --accent:  #5B66FF;
    --on-accent:#0D0D0C;
    --shadow:  0 1px 2px rgba(0,0,0,.45);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- small caps label ---------- */

.eyebrow, .label {
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--accent); }
.eyebrow .sep { opacity: .45; margin: 0 .45em; }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.15rem var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.wordmark-h1 { margin: 0; font-weight: 400; }
.wordmark {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .dot {
  display: inline-block;
  width: .28em;
  height: .28em;
  margin-left: .22em;
  vertical-align: .08em;
  background: var(--accent);
  text-indent: -9999px;
  overflow: hidden;
}
.tagline {
  margin: 0;
  font-size: var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  text-align: right;
}

/* ---------- announcement bar ----------
   The freshness bar. This site's whole proposition is being first to a thing, so
   the newest piece gets the top line of the page. */

.announce {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .6rem var(--gutter);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.announce-tag {
  background: var(--accent);
  color: var(--on-accent);
  padding: .16rem .42rem;
  letter-spacing: var(--track-label);
  flex: none;
}
.announce-title {
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announce-go { margin-left: auto; flex: none; opacity: .6; }
.announce:hover .announce-go { opacity: 1; }
@media (max-width: 560px) { .announce-go { display: none; } }

/* ---------- navigation ---------- */

.nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 1.6rem;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
/* Centring a flex row that overflows hides BOTH ends: on a phone the nav was
   starting mid-word and "Latest" was unreachable. Below the breakpoint the row
   starts at the left edge and scrolls. */
@media (max-width: 900px) {
  .nav-inner { gap: 1.35rem; scroll-padding-left: var(--gutter); }
  .nav-inner::after { content: ""; flex: 0 0 var(--gutter); }
}
.nav a {
  display: block;
  padding: .95rem 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- section heads ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 4.5rem 0 1.8rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ink);
}
.section-head h1,
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.section-head .more {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.section-head .more:hover { color: var(--accent); }

/* ---------- the feed ---------- */

.feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 1.4rem;
  margin: 2.2rem 0 0;
}
@media (max-width: 1000px) { .feed { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }
@media (max-width: 620px)  { .feed { grid-template-columns: 1fr; gap: 2.6rem; } }

.card { display: block; text-decoration: none; color: inherit; }
.card .eyebrow { display: block; }
.card .frame {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
  margin-bottom: 1rem;
}
.card .frame img, .card .frame svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.card:hover .frame img, .card:hover .frame svg { transform: scale(1.028); }
.card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.14;
  letter-spacing: -.025em;
  margin: .4rem 0 .35rem;
}
.card:hover h3 { color: var(--accent); }
.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.55;
}
.card .price {
  display: block;
  margin-top: .55rem;
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* the tag that marks a note or a dispatch in the river */
.kind { color: var(--accent); }

/* ---------- lead item ---------- */

.lead { margin: 2.6rem 0 0; }
.lead .frame {
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.lead .frame img, .lead .frame svg { width: 100%; height: 100%; object-fit: cover; }
.lead-body { max-width: 52rem; margin: 1.4rem 0 0; }
.lead h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: .98;
  letter-spacing: var(--track-tight);
  margin: .7rem 0 .8rem;
}
.lead h2 a { text-decoration: none; }
.lead h2 a:hover { color: var(--accent); }
.lead .standfirst {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 620px) { .lead .frame { aspect-ratio: 4 / 3; } }

/* ---------- article ---------- */

.article { padding-top: 3.2rem; }
.article-head { max-width: 52rem; margin: 0 0 2.2rem; }
.article h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.4vw, 5rem);
  line-height: .95;
  letter-spacing: var(--track-tight);
  margin: .8rem 0 .9rem;
}
.standfirst {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 1.2rem;
}
.byline {
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.hero { margin: 0 0 2.8rem; background: var(--paper-2); aspect-ratio: 16 / 9; overflow: hidden; }
.hero img, .hero svg { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: var(--measure); margin: 0; }
.prose p { margin: 0 0 1.35em; }
.prose p:first-of-type { font-size: 1.0625rem; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .18em; }
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 2.6rem 0 .9rem;
}
.prose ul { padding-left: 1.1rem; margin: 0 0 1.35em; }
.prose li { margin-bottom: .45em; }

/* ---------- specs ---------- */

/* In a buyer's guide the price IS the datum; at byline size it disappeared
   next to a 1.6rem serif heading. */
.entry-price {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--accent);
  margin-left: .5rem;
  white-space: nowrap;
}

.specs { max-width: var(--measure); margin: 2.6rem 0; border-top: 1px solid var(--ink); }
.specs table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.specs th, .specs td { text-align: left; padding: .72rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.specs th {
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 38%;
  padding-right: 1rem;
}
.specs td { font-variant-numeric: tabular-nums; }

/* ---------- verdict + buy ---------- */

.verdict {
  max-width: var(--measure);
  margin: 2.8rem 0;
  padding: 1.6rem 0 0;
  border-top: 3px solid var(--accent);
}
.verdict p:not(.eyebrow) {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: -.025em;
  margin: .5rem 0 0;
}

.buy { max-width: var(--measure); margin: 2.4rem 0 0; }
.btn {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .95rem 1.7rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn .amt { font-variant-numeric: tabular-nums; letter-spacing: .06em; opacity: .75; }
.buy .disclose {
  margin: .9rem 0 0;
  font-size: .8125rem;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ---------- provenance footer on an item ---------- */

.provenance {
  max-width: var(--measure);
  margin: 2.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: var(--ink-3);
  line-height: 1.55;
}
.provenance a { color: var(--ink-2); }

/* ---------- rails ---------- */

.rail { border-top: 1px solid var(--rule); margin-top: 5rem; padding-top: 0; }


/* ---------- atmospheric bands ----------
   Imagery here is a band, never a card. Product photography owns the card frames
   and the item heroes; these are the treatment around it. Everything is pushed
   to near-monochrome and scrimmed so a dozen photographers read as one system,
   and so the terracotta accent is the only real colour on the page. */

.band {
  position: relative;
  display: grid;
  /* minmax(0,1fr) or the column sizes to the standfirst's 36rem max-content and
     blows out past the band, which overflow:hidden then quietly clips. */
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  background: #0E0D0A;
}
.band::before {                   /* height floor, never a ceiling */
  content: "";
  grid-area: 1 / 1;
  aspect-ratio: var(--band-ratio, 1600/640);
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Not flat grey: a whisper of colour survives, so the copper of a still and
     the amber of a bar still read as warmth rather than as sludge. */
  filter: grayscale(.82) contrast(1.08) brightness(.86);
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12,11,8,.88) 0%, rgba(12,11,8,.28) 54%, rgba(12,11,8,.48) 100%),
    linear-gradient(to right, rgba(31,43,255,.16), rgba(31,43,255,0) 62%);
  pointer-events: none;
}

.band-type {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 2;
  width: 100%;
  color: #F1F1EF;
}
.band-type-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(1.1rem, 3.2vw, 2.5rem);
}
.band-type .eyebrow { color: rgba(241,241,239,.7); margin: 0 0 .55rem; }
.band-h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: .92;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0 0 .55rem;
  color: #F1F1EF;
}
.band-standfirst {
  max-width: 36rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(241,241,239,.84);
}
.band-h {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 .7rem;
  max-width: 26ch;
  color: #F1F1EF;
}
.band-link {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #F1F1EF;
  text-decoration: none;
  border-bottom: 1px solid rgba(241,241,239,.45);
  padding-bottom: .22rem;
}
.band-link:hover { border-bottom-color: var(--accent); color: #fff; }

/* the river interstitial spans every column, so it breaks the grid's rhythm
   without breaking its gutters */
.band--rule { grid-column: 1 / -1; margin: .6rem 0; }
.band--rule .band-type-inner { padding-left: 0; padding-right: 0; }

.band--page { aspect-ratio: 1600/420; }
.band--page::after {
  background: linear-gradient(to top, rgba(12,11,8,.55), rgba(12,11,8,.28));
}

/* signup with a photograph behind it */
.signup.signup--img { background: #0E0D0A; border-color: transparent; position: relative; }
.signup.signup--img .band--bg { position: absolute; inset: 0; display: block; }
.signup.signup--img .band--bg::before { content: none; }
.signup.signup--img .band--bg::after {
  background: linear-gradient(rgba(10,9,7,.80), rgba(10,9,7,.86)),
              linear-gradient(to right, rgba(31,43,255,.14), rgba(31,43,255,0) 60%);
}
.signup.signup--img .signup-inner { position: relative; z-index: 2; }
.signup.signup--img .eyebrow { color: rgba(241,241,239,.7); }
.signup.signup--img h2 { color: #F1F1EF; }
.signup.signup--img p { color: rgba(241,241,239,.84); }
.signup.signup--img .note { color: rgba(241,241,239,.6); }
.signup.signup--img input { background: rgba(241,241,239,.94); border-color: transparent; color: #111110; }
.signup.signup--img button { background: var(--accent); color: var(--on-accent); }
.signup.signup--img button:hover { background: #F1F1EF; color: #111110; }

@media (max-width: 700px) {
  /* A 2.5:1 strip is 150px on a phone, which is not enough to sit a masthead on.
     The wide crop is re-cropped to centre, which is where fit=crop put the
     subject anyway. */
  .band--cat { aspect-ratio: 4/3; }
  .band--rule { aspect-ratio: 3/2; }
  .band-standfirst { font-size: .9375rem; }
}

/* ---------- newsletter ---------- */

.signup {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 2.6rem 1.8rem;
  margin: 5rem 0 0;
}
.signup h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin: .45rem 0 .55rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.signup p { max-width: 38rem; margin: 0 0 1.4rem; color: var(--ink-2); font-size: .9375rem; }
.signup form { display: flex; gap: .5rem; max-width: 27rem; margin: 0; }
.signup input {
  flex: 1;
  padding: .85rem 1rem;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9375rem;
}
.signup input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.signup button {
  padding: .85rem 1.4rem;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.signup button:hover { background: var(--accent); }
.signup-cta { margin: 0 0 1.2rem; }
.signup .note { margin: .9rem 0 0; font-size: .75rem; color: var(--ink-3); }
@media (max-width: 480px) { .signup form { flex-direction: column; } }
@media (max-width: 560px) {
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .tagline { text-align: left; }
}

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--ink);
  margin-top: 5rem;
  padding: 2.6rem 0 4rem;
}
.foot-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  align-items: baseline;
}
.foot .fm { font-family: var(--display); font-weight: 700; font-size: 1.15rem;
            letter-spacing: -.02em; text-transform: uppercase; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot a {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.foot a:hover { color: var(--accent); }
.foot .colophon {
  width: 100%;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 44rem;
}

/* ---------- utility ---------- */

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}