/* ============================================================
   thoughts engineering™
   warm paper + cobalt + heavy grotesk + printed texture
   ============================================================ */

:root{
  --paper:#F2F0E8;
  --paper-warm:#EAE5DA;
  --paper-light:#F8F6EF;
  --ink:#11110F;
  --ink-soft:#292A27;
  --ink-muted:#62625B;
  --blue:#1767B7;
  --blue-deep:#0A4E96;
  --blue-bright:#2581D5;
  --blue-pale:#D9E5EB;
  --line:#B8B6AD;
  --line-blue:#447BAD;
  --silver:#C7C5BD;
  --amber:#F0B85F;

  --r-sm:5px;
  --r-md:12.5px;
  --r-lg:20px;
  --r-xl:28px;

  --font-display:'Satoshi','Archivo','Helvetica Neue',Arial,sans-serif;

  --gap:clamp(14px, 1.4vw, 22px);
  --pad:clamp(20px, 3.4vw, 56px);
  --maxw:1560px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

/* A/B: ?font=archivo restores the original grotesk */
html[data-font="archivo"]{--font-display:'Archivo','Helvetica Neue',Arial,sans-serif}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ————— printed paper grain over the whole surface ————— */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9;
  opacity:.2;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)' opacity='.5'/></svg>");
}

img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
sup{font-size:.42em;vertical-align:top;line-height:1}

/* ============================================================
   type
   ============================================================ */

.display{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.86;
  color:var(--ink);
  margin:0;
  text-transform:lowercase;
}
.display--xl{font-size:clamp(3.1rem, 9.1vw, 10.4rem)}
.display--lg{font-size:clamp(2.5rem, 5.1vw, 5.3rem)}

.tm{
  font-size:.15em;
  font-weight:800;
  letter-spacing:0;
  vertical-align:baseline;
  position:relative;
  top:-3.4em;
  margin-left:.2em;
}
.tm--lg{font-size:.2em;top:-2.5em}

.caps{
  margin:0;
  font-size:clamp(9.5px, .72vw, 11.5px);
  font-weight:500;
  letter-spacing:.13em;
  line-height:1.5;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.caps--head{
  font-size:clamp(15px, 1.35vw, 20px);
  letter-spacing:.06em;
  line-height:1.28;
  font-weight:600;
  color:var(--ink);
}
.caps--foot{color:var(--ink-muted)}

.script{
  font-family:"Nothing You Could Do",cursive;
  font-weight:400;
  color:var(--paper-light);
  letter-spacing:.01em;
  line-height:1.5;
}

.lede__lead{
  font-size:clamp(1.05rem, 1.5vw, 1.5rem);
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.01em;
  margin:0 0 .55em;
}
.lede__body{
  font-size:clamp(.9rem, 1.02vw, 1.02rem);
  color:var(--ink-soft);
  max-width:34ch;
  margin:0 0 1.5em;
}

/* ============================================================
   panels — the graphic frame is part of the composition
   ============================================================ */

.panel{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--blue-deep);
  transition:transform .38s var(--ease);
}
.panel img{transition:transform .6s var(--ease)}

.panel--hero{aspect-ratio:2.28/1}
.panel--hero img{height:100%;object-fit:cover;object-position:50% 58%}

/* ============================================================
   topbar — a single compact pill
   ============================================================ */

.topbar{
  position:fixed;
  top:clamp(10px,1.1vw,18px);
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:none;
}
.pill{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:clamp(10px,1.2vw,20px);
  padding:6px 8px 6px clamp(14px,1.3vw,20px);
  border-radius:999px;
  background:color-mix(in srgb, var(--paper-light) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow:0 1px 2px rgba(17,17,15,.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
}
.wordmark{
  font-size:clamp(12.5px,1vw,14.5px);
  letter-spacing:-.03em;
  color:var(--ink);
  white-space:nowrap;
}
.pill__div{
  width:1px;
  height:15px;
  background:var(--line);
  opacity:.7;
}
.pill > a:not(.wordmark):not(.btn){
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  padding:2px 2px 1px;
  border-bottom:1.5px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.pill > a:hover,.pill > a.is-active{color:var(--ink);border-color:var(--ink)}
.pill .btn{margin-left:clamp(2px,.5vw,8px)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  background:var(--blue);
  color:var(--paper-light);
  font-size:14px;
  font-weight:500;
  padding:12px 26px;
  border-radius:var(--r-md);
  border:1px solid var(--blue-deep);
  white-space:nowrap;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn--sm{padding:7px 17px;font-size:12.5px;border-radius:999px;border-color:transparent}
.arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow,.link:hover .arrow{transform:translateX(4px)}

.link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:14px;
  font-weight:500;
  color:var(--blue);
  border-bottom:1px solid var(--line-blue);
  padding-bottom:2px;
}

/* ============================================================
   1. masthead — the headline is notched into the image
   ============================================================ */

main{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.masthead{padding-top:calc(60px + clamp(2.67rem, 7.83vw, 8.94rem))}

.stage{position:relative}

.panel--hero{aspect-ratio:1.62/1;border-radius:var(--r-lg)}
.panel--hero img{height:100%;object-fit:cover;object-position:50% 68%}

/* the two paper plates that eat into the top corners */
.stage__band{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:grid;
  grid-template-columns:auto minmax(24px,1fr);
  pointer-events:none;
}
.plate{pointer-events:auto}
.plate--l{
  position:relative;
  grid-column:1;
  display:flex;
  align-items:flex-end;
  padding-right:clamp(18px,2.4vw,40px);
  background:var(--paper);
  border-radius:var(--r-lg) 0 var(--r-xl) 0;
}
/* carves the blue's own rounded corner where the plate ends, so the image
   never shows a square edge */
.plate--l::after{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:var(--r-lg);
  height:var(--r-lg);
  background:radial-gradient(
    circle at 100% 100%,
    transparent calc(var(--r-lg) - .5px),
    var(--paper) var(--r-lg)
  );
}
.rail{
  position:absolute;
  z-index:2;
  top:4.5%;
  right:clamp(14px,1.7vw,30px);
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.6vw,26px);
}
/* it sits on the sky now, so it reads light */
.rail .caps{
  color:var(--paper-light);
  font-weight:600;
  /* it has to hold up over cloud wisps, so a tight halo plus a soft one */
  text-shadow:
    0 1px 2px rgba(6,38,88,.8),
    0 2px 16px rgba(6,38,88,.55);
}
/* lifts the first headline line clear of the plate, onto the page */
.plate--l .display{margin-top:-.86em;padding-bottom:.13em}

.script--hero{
  position:absolute;
  left:43%;
  top:34%;
  font-size:clamp(15px,1.62vw,26px);
  transform:rotate(-3.2deg);
  text-shadow:0 1px 10px rgba(10,50,110,.42);
  z-index:1;
}

/* ============================================================
   2. statement + product
   ============================================================ */

.statement{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(24px,3.4vw,64px);
  align-items:end;
  padding:clamp(44px,5.4vw,104px) 0 clamp(20px,2.4vw,36px);
}
.statement__lede{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,44px)}

.spec{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(10px,1.4vw,26px);
  align-items:stretch;
}
/* frameless: the cream in this artwork is colour-matched to the page, so only
   the blue shape reads — exactly as in the printed reference */
.panel--pod{
  aspect-ratio:1.52;
  border-radius:0;
  background:none;
  align-self:center;
}
.panel--pod img{
  height:100%;
  object-fit:contain;
  /* the artwork's printed cream is uneven, so a hard rectangle edge shows on
     flat paper — feather it out instead, the way ink bleeds off a page */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

.spec__card{
  border:1.5px dashed var(--line-blue);
  border-radius:var(--r-lg);
  background:none;
  padding:clamp(16px,1.7vw,30px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.3vw,22px);
}
.spec__name{
  margin:0;
  font-size:clamp(17px,1.55vw,25px);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink);
}
.rule{border:0;border-top:1px solid var(--line);margin:0;width:100%}
.rule--short{width:32px;border-top-color:var(--ink);border-top-width:1.5px}

/* ============================================================
   3. three thoughts
   ============================================================ */

.thoughts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:calc(var(--gap) / 2);
  padding:clamp(20px,2.4vw,40px) 0;
}
.panel--trait{
  border:0;
  background:none;
  overflow:visible;
}
.panel--trait img{
  border-radius:var(--r-md);
  aspect-ratio:4/3;
  object-fit:cover;
}
.panel--trait figcaption{margin-top:clamp(10px,1.1vw,16px)}
.panel--trait:hover img{transform:translateY(-3px)}

.panel--note{aspect-ratio:1/1;border-radius:var(--r-md)}
.panel--note img{height:100%;object-fit:cover;scale:1.07}

/* ============================================================
   4. pearl in your life
   ============================================================ */

.life{
  display:grid;
  grid-template-columns:.78fr 1.34fr 1.1fr;
  gap:clamp(20px,2.6vw,44px);
  align-items:start;
  padding:clamp(48px,5.6vw,110px) 0 clamp(40px,4.6vw,84px);
}
.life__text{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.4vw,22px)}
.life__text .lede__body{margin:0}

.traits{
  list-style:none;
  margin:0;
  padding:clamp(24px,2.8vw,46px) clamp(16px,1.8vw,30px);
  border:1px solid var(--line-blue);
  border-radius:var(--r-lg);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(8px,1.2vw,18px);
  align-items:start;
}
.traits li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.1vw,16px);
  text-align:center;
  font-size:clamp(11px,.82vw,13px);
  line-height:1.35;
  color:var(--ink-soft);
}
.ico{
  width:clamp(24px,2.1vw,32px);
  height:clamp(24px,2.1vw,32px);
  fill:none;
  stroke:var(--blue);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.traits li:hover .ico{transform:translateY(-2px)}
.ico--sm{width:16px;height:16px;stroke-width:1.8;position:relative;top:3px}

.panel--room{aspect-ratio:1.78/1}
.panel--room img{height:100%;object-fit:cover;scale:1.06}

/* ============================================================
   footer
   ============================================================ */

.foot{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(26px,2.6vw,42px) var(--pad) clamp(34px,3.4vw,56px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:auto minmax(30px,1fr) auto auto;
  align-items:center;
  gap:clamp(18px,3vw,60px);
}
.foot .rule{margin-top:2px}
.foot__mark{
  margin:0;
  font-size:clamp(12px,.95vw,14.5px);
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.foot__mark a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.foot__mark a:hover{border-bottom-color:var(--ink)}
.foot__meta{text-align:right}

/* ============================================================
   motion — awareness, not entertainment
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

.drift{animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  from{transform:scale(1.035) translate3d(-3px,0,0)}
  to{transform:scale(1.035) translate3d(3px,-2px,0)}
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:1080px){
  .statement{grid-template-columns:1fr;align-items:start}
  .life{grid-template-columns:1fr 1fr;}
  .life__text{grid-column:1/-1}
  .panel--room{aspect-ratio:1.6/1}
  .foot{grid-template-columns:auto 1fr auto;row-gap:24px}
  .foot__meta{grid-column:3}
}

@media (max-width:860px){
  .pill > a:not(.wordmark):not(.btn),
  .pill__div{display:none}
  .pill{padding:5px 6px 5px 15px;gap:12px}
  .masthead{padding-top:78px}

  /* the notch stops working once the headline fills the width — stack instead */
  .stage__band{position:static;display:block}
  .plate--l{padding:0;background:none;border-radius:0}
  .plate--l::after{display:none}
  .plate--l .display{margin-top:0;padding-bottom:0}
  .rail .caps{color:var(--ink-muted);text-shadow:none}
  .rail{
    position:static;
    flex-direction:row;
    gap:28px;
    padding:16px 0 18px;
  }
  .panel--hero{aspect-ratio:1.15/1}
  .panel--hero img{object-position:50% 100%}
  .thoughts{grid-template-columns:1fr 1fr}
  .life{grid-template-columns:1fr}
  .traits{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .script--hero{
    left:26%;
    top:6%;
    right:auto;
    font-size:13px;
    text-align:left;
    text-shadow:0 1px 12px rgba(8,44,100,.6);
  }
}

@media (max-width:560px){
  .spec{grid-template-columns:1fr}
  .panel--pod{aspect-ratio:1.52}
  .thoughts{grid-template-columns:1fr}
  .panel--note{aspect-ratio:1.6/1}
  .traits{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr;text-align:left}
  .foot .rule{display:none}
  .foot__meta{text-align:left}
  .display{line-height:.9}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .drift{animation:none}
  *{transition-duration:.01ms !important}
}