/* ==========================================================================
   IMPLEMON — editorial system
   Quiet base. Precise intervention. A little acid.
   Typefaces are served from this origin. No third-party font host.
   ========================================================================== */

@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader.woff2") format("woff2");
  font-weight:200 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight:200 600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ground */
  --paper:#F4F2EA;
  --sheet:#FBFAF5;
  --mineral:#EBEEE3;
  /* ink */
  --ink:#1C1E1B;
  --ink-2:#6F7168;
  --ink-3:#9C9D93;
  /* structure */
  --rule:#D8D5C7;
  --rule-soft:#E5E2D5;
  /* intervention */
  --acid:#E6F32B;
  --acid-ink:#6B7600;
  --acid-wash:#F2F7BE;
  /* reserved */
  --cyan:#12719E;
  --dev-shadow:rgba(28,30,27,.46);
  --dev-shadow-near:rgba(28,30,27,.30);
  --badge-invert:0;
  /* rendering. The site is paper, always: one theme, no night version. */
  --smoothing:antialiased;
  --wt-display:400;
  --wt-read:400;
  --wt-frag:300;
  --wt-meta:500;
  --squeeze-size:100% .2em;
  --squeeze-pos:0 78%;
  --squeeze-zero:0 .2em;

  --sans:"Instrument Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype","Apple SD Gothic Neo","Noto Sans KR",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1200px;
  --gut:clamp(20px,5vw,64px);
  --rail:168px;
  --railgap:clamp(28px,4vw,64px);

  color-scheme:light;
}

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

/* In-page jumps clear the sticky masthead and move, so you can see where
   you went. Cross-page navigation is handled in the script. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body,
.page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:var(--smoothing);
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{max-width:100%;}
img{height:auto;display:block;}

::selection{background:var(--acid);color:#1C1E1B;}

a{color:inherit;}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;font:500 13px/1 var(--sans);
}
.skip:focus{left:12px;top:12px;}

/* ---------- containers ------------------------------------------------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.band{padding-block:clamp(76px,10vw,152px);}
.band-tight{padding-block:clamp(48px,6vw,84px);}
.band-mineral{background:var(--mineral);}
.band-sheet{background:var(--sheet);}
.band-line{border-top:1px solid var(--rule);}

/* the marginalia grid: a narrow annotation rail, then the column */
.tracks{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--railgap);
  align-items:start;
}
.tracks > .rail{grid-column:1;}
.tracks > .col{grid-column:2;}

.measure{max-width:63ch;}
.measure-wide{max-width:74ch;}

/* ---------- type ------------------------------------------------------- */

.meta{
  font-family:var(--mono);
  font-size:11px;
  font-weight:var(--wt-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0;
}
.meta-ink{color:var(--ink);}
.meta-acid{color:var(--acid-ink);}

.rail .meta + .meta-note{margin-top:14px;}
.meta-note{
  font-family:var(--serif);
  font-size:15px;
  font-style:italic;
  font-weight:var(--wt-read);
  line-height:1.45;
  color:var(--ink-2);
  margin:0;
  max-width:22ch;
}

.h-hero,.h-1,.h-2,.h-3{
  font-family:var(--serif);
  font-weight:var(--wt-display);
  font-variation-settings:"opsz" 44;
  margin:0;
  text-wrap:balance;
  letter-spacing:-.018em;
}
.h-hero{
  font-size:clamp(2.75rem,7.6vw,5.5rem);
  line-height:.99;
  letter-spacing:-.028em;
  font-variation-settings:"opsz" 72;
}
.h-1{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.04;}
.h-2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.1;}
.h-3{font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.22;letter-spacing:-.012em;}

.read{
  font-family:var(--serif);
  font-size:1.1875rem;
  line-height:1.66;
  font-weight:var(--wt-read);
  font-variation-settings:"opsz" 16;
}
.read p{margin:0 0 1.05em;}
.read p:last-child{margin-bottom:0;}

.lede{
  font-size:1.125rem;
  line-height:1.58;
  color:var(--ink-2);
  margin:0;
}
.hero .lede{color:color-mix(in srgb,var(--ink) 74%,var(--ink-2));}
.lede strong{color:var(--ink);font-weight:500;}

.say{
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.3vw,2.4rem);
  line-height:1.24;
  letter-spacing:-.015em;
  font-weight:var(--wt-display);
  margin:0;
  text-wrap:balance;
}
.say-italic{font-style:italic;}

.dim{color:var(--ink-2);}
.faint{color:var(--ink-3);}

/* the one acid device: a squeeze under a word */
.squeeze{
  white-space:nowrap;
  background-image:linear-gradient(var(--acid),var(--acid));
  background-repeat:no-repeat;
  background-position:var(--squeeze-pos);
  background-size:var(--squeeze-size);
  padding-inline:.04em;
}
.squeeze-anim{
  animation:squeeze .62s cubic-bezier(.22,.7,.2,1) .5s backwards;
}
@keyframes squeeze{from{background-size:var(--squeeze-zero);}}

.tick{
  display:inline-block;
  width:26px;height:2px;
  background:var(--acid);
  vertical-align:middle;
}

hr.hair{
  border:0;
  border-top:1px solid var(--rule);
  margin:0;
}

/* ---------- links ------------------------------------------------------ */

.link{
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid var(--rule);
  transition:border-color .18s ease,color .18s ease;
}
.link .arr{transition:transform .22s cubic-bezier(.22,.7,.2,1);display:inline-block;}
.link:hover{border-bottom-color:var(--acid-ink);color:var(--acid-ink);}
.link:hover .arr{transform:translateX(4px);}

.link-quiet{
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  transition:border-color .18s ease;
}
.link-quiet:hover{border-bottom-color:var(--ink);}

/* ---------- store badge ------------------------------------------------
   Apple's own badge artwork, unmodified. In dark mode it is inverted, which
   is Apple's white badge. Research Data Merger is not an App Store product,
   so it gets a plain button of the same height instead.
   ------------------------------------------------------------------------ */

.badge-store{
  display:inline-flex;
  border-radius:8px;
  transition:transform .2s cubic-bezier(.22,.7,.2,1),opacity .2s ease;
}
.badge-store img{
  height:44px;
  width:auto;
  display:block;
  filter:invert(var(--badge-invert,0));
}
.badge-store:hover{transform:translateY(-1px);opacity:.86;}
.badge-store:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px;}

.btn-buy{
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 20px;
  border-radius:8px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:-.005em;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.22,.7,.2,1);
}
.btn-buy:hover{background:var(--acid);color:#1C1E1B;transform:translateY(-1px);}

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

.masthead{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.masthead.is-stuck{border-bottom-color:var(--rule);}
.masthead-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:16px;
}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.20em;
  color:var(--ink);
}
.wordmark .mark{
  width:23px;height:23px;
  flex:none;
  display:block;
  color:var(--ink);
}
.wordmark .mark svg{width:100%;height:100%;display:block;}
.navlinks{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,30px);
  font-size:14px;
  font-weight:500;
}
.navlinks a{
  text-decoration:none;
  color:var(--ink-2);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.navlinks a:hover{color:var(--ink);border-bottom-color:var(--acid);}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acid);}

/* ---------- 01 hero ---------------------------------------------------- */

.hero{padding-block:clamp(64px,11vw,148px) clamp(56px,8vw,112px);}
.hero-head{margin-bottom:clamp(28px,4vw,44px);}
.hero .h-hero{max-width:16ch;}
.hero-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3vw,40px);
  max-width:56ch;
}
.hero-body p{margin:0;}
.hero-foot{
  margin-top:clamp(40px,6vw,76px);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:16px 28px;
}

/* ---------- 02 recognition --------------------------------------------- */

.frags{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;
  column-gap:clamp(30px,5vw,76px);
  row-gap:clamp(24px,3vw,40px);
  align-items:start;
  margin-top:clamp(34px,4.5vw,58px);
  padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--rule);
  max-width:64rem;
}
.frag{
  font-family:var(--serif);
  font-style:italic;
  font-weight:var(--wt-frag);
  font-size:clamp(1.3rem,2.5vw,1.9rem);
  line-height:1.32;
  letter-spacing:-.008em;
  color:var(--ink);
  margin:0;
  padding-left:.46em;
  text-indent:-.46em;
}

.frags-after{
  margin-top:clamp(40px,4.5vw,68px);
  max-width:46ch;
}

/* ---------- 03 argument ------------------------------------------------ */

.pull{
  margin-block:clamp(32px,4vw,52px);
  padding-left:clamp(16px,2vw,26px);
  border-left:2px solid var(--acid);
}

/* ---------- 04 the lemon ----------------------------------------------- */

.lemon-band{overflow:hidden;}
.lemon-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(36px,6vw,88px);
  align-items:center;
}
.lemon-art{
  color:var(--ink);
  justify-self:center;
  width:min(100%,460px);
  opacity:.95;
}
.lemon-art svg{width:100%;height:auto;}

/* scratch the segments and the colour fills in;
   the rind, vesicles and seeds sit on top, so they let the pointer through */
.lemon-art .lz-seg{
  fill:transparent;
  pointer-events:all;
  cursor:pointer;
  transition:fill .34s cubic-bezier(.22,.7,.2,1);
}
.lemon-art .lz-seg.is-on{fill:var(--acid);}

.lemon-hint{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:6px 14px;
  margin:18px 0 0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:var(--wt-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  min-height:1.4em;
  transition:color .3s ease;
}
.lemon-hint.is-done{color:var(--acid-ink);}
.lemon-reset{
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:var(--ink-2);
  background:none;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:0 0 2px;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.lemon-reset:hover{color:var(--ink);border-bottom-color:var(--ink);}

.namebuild{
  margin-top:clamp(34px,4vw,56px);
  font-family:var(--mono);
  font-size:clamp(.95rem,2.6vw,1.6rem);
  line-height:1.9;
  letter-spacing:.24em;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
}
.namebuild div{display:block;}
.namebuild .nb-pad{color:transparent;}
.namebuild .nb-drop{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3);}
.namebuild .nb-lem{color:var(--acid-ink);font-weight:500;}
.namebuild .nb-rule{
  height:1px;background:var(--rule);
  margin:12px 0 14px;width:6.72em;
}
.namebuild .nb-final{color:var(--ink);font-weight:500;}
.namebuild .nb-final-lem{
  background-image:linear-gradient(var(--acid),var(--acid));
  background-repeat:no-repeat;
  background-position:0 96%;
  background-size:100% .16em;
}
.namebuild-note{margin-top:22px;}

/* ---------- 05 product chapters ---------------------------------------- */

.chapters{display:flex;flex-direction:column;}
.chapter{
  border-top:1px solid var(--rule);
  padding-block:clamp(48px,6vw,88px);
}
.chapter-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.chapter-flip .chapter-art{order:-1;}
.chapter-index{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
}
.chapter-index .num{color:var(--acid-ink);}
.chapter-name{margin-bottom:10px;}
.chapter-heard{
  font-family:var(--serif);
  font-style:italic;
  font-weight:var(--wt-read);
  font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.35;
  color:var(--ink-2);
  margin:0 0 22px;
}
.chapter-body p{margin:0 0 .95em;font-size:1rem;line-height:1.6;color:var(--ink-2);}
.chapter-body p:last-of-type{margin-bottom:0;}
.chapter-rule{
  text-wrap:balance;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.8vw,1.28rem);
  line-height:1.34;
  color:var(--ink);
}
.chapter-foot{margin-top:26px;}
.chapter-foot .stat{display:inline-flex;}
.chapter-foot-links{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 26px;
}

/* ---------- devices ------------------------------------------------------
   Real hardware proportions: iPhone body 71 × 147 mm, 4% bezel, 16.3% corner
   radius; Apple Watch case 44 × 52 mm. Screenshots sit at their own scale
   inside, with nothing invented on the glass.
   ------------------------------------------------------------------------ */

.stage{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:clamp(8px,1.4vw,18px);
}

.dev{position:relative;flex:none;}
.dev-screen{position:relative;height:100%;overflow:hidden;background:#000;}
.dev-screen img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.dev-btn{
  position:absolute;
  background:linear-gradient(180deg,#8b8f94,#43464a 55%,#2c2e31);
}

/* iPhone -------------------------------------------------------------- */
.dev-phone{
  --w:clamp(128px,17vw,228px);
  --r:calc(var(--w) * .163);
  --rail:calc(var(--w) * .012);
  --bez:calc(var(--w) * .029);
  width:var(--w);
  aspect-ratio:71/147;
  border-radius:var(--r);
  padding:var(--rail);
  background:linear-gradient(147deg,
    #9aa0a6 0%, #4d5155 12%, #2c2f33 26%, #767b81 44%,
    #35383c 60%, #6b7076 78%, #2a2c2f 92%, #4e5257 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.22),
    0 34px 48px -30px var(--dev-shadow),
    0 6px 14px -8px var(--dev-shadow-near);
}
.dev-phone .dev-body{
  height:100%;
  border-radius:calc(var(--r) - var(--rail));
  padding:var(--bez);
  background:#07080a;
}
.dev-phone .dev-screen{
  border-radius:calc(var(--r) - var(--rail) - var(--bez));
}
.dev-island{
  position:absolute;
  top:calc(var(--w) * .026);
  left:50%;
  transform:translateX(-50%);
  width:calc(var(--w) * .293);
  height:calc(var(--w) * .085);
  border-radius:999px;
  background:#000;
}
.dev-phone .dev-btn{border-radius:1px;}
.dev-btn-power{
  right:calc(var(--w) * -.008);
  width:calc(var(--w) * .011);
  height:calc(var(--w) * .125);
  top:23.5%;
}
.dev-btn-action{
  left:calc(var(--w) * -.008);
  width:calc(var(--w) * .011);
  height:calc(var(--w) * .052);
  top:15.5%;
}
.dev-btn-vol-up{
  left:calc(var(--w) * -.008);
  width:calc(var(--w) * .011);
  height:calc(var(--w) * .082);
  top:24%;
}
.dev-btn-vol-down{
  left:calc(var(--w) * -.008);
  width:calc(var(--w) * .011);
  height:calc(var(--w) * .082);
  top:33.5%;
}

.dev-phone-lead{--w:clamp(146px,19.5vw,264px);}

/* Apple Watch ---------------------------------------------------------- */
.dev-watch{
  --w:clamp(84px,9.5vw,132px);
  --r:calc(var(--w) * .285);
  width:var(--w);
  aspect-ratio:44/52;
  border-radius:var(--r);
  padding:calc(var(--w) * .062);
  background:linear-gradient(145deg,
    #a7acb2 0%, #595d62 20%, #34373b 44%, #868b91 64%, #2f3235 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.24),
    0 24px 34px -24px var(--dev-shadow),
    0 4px 10px -6px var(--dev-shadow-near);
}
.dev-watch .dev-screen{border-radius:calc(var(--r) - var(--w) * .06);}
.dev-watch::before,
.dev-watch::after{
  content:"";
  position:absolute;
  left:50%;
  width:58%;
  height:32%;
  transform:translateX(-50%);
}
.dev-watch::before{
  bottom:96%;
  background:linear-gradient(to top,#3a3d41,#2a2c2f 60%,rgba(42,44,47,0));
  border-radius:calc(var(--w) * .07) calc(var(--w) * .07) 0 0;
  clip-path:polygon(13% 0, 87% 0, 100% 100%, 0 100%);
}
.dev-watch::after{
  top:96%;
  background:linear-gradient(to bottom,#3a3d41,#2a2c2f 60%,rgba(42,44,47,0));
  border-radius:0 0 calc(var(--w) * .07) calc(var(--w) * .07);
  clip-path:polygon(0 0, 100% 0, 87% 100%, 13% 100%);
}
.dev-crown{
  position:absolute;
  right:calc(var(--w) * -.036);
  top:29%;
  width:calc(var(--w) * .046);
  height:calc(var(--w) * .125);
  border-radius:2px;
  background:linear-gradient(180deg,#9aa0a6,#4a4d51);
}
.dev-wbtn{
  position:absolute;
  right:calc(var(--w) * -.022);
  top:50%;
  width:calc(var(--w) * .03);
  height:calc(var(--w) * .1);
  border-radius:2px;
  background:linear-gradient(180deg,#7c8086,#3c3f42);
}

/* composition ---------------------------------------------------------- */
.dev-behind{
  z-index:1;
  margin-right:calc(var(--w) * -.46);
  transform:translateY(-4%) scale(.9);
  transform-origin:center right;
}
.dev-front{z-index:2;}
.dev-watch-front{
  z-index:3;
  margin-left:calc(var(--w) * -.42);
  align-self:flex-end;
  margin-bottom:9%;
}

.stat{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.stat::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--acid);
  flex:none;
}
.stat-dev::before{background:var(--ink-3);}

/* ---------- 06 process ------------------------------------------------- */

.steps{
  margin-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--rule);
}
.step{
  display:grid;
  grid-template-columns:172px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding-block:22px;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.step:last-child{border-bottom:1px solid var(--rule);}
.step p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.55;}
.step-open .meta{color:var(--acid-ink);}
.step-open p{color:var(--ink);}

.tradeoff{
  margin-top:clamp(36px,4vw,56px);
  background:var(--sheet);
  border:1px solid var(--rule);
  padding:clamp(20px,3vw,32px);
}
.tradeoff .meta{margin-bottom:12px;}
.tradeoff p{margin:0;max-width:60ch;}

/* ---------- 07 restraint ----------------------------------------------- */

.decisions{
  margin-top:clamp(32px,4vw,52px);
  display:grid;
  gap:0;
  border-top:1px solid var(--rule);
}
.decision{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding-block:20px;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.decision p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.55;}

/* ---------- 08 closure ------------------------------------------------- */

.closure{
  padding-block:clamp(96px,16vw,220px);
  text-align:center;
}
.closure-frags{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,22px);
  align-items:center;
  margin-bottom:clamp(40px,6vw,72px);
}
.closure-frags span{
  font-family:var(--serif);
  font-style:italic;
  font-weight:var(--wt-read);
  font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--ink-2);
}
.closure .tick{margin-bottom:clamp(30px,4vw,48px);opacity:.9;}
.closure .h-1{max-width:18ch;margin-inline:auto;}
.closure-note{margin-top:28px;max-width:34ch;margin-inline:auto;}

/* ---------- 09 studio -------------------------------------------------- */

.studio-sign{
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  align-items:baseline;
}

/* ---------- 10 work index ---------------------------------------------- */

.idx-group{margin-top:clamp(36px,4.5vw,60px);}
.idx-group + .idx-group{margin-top:clamp(44px,5vw,72px);}
.idx-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--ink);
}
.idx-list{list-style:none;margin:0;padding:0;}
.idx-row{border-bottom:1px solid var(--rule-soft);}
.idx-row .idx-link{
  display:grid;
  grid-template-columns:44px minmax(0,1.5fr) minmax(0,1.6fr) auto;
  gap:clamp(12px,2vw,28px);
  align-items:center;
  padding-block:16px;
  padding-inline:8px;
  margin-inline:-8px;
  text-decoration:none;
  transition:background-color .18s ease;
}
.idx-row a.idx-link:hover{background:var(--sheet);}
.idx-row a.idx-link:hover .idx-name{color:var(--acid-ink);}
.idx-icon{width:44px;height:44px;border-radius:10px;border:1px solid var(--rule);overflow:hidden;}
.idx-icon img{width:100%;height:100%;object-fit:cover;}
.idx-name{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  letter-spacing:-.005em;
  transition:color .18s ease;
}
.idx-what{color:var(--ink-2);font-size:.9375rem;line-height:1.45;}
.idx-side{
  text-align:right;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(10px,1.4vw,18px);
}
.idx-arrow{color:var(--ink-3);transition:transform .22s cubic-bezier(.22,.7,.2,1),color .18s ease;}
.idx-row a.idx-link:hover .idx-arrow{transform:translateX(4px);color:var(--ink);}

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

.foot{
  border-top:1px solid var(--rule);
  padding-block:clamp(44px,6vw,72px) clamp(28px,4vw,44px);
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:start;
}
.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  font-size:.9375rem;
}
.foot-links a{text-decoration:none;color:var(--ink-2);transition:color .18s ease;}
.foot-links a:hover{color:var(--ink);}
.foot-bottom{
  margin-top:clamp(36px,5vw,60px);
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  align-items:center;
  justify-content:space-between;
}

/* the mark signs off, quietly */
.foot-mark{
  width:26px;height:26px;
  flex:none;
  color:var(--ink-2);
  opacity:.85;
}
.foot-mark svg{width:100%;height:100%;display:block;transition:transform .5s cubic-bezier(.22,.7,.2,1);}
.foot:hover .foot-mark svg{transform:rotate(14deg);}

/* ---------- back to top, with how far you have read --------------------- */

.totop{
  position:fixed;
  right:clamp(16px,3vw,32px);
  bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom, 0px));
  z-index:50;
  width:46px;height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--sheet);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 10px 24px -14px var(--dev-shadow),0 0 0 1px var(--rule) inset;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.7,.2,1),visibility .28s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none;}
.totop:hover{color:var(--acid-ink);}
.totop-ring{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  transform:rotate(-90deg);
  pointer-events:none;
}
.totop-track{fill:none;stroke:var(--rule-soft);stroke-width:2;}
.totop-bar{
  fill:none;
  stroke:var(--acid);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:125.66;
  stroke-dashoffset:125.66;
}
.totop-arrow{
  font-family:var(--sans);
  font-size:15px;
  line-height:1;
  position:relative;
  transition:transform .22s cubic-bezier(.22,.7,.2,1);
}
.totop:hover .totop-arrow{transform:translateY(-2px);}

@media print{.totop{display:none;}}

/* ---------- notes / long form ------------------------------------------ */

.note-hero{padding-block:clamp(56px,8vw,110px) clamp(32px,4vw,52px);}
.article{
  max-width:none;
}
.article-body{
  font-family:var(--serif);
  font-size:1.1875rem;
  line-height:1.72;
  font-weight:var(--wt-read);
  font-variation-settings:"opsz" 16;
  max-width:65ch;
}
.article-body p{margin:0 0 1.15em;}
.article-body p.first::first-letter{
  font-size:1.05em;
}
.article-body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.16;
  letter-spacing:-.015em;
  margin:2.2em 0 .7em;
  text-wrap:balance;
}
.article-body h2:first-child{margin-top:0;}
.article-body blockquote{
  margin:1.6em 0;
  padding-left:clamp(16px,2vw,24px);
  border-left:2px solid var(--acid);
  font-size:1.1em;
  line-height:1.4;
}
.article-body blockquote p{margin:0;}
.article-body em{font-style:italic;}
.article-body strong{font-weight:600;}
.article-body .aside{
  font-family:var(--sans);
  font-size:.9375rem;
  line-height:1.55;
  color:var(--ink-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-block:16px;
  margin-block:2em;
}
.article-sep{
  display:block;
  width:19px;
  margin:2.6em auto;
  color:var(--ink-3);
}
.article-sep svg{width:100%;height:auto;display:block;}

.notes-list{list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;border-top:1px solid var(--ink);}
.notes-item{border-bottom:1px solid var(--rule);}
.notes-item a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:baseline;
  padding-block:clamp(22px,3vw,34px);
  text-decoration:none;
}
.notes-item a:hover .h-2{color:var(--acid-ink);}
.notes-item .h-2{transition:color .18s ease;}
.notes-item p{margin:10px 0 0;color:var(--ink-2);max-width:58ch;font-size:1rem;}

/* ---------- product directory ------------------------------------------ */

.dir-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin-top:26px;
}

.dir-group{margin-top:clamp(40px,5vw,72px);}
.dir-group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--ink);
}
.dir-group-head p{margin:0;}
.dir-list{list-style:none;margin:0;padding:0;}
.dir-item{
  border-bottom:1px solid var(--rule-soft);
  padding-block:clamp(20px,2.4vw,28px);
  display:grid;
  grid-template-columns:56px minmax(0,1.5fr) minmax(0,.9fr);
  gap:clamp(14px,2.4vw,32px);
  align-items:start;
}
.dir-icon{
  width:56px;height:56px;border-radius:13px;
  border:1px solid var(--rule);overflow:hidden;background:var(--mineral);
}
.dir-icon img{width:100%;height:100%;object-fit:cover;}
.dir-icon-empty{border-style:dashed;}
.dir-name{
  font-family:var(--sans);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.005em;margin:0 0 6px;
}
.dir-what{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.5;max-width:46ch;}
.dir-actions{
  margin-top:16px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
}
.dir-facts{display:flex;flex-direction:column;gap:7px;padding-top:3px;}
.dir-facts .meta{line-height:1.4;}
.dir-plat{color:var(--ink-3);}

@media (max-width:760px){
  .dir-item{grid-template-columns:48px minmax(0,1fr);row-gap:12px;}
  .dir-icon{width:48px;height:48px;}
  .dir-body,.dir-facts{grid-column:2/-1;}
  .dir-facts{flex-direction:row;flex-wrap:wrap;gap:6px 16px;}
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width:1000px){
  .tracks{grid-template-columns:minmax(0,1fr);row-gap:20px;}
  .tracks > .rail,.tracks > .col{grid-column:1;}
  .rail{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;}
  .meta-note{max-width:40ch;}
  .rail .meta + .meta-note{margin-top:0;}

  .lemon-grid{grid-template-columns:minmax(0,1fr);}
  .lemon-art{width:min(100%,360px);order:-1;}

  .chapter-grid{grid-template-columns:minmax(0,1fr);}
  .chapter-flip .chapter-art{order:0;}
  .stage{justify-content:flex-start;}
}

@media (max-width:760px){
  body,.page{font-size:16px;}
  .frags{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-auto-flow:row;
    row-gap:clamp(20px,5vw,28px);
  }
  .step,.decision{grid-template-columns:minmax(0,1fr);gap:8px;}
  .idx-row .idx-link{
    grid-template-columns:40px minmax(0,1fr);
    row-gap:8px;
    align-items:start;
  }
  .idx-icon{width:40px;height:40px;grid-column:1;grid-row:1;}
  .idx-name{grid-column:2;grid-row:1;}
  .idx-what{grid-column:2;grid-row:2;}
  .idx-side{grid-column:2;grid-row:3;justify-content:flex-start;text-align:left;}
  .foot-top{grid-template-columns:minmax(0,1fr);}
  .namebuild{letter-spacing:.16em;}
  .notes-item a{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:560px){
  .dev-behind{margin-right:calc(var(--w) * -.52);transform:translateY(-3%) scale(.86);}
  .dev-watch-front{margin-left:calc(var(--w) * -.5);margin-bottom:12%;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .squeeze-anim{animation:none;}
}

@media print{
  .masthead,.foot-mark{display:none;}
  .page{background:#fff;color:#000;}
}

/* ==========================================================================
   Product pages
   The editorial frame stays the same on every one. Each product brings one
   accent of its own (--p), used only on the layer numbers and one rule.
   ========================================================================== */

.p-hero{padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,92px);}
.p-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
.p-crumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 clamp(18px,2.4vw,28px);
}
.p-crumb a{text-decoration:none;color:var(--ink-2);}
.p-crumb a:hover{color:var(--ink);}
.p-crumb .sep{color:var(--ink-3);}
.p-crumb .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--p,var(--acid));
  flex:none;
}
.p-name{margin:0;}
.p-thesis{
  margin:clamp(16px,2vw,24px) 0 0;
  max-width:20ch;
}
.p-lede{margin:clamp(18px,2.4vw,28px) 0 0;max-width:50ch;}
.p-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin-top:clamp(24px,3vw,34px);
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--rule);
}
.p-facts > *:not(:last-child)::after{
  content:"·";
  color:var(--ink-3);
  margin-left:14px;
}
.p-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  margin-top:clamp(22px,3vw,30px);
}

/* the three layers -------------------------------------------------------- */

.layer{
  border-top:1px solid var(--rule);
  padding-block:clamp(52px,6.5vw,104px);
}
.layer-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:clamp(26px,3.5vw,44px);
}
.layer-num{color:var(--p,var(--acid-ink));}
.layer > .steps,
.layer > .decisions{max-width:64rem;}
.layer .step p,
.layer .decision p{max-width:60ch;}
.p-intro{max-width:56ch;margin-top:18px;margin-bottom:clamp(30px,4vw,54px);}

.feat{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(26px,4vw,64px);
  align-items:center;
  padding-block:clamp(30px,4vw,54px);
  border-top:1px solid var(--rule-soft);
}
.feat:first-of-type{border-top:0;padding-top:0;}
.feat-flip .feat-art{order:-1;}
.feat-solo{grid-template-columns:minmax(0,1fr);}
.feat-text h3{margin:10px 0 0;}
.feat-text p{margin:14px 0 0;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:46ch;}
.feat-list{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  max-width:50ch;
  border-top:1px solid var(--rule-soft);
}
.feat-list li{
  padding-block:9px;
  border-bottom:1px solid var(--rule-soft);
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink-2);
}
.feat-list li b{color:var(--ink);font-weight:600;}

.plate{
  border-radius:12px;
  border:1px solid var(--rule);
  overflow:hidden;
  background:var(--sheet);
  box-shadow:0 20px 38px -30px var(--dev-shadow);
}
.plate img{width:100%;height:auto;display:block;}

.p-rule{
  margin-top:clamp(34px,4vw,56px);
  padding-left:clamp(16px,2vw,26px);
  border-left:2px solid var(--p,var(--acid));
}
.p-caveat{
  margin-top:clamp(30px,4vw,48px);
  padding-top:20px;
  border-top:1px solid var(--rule);
  max-width:62ch;
  color:var(--ink-2);
  font-size:.9375rem;
  line-height:1.6;
}

.p-close{
  border-top:1px solid var(--rule);
  padding-block:clamp(56px,7vw,110px);
  text-align:center;
}
.p-close .say{max-width:22ch;margin-inline:auto;}
.p-close .p-actions{justify-content:center;margin-top:clamp(28px,4vw,40px);}

@media (max-width:900px){
  .p-hero-grid{grid-template-columns:minmax(0,1fr);}
  .p-hero-grid .p-art{order:-1;}
  .feat{grid-template-columns:minmax(0,1fr);}
  .feat-flip .feat-art{order:0;}
}

/* ==========================================================================
   Documents
   Support, privacy, contact, and the Research Data Merger manual and guides.
   Reference material, so the body is set in the sans at a comfortable measure
   and the headings keep the serif.
   ========================================================================== */

.doc-head{padding-block:clamp(44px,6.5vw,92px) clamp(24px,3.4vw,38px);}
.doc-intro{margin-top:clamp(16px,2vw,22px);max-width:56ch;}
.doc-updated{margin-top:clamp(16px,2vw,22px);}
.doc-sub{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  margin-top:clamp(22px,3vw,32px);
  padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--rule);
}
.doc-sub a{
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:500;
  text-decoration:none;
  color:var(--ink-2);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.doc-sub a:hover{color:var(--ink);border-bottom-color:var(--p,var(--acid));}
.doc-sub a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--p,var(--acid));}

.doc-wrap{padding-bottom:clamp(56px,8vw,120px);}

.doc{
  font-size:1.0625rem;
  line-height:1.7;
  max-width:70ch;
}
.doc > section{
  padding-block:clamp(22px,2.8vw,34px);
  border-top:1px solid var(--rule-soft);
}
.doc > section:first-child{border-top:0;padding-top:0;}
.doc h2{
  font-family:var(--serif);
  font-weight:var(--wt-display);
  font-size:clamp(1.22rem,2.1vw,1.5rem);
  line-height:1.22;
  letter-spacing:-.012em;
  margin:0 0 .55em;
  color:var(--ink);
  text-wrap:balance;
}
.doc h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  margin:1.7em 0 .45em;
  color:var(--ink);
}
.doc p{margin:0 0 1em;color:var(--ink-2);}
.doc p:last-child{margin-bottom:0;}
.doc strong,.doc b{color:var(--ink);font-weight:600;}
.doc a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color .18s ease;
}
.doc a:hover{border-bottom-color:var(--ink);}
.doc ul,.doc ol{margin:0 0 1em;padding-left:1.2em;color:var(--ink-2);}
.doc li{margin-bottom:.4em;}
.doc li:last-child{margin-bottom:0;}
.doc li::marker{color:var(--ink-3);}

.doc-example{
  margin:1.5em 0;
  background:var(--sheet);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:14px 16px 16px;
}
.doc-example .label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:10px;
}
.doc-example pre{
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.65;
  margin:0;
  color:var(--ink);
  overflow-x:auto;
}
.doc-note{
  margin:1.5em 0;
  padding-left:clamp(14px,1.6vw,20px);
  border-left:2px solid var(--p,var(--acid));
  color:var(--ink-2);
}
.doc-note p:last-child{margin-bottom:0;}
.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px 32px;
  margin:1.4em 0;
}
.doc-grid h3{margin-top:0;}
.doc-grid p{font-size:.9375rem;}

.doc-toc{list-style:none;margin:14px 0 0;padding:0;}
.doc-toc li{margin-bottom:9px;}
.doc-toc a{
  font-family:var(--sans);
  font-size:.875rem;
  line-height:1.4;
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.doc-toc a:hover{color:var(--ink);border-bottom-color:var(--rule);}

.doc-tools{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  align-items:center;
  margin-bottom:clamp(24px,3vw,36px);
}
.doc-search{
  flex:1 1 260px;
  min-width:0;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:var(--sheet);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:11px 14px;
}
.doc-search::placeholder{color:var(--ink-3);}
.doc-search:focus{outline:2px solid var(--cyan);outline-offset:2px;}
.doc-langs{display:flex;gap:14px;}
.doc-empty{
  padding-block:30px;
  color:var(--ink-2);
  font-size:.9375rem;
}

.btn-mail{
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 20px;
  border-radius:8px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:600;
  font-size:.9375rem;
  border:0;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.22,.7,.2,1);
}
.btn-mail:hover{background:var(--acid);color:#1C1E1B;transform:translateY(-1px);}

/* A collapsed example, as the manual uses it. ------------------------------ */
.doc-details{
  margin:1.5em 0 0;
  border-top:1px solid var(--rule-soft);
}
.doc-details > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex;
  align-items:center;
  gap:10px;
  transition:color .2s ease;
}
.doc-details > summary::-webkit-details-marker{display:none;}
.doc-details > summary::before{
  content:"";
  width:0;height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .2s cubic-bezier(.22,.7,.2,1);
}
.doc-details[open] > summary::before{transform:rotate(90deg);}
.doc-details > summary:hover{color:var(--ink);}
.doc-details .doc-example{margin:0 0 14px;}

/* The guide index. --------------------------------------------------------- */
.doc-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  margin:1.6em 0 .6em;
}
.doc-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(20px,2.4vw,26px);
  background:var(--paper);
  border-bottom:0 !important;
  color:inherit;
  text-decoration:none;
  transition:background .2s ease;
}
.doc-card:hover{background:var(--sheet);}
.doc-card-kick{color:var(--p,var(--ink-3));}
.doc-card-t{
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.35;
  font-weight:var(--wt-display);
  color:var(--ink);
  -webkit-font-smoothing:var(--smoothing);
}
.doc-card-d{
  font-size:.9062rem;
  line-height:1.6;
  color:var(--ink-2);
}
.doc-card-go{margin-top:auto;padding-top:10px;color:var(--ink-3);transition:color .2s ease;}
.doc-card:hover .doc-card-go{color:var(--ink);}
.doc > section > *:last-child{margin-bottom:0;}

/* KKUM's world: a numbered vocabulary, and an archive's four stages. -------- */
.terms,.stages{
  list-style:none;
  margin:0;
  padding:0;
  max-width:68rem;
}
.term,.stage-row{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--railgap);
  padding-block:clamp(24px,3.2vw,38px);
  border-top:1px solid var(--rule-soft);
}
.term:first-child,.stage-row:first-child{border-top:0;padding-top:0;}
.term-n{color:var(--p,var(--acid-ink));}
.term-name,.stage-what{margin:0;}
.term-def{
  margin:12px 0 0;
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.55;
  font-weight:var(--wt-read);
  max-width:52ch;
}
.term-note{
  margin:10px 0 0;
  color:var(--ink-2);
  font-size:.9375rem;
  line-height:1.6;
  max-width:52ch;
}
.stage-when{color:var(--ink-3);}
.stage-body p{
  margin:12px 0 0;
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.62;
  max-width:54ch;
}

.plate-fig{margin:clamp(28px,3.4vw,44px) 0;max-width:58rem;}
.plate-cap{margin:14px 0 0;max-width:56ch;line-height:1.55;}
.layer .plate-fig + .read,.layer .read + .plate-fig{margin-top:clamp(28px,3.4vw,44px);}

.kk-figure{display:flex;justify-content:center;}
.kk-figure img{
  width:clamp(150px,22vw,260px);
  height:auto;
  filter:drop-shadow(0 26px 34px -22px var(--dev-shadow));
}

@media (max-width:860px){
  .term,.stage-row{grid-template-columns:minmax(0,1fr);row-gap:10px;}
}
.feat-cap{margin:16px 0 0;line-height:1.55;max-width:34ch;}

/* One product needs to be watched, not read. ------------------------------- */
.demo{
  margin:0 0 clamp(34px,4.4vw,56px);
  max-width:62rem;
  scroll-margin-top:110px;
}
.demo-poster{
  position:relative;
  display:block;
  border:1px solid var(--rule);
  border-radius:12px;
  overflow:hidden;
  background:var(--sheet);
  text-decoration:none;
  color:inherit;
  box-shadow:0 22px 40px -32px var(--dev-shadow);
  transition:box-shadow .25s ease,transform .25s cubic-bezier(.22,.7,.2,1);
}
.demo-poster:hover{
  transform:translateY(-2px);
  box-shadow:0 28px 48px -30px var(--dev-shadow);
}
.demo-poster img{width:100%;height:auto;display:block;}
.demo-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(12,14,11,.92) 0%,rgba(12,14,11,.72) 22%,
                    rgba(12,14,11,.28) 48%,rgba(12,14,11,0) 76%),
    linear-gradient(to bottom,rgba(12,14,11,.5) 0%,rgba(12,14,11,0) 18%);
}
.demo-tag{
  position:absolute;top:14px;left:16px;
  color:#F4F2EA;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.demo-copy{
  position:absolute;left:clamp(16px,2.4vw,26px);bottom:clamp(14px,2vw,22px);
  right:calc(clamp(16px,2.4vw,26px) + 74px);
  display:flex;flex-direction:column;gap:3px;
  color:#F6F4EC;
}
.demo-copy strong{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  font-weight:500;
  letter-spacing:-.012em;
}
.demo-copy small{font-size:.9375rem;color:rgba(246,244,236,.88);}
.demo-play{
  position:absolute;right:clamp(16px,2.4vw,26px);bottom:clamp(14px,2vw,22px);
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--acid);
  color:#1C1E1B;
  padding-left:3px;
  transition:transform .25s cubic-bezier(.22,.7,.2,1);
}
.demo-poster:hover .demo-play{transform:scale(1.07);}
.demo-frame{
  position:relative;
  aspect-ratio:16 / 9;
  border:1px solid var(--rule);
  border-radius:12px;
  overflow:hidden;
  background:#101210;
}
.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.demo-note{
  margin:14px 0 0;
  font-size:.875rem;
  line-height:1.6;
  color:var(--ink-3);
  max-width:64ch;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  align-items:baseline;
}
.demo-note a{color:var(--ink-2);border-bottom:1px solid var(--rule);text-decoration:none;}
.demo-note a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.demo-close{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  border-bottom:1px solid var(--rule);
}
.demo-close:hover{color:var(--ink);border-bottom-color:var(--ink);}
/* On a phone the poster is too small to carry text over it: the words move
   out of the picture and become a caption under it. */
@media (max-width:700px){
  .demo-poster{display:flex;flex-direction:column;}
  .demo-tag{display:none;}
  .demo-scrim{display:none;}
  .demo-copy{
    position:static;
    order:2;
    padding:16px 18px 18px;
    background:var(--sheet);
    border-top:1px solid var(--rule);
    color:var(--ink);
    gap:5px;
  }
  .demo-copy strong{font-size:1.0625rem;}
  .demo-copy small{font-size:.875rem;color:var(--ink-2);}
  .demo-play{
    width:48px;height:48px;
    bottom:auto;top:calc(50% - 24px);right:auto;left:calc(50% - 24px);
    transform:translateY(-22px);
    box-shadow:0 8px 22px -8px rgba(12,14,11,.6);
  }
  .demo-poster:hover .demo-play{transform:translateY(-22px) scale(1.07);}
}