/* =========================================================================
   That's Long Overdue.

   THE TONE, and it is the opposite of the site this repo used to hold: the
   joke is already carried by the name and by the mark (a drawing turning
   into a real object). If the copy and the design also crack jokes, it is
   too much. So everything here is plain, quiet and confident — the humour
   is in the restraint. A company called That's Long Overdue describing its
   products in flat declarative sentences is funnier than one telling you
   it is funny.

   THE FRAME/PICTURE RULE: this brand is deliberately quiet so the products
   can be loud. Desert Island Draft is a bright 90s-comix cartoon and must
   never be flattened into this palette — the parent is the gallery wall,
   the products are the paintings.
   ========================================================================= */

:root{
  --paper:   #F7F6F3;
  --card:    #FFFFFF;
  --ink:     #14171A;
  --body:    #3B4147;
  --muted:   #767C83;
  --line:    #E5E3DE;
  --green:   #38624E;   /* the shell of the mark */
  --green-d: #2A4B3B;

  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;

  --wrap: 1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--green)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* ============================== THE BAR ============================== */

.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 26px;
  background:rgba(247,246,243,.86);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:34px;height:34px;object-fit:contain}
.brand span{font-family:var(--display);font-size:21px;letter-spacing:.005em;line-height:1}

.bar-nav{display:flex;gap:4px}
.bar-nav a{
  padding:7px 12px;border-radius:7px;text-decoration:none;
  font-size:14.5px;font-weight:500;color:var(--body);
}
.bar-nav a:hover{background:rgba(20,23,26,.055);color:var(--ink)}

/* =============================== HERO =============================== */

.hero{
  max-width:var(--wrap);margin:0 auto;padding:64px 26px 60px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}

h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5.4vw,62px);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 20px;color:var(--ink);
}
.lede{margin:0 0 30px;font-size:19px;line-height:1.6;max-width:44ch;color:var(--body)}

.cta-row{display:flex;gap:11px;flex-wrap:wrap;margin:0}

.btn{
  display:inline-block;padding:12px 20px;border-radius:9px;
  background:var(--green);color:#fff;text-decoration:none;
  font-size:15px;font-weight:500;border:1px solid var(--green);
  transition:background .14s ease;
}
.btn:hover{background:var(--green-d)}
.btn-quiet{background:transparent;color:var(--body);border-color:var(--line)}
.btn-quiet:hover{background:rgba(20,23,26,.045);color:var(--ink)}

/* The mark is a drawing over a studio photograph, and the photograph carries
   its own pale grey sweep. Floated straight onto the paper that sweep reads
   as a stray grey rectangle, so the mark sits in a white card instead — the
   tonal step then looks like what it is, a product shot, rather than a
   background that failed to knock out. */
.hero-mark{
  margin:0;max-width:520px;margin-left:auto;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:18px;overflow:hidden;
}
.hero-mark img{width:100%;border-radius:8px}

/* ============================== STRIPS ============================== */

.strip{padding:74px 0;border-top:1px solid var(--line)}
.strip-alt{background:var(--card)}

.eyebrow{
  margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.head{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.012em;
  margin:0 0 34px;color:var(--ink);
}

/* the one big line the whole company rests on */
.statement{
  font-family:var(--display);font-weight:400;
  font-size:clamp(27px,4.1vw,46px);line-height:1.22;letter-spacing:-.012em;
  margin:0 0 38px;color:var(--ink);max-width:20ch;
}
.statement .num{color:var(--green);font-style:italic}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:840px}
.cols p{margin:0}

.aside{
  margin:36px 0 0;padding-left:20px;border-left:2px solid var(--green);
  font-size:18px;color:var(--ink);max-width:58ch;
}

/* ============================= PRODUCTS ============================= */
/* A list, not a grid of marketing cards. One product today; this shape
   takes the tenth without redesigning anything. */

.products{list-style:none;margin:0;padding:0;display:grid;gap:18px}

.product{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;
}
.product-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.product h3{
  font-family:var(--display);font-weight:400;font-size:27px;line-height:1.15;
  margin:0;color:var(--ink);
}
.tag{
  padding:4px 10px;border-radius:999px;
  background:rgba(56,98,78,.1);color:var(--green);
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;
}
.tag-quiet{background:rgba(20,23,26,.055);color:var(--muted)}

.product-line{margin:0;max-width:64ch}

/* the thread that ties every product back to the name */
.overdue{
  margin:16px 0 0;padding:14px 16px;border-radius:10px;
  background:rgba(56,98,78,.055);
  font-size:15.5px;line-height:1.55;color:var(--body);max-width:64ch;
}
.overdue b{color:var(--green);font-weight:600}

.product-links{margin:18px 0 0;font-size:15px}
.product-links a{font-weight:500}

.product-next{border-style:dashed;background:transparent}
.product-next h3{color:var(--muted)}

/* ============================== RULES =============================== */

.rules{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;max-width:880px;
}
.rules li{margin:0;padding-left:18px;border-left:2px solid var(--line);max-width:46ch}
.rules b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

/* ============================== FOOTER ============================== */

.foot{border-top:1px solid var(--line);padding:44px 0 52px}
.foot-in{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.brand-foot img{width:30px;height:30px}
.brand-foot span{font-size:19px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:15px}
.foot-links a{color:var(--body);text-decoration:none}
.foot-links a:hover{color:var(--green);text-decoration:underline}
.foot-fine{margin:0;font-size:14px;color:var(--muted);width:100%}

/* ============================= NARROWER ============================= */

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px;padding-top:44px}
  .hero-mark{order:-1}
  .hero-mark img{margin:0 auto;max-width:380px}
  .cols{grid-template-columns:1fr;gap:18px}
  .rules{grid-template-columns:1fr}
}

@media (max-width:620px){
  body{font-size:16px}
  .bar{padding:10px 16px}
  .brand span{font-size:18px}
  .bar-nav a{padding:6px 9px;font-size:13.5px}
  .wrap{padding:0 18px}
  .hero{padding:34px 18px 44px}
  .strip{padding:52px 0}
  .product{padding:22px 20px}
  .foot-in{gap:14px}
}