@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Fragment+Mono:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Schibsted+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');
:root {
  --paper:#f5f1e9;
  --ink:#232420;
  --muted:#6f6f66;
  --line:#dcd5c8;
  --red:#7f3330;
  --sage:#dce3cc;
  --brass:#b08a4e;
  --mono:'Fragment Mono',ui-monospace,monospace;
  --sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --hand:'Caveat',cursive;
  --serif:'Newsreader',Georgia,serif;
  /* One warm key light from the upper left: every shadow falls down-right, in warm umber. */
  --umber:52,38,22;
  --shadow-paper:0 .5px .5px rgba(var(--umber),.16),1px 3px 3px -1px rgba(var(--umber),.12),5px 12px 18px -6px rgba(var(--umber),.16);
  --shadow-raised:0 1px 1px rgba(var(--umber),.18),2px 5px 6px -2px rgba(var(--umber),.16),10px 24px 34px -10px rgba(var(--umber),.24);
  /* Fine paper fibre, tiled. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.38'/%3E%3C/svg%3E");
  /* Pebbled leather relief: turbulence height field lit from the upper left (azimuth 225deg). */
  --leather:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.38' numOctaves='3' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='1.6' diffuseConstant='.6' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  /* Paper: long horizontal fibres plus fine tooth, as a faint darkening layer in a large tile. */
  --paper-fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='3' seed='4' stitchTiles='stitch' result='f'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' stitchTiles='stitch' result='t'/%3E%3CfeBlend in='f' in2='t' mode='multiply' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .2 -.38 0 0 0 .15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* Large, soft tonal variation for the desk surface. */
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.16'/%3E%3C/svg%3E");
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-size:16px;
  line-height:1.5;
}
body:before {
  content:'';
  position:fixed;
  inset:0;
  opacity:.13;
  pointer-events:none;
  z-index:25;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.22' filter='url(%23n)'/%3E%3C/svg%3E");
}
a {
  color:inherit;
  text-decoration:none;
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
  color:inherit;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible {
  outline:2px solid var(--red);
  outline-offset:6px;
}
button {
  border:0;
}
h1,h2,h3,p {
  margin:0;
}
button:disabled {
  cursor:default;
}
[hidden] {
  display:none!important;
}
.skip {
  position:fixed;
  top:-60px;
  left:16px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:100;
}
.skip:focus {
  top:12px;
}
.nav {
  height:90px;
  width:min(1280px,calc(100% - 80px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:12;
}
.brand-logo {
  display:block;
  width:236px;
  height:auto;
}
.brand {
  display:block;
  line-height:0;
}
.nav nav {
  display:flex;
  gap:34px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  letter-spacing:-.005em;
}
.nav nav a {
  position:relative;
  padding:6px 0;
  transition:color .2s;
}
.nav nav a:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav nav a:hover {
  color:var(--red);
}
.nav nav a:hover:after {
  transform:scaleX(1);
}
.nav-contact {
  background:linear-gradient(180deg,#2c2d28,#1f201c);
  color:#f8f4ea;
  padding:12px 22px;
  border-radius:6px;
  font-size:15px;
  box-shadow:inset 0 1px 0 #ffffff14,0 1px 1px rgba(var(--umber),.2),2px 6px 12px -4px rgba(var(--umber),.3);
  transition:background .25s;
  font-weight:500;
  letter-spacing:-.005em;
}
.nav-contact:hover {
  background:var(--red);
}
/* The desk surface: same paper tone as the page, lit by a soft window from the upper left
   and falling off toward the lower right, with faint material mottling. */
.hero {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 18% 12%,#fffcf5d9,#fffcf500 70%),
    radial-gradient(ellipse 70% 60% at 92% 96%,rgba(var(--umber),.075),transparent 70%),
    var(--mottle);
  background-size:auto,auto,900px 900px;
}
.hero:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:60px;
  background:linear-gradient(transparent,var(--paper));
  pointer-events:none;
}
.desk {
  position:relative;
  width:1440px;
  height:830px;
  left:50%;
  margin-left:-720px;
  isolation:isolate;
  --px:0px;
  --py:0px;
}
.notebook {
  width:770px;
  height:530px;
  position:absolute;
  top:132px;
  left:304px;
  z-index:3;
  transform:rotate(-6deg);
  display:flex;
  border-radius:15px;
  transition:transform .5s;
}
.notebook:hover,.notebook:focus-visible {
  transform:rotate(-5deg) translateY(-3px);
}
/* Camel leather hardcover, a few millimetres larger than the page block. The pebbled grain is a
   lit height field (SVG turbulence + diffuse lighting from the upper left), soft-light blended
   into the hide colour so it reads as surface relief rather than printed noise. */
.notebook-back {
  position:absolute;
  inset:-7px -9px -12px;
  border-radius:16px 18px 18px 16px;
  background:
    linear-gradient(118deg,#fff3dc29,transparent 32%,transparent 70%,#2a1a0a1f),
    var(--leather),
    radial-gradient(ellipse 120% 90% at 28% 18%,#ad8e63,#977650 55%,#83643f);
  background-size:auto,260px 260px,auto;
  background-blend-mode:normal,soft-light,normal;
  box-shadow:
    inset 0 1px 0 #f2dfba73,
    inset 1px 0 0 #e9d3a940,
    inset 0 0 0 1px #5a412566,
    inset -2px -3px 5px #3b281340,
    0 .5px .5px rgba(var(--umber),.42),
    1px 2px 2px rgba(var(--umber),.24),
    4px 9px 11px -3px rgba(var(--umber),.22),
    16px 32px 44px -14px rgba(var(--umber),.3);
}
/* Paper: large-tile fibre texture (stretched turbulence) over a faint tonal unevenness. */
.page {
  width:50%;
  position:relative;
  z-index:1;
  background-color:#f6f0e2;
  background-image:var(--paper-fibre),linear-gradient(#7e705a1c 1px,transparent 1px),linear-gradient(90deg,#7e705a1c 1px,transparent 1px);
  background-size:360px 360px,18px 18px,18px 18px;
  padding:35px 40px 25px;
  box-shadow:inset 0 1px 0 #fffdf8d9;
}
/* Light comes from the left, so the left page's gutter is lit almost to the fold while the right
   page's gutter turns away from it and falls into deeper shade. A soft crest marks where each page
   starts to curve down into the binding. */
.page-left {
  border-radius:12px 2px 2px 12px;
  background-image:
    linear-gradient(90deg,#ffffff2e,transparent 6%,transparent 74%,#fffdf72e 84%,#6a4e2c0f 90%,#4a35202e 96%,#33241466),
    var(--paper-fibre),
    linear-gradient(#7e705a1c 1px,transparent 1px),linear-gradient(90deg,#7e705a1c 1px,transparent 1px);
  background-size:100% 100%,360px 360px,18px 18px,18px 18px;
  box-shadow:inset 0 1px 0 #fffdf8d9,inset 1px 0 0 #fffdf899;
}
.page-right {
  border-radius:2px 14px 14px 2px;
  padding-left:38px;
  background-image:
    linear-gradient(90deg,#2c1e1178,#4a35203d 3.5%,#6a4e2c14 9%,#fffdf724 15%,transparent 24%,transparent 93%,#5a432612),
    var(--paper-fibre),
    linear-gradient(#7e705a1c 1px,transparent 1px),linear-gradient(90deg,#7e705a1c 1px,transparent 1px);
  background-size:100% 100%,360px 360px,18px 18px,18px 18px;
}
/* The page block: fine, slightly uneven sheet edges along the outer side and the foot of each page. */
.page:before,.page:after {
  content:'';
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.page-left:before {
  left:-6px;
  top:3px;
  bottom:-5px;
  width:6px;
  border-radius:5px 0 0 7px;
  background:
    linear-gradient(90deg,#6b543633,transparent 60%),
    repeating-linear-gradient(90deg,#efe7d5 0 .65px,#d6cab1 .65px 1.1px,#ebe2cf 1.1px 1.6px);
}
.page-right:before {
  right:-6px;
  top:3px;
  bottom:-5px;
  width:6px;
  border-radius:0 5px 7px 0;
  background:
    linear-gradient(270deg,#6b543640,transparent 60%),
    repeating-linear-gradient(90deg,#efe7d5 0 .65px,#d6cab1 .65px 1.1px,#ebe2cf 1.1px 1.6px);
}
.page:after {
  left:-2px;
  right:-2px;
  bottom:-5px;
  height:5px;
  background:
    linear-gradient(180deg,transparent 30%,#5c47302e),
    repeating-linear-gradient(180deg,#eee5d2 0 .65px,#d3c7ad .65px 1.1px,#e9e0cc 1.1px 1.6px);
}
.page-left:after {
  left:-5px;
  border-radius:0 0 0 7px;
}
.page-right:after {
  right:-5px;
  border-radius:0 0 7px 0;
}
.note-eyebrow {
  font-family:var(--mono);
  font-size:11.5px;
  color:#6c645a;
}
.page h1 {
  font-family:var(--hand);
  font-weight:500;
  font-size:96px;
  line-height:1.05;
  letter-spacing:-5px;
  margin-top:13px;
}
.title-dot {
  color:var(--red);
}
.red-underline {
  position:absolute;
  width:220px;
  height:5px;
  background:var(--red);
  top:157px;
  left:86px;
  transform:rotate(-5deg);
  border-radius:50%;
}
.note-role {
  font-family:var(--sans);
  font-size:16px;
  margin-top:22px;
  font-weight:500;
  letter-spacing:-.005em;
}
.page h2 {
  font-family:var(--sans);
  font-size:30px;
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.025em;
  margin-top:9px;
}
.note-description {
  font-family:var(--sans);
  font-size:13px;
  line-height:1.55;
  margin-top:19px;
  color:#4a4a42;
}
.primary {
  display:inline-flex;
  align-items:center;
  background:linear-gradient(180deg,#2d2e29,#20211d);
  color:#f8f4ea;
  padding:13px 20px;
  border-radius:4px;
  margin-top:20px;
  font-family:var(--sans);
  font-size:13.5px;
  box-shadow:inset 0 1px 0 #ffffff14,0 1px 1px rgba(var(--umber),.25),2px 5px 9px -3px rgba(var(--umber),.35);
  transition:background .2s,transform .2s;
  font-weight:500;
  letter-spacing:-.005em;
}
.primary:hover {
  background:var(--red);
  transform:translateY(-2px);
}
.note-link {
  display:block;
  font-family:var(--sans);
  font-size:12.5px;
  margin-top:16px;
  max-width:168px;
  border-bottom:1px solid #45453a;
  padding-bottom:5px;
  font-weight:500;
}
.note-link span {
  float:right;
}
.page-number {
  position:absolute;
  bottom:17px;
  left:40px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.01em;
  color:#8a7b61;
}
/* Burgundy cloth binding tape in the gutter. */
.notebook-spine {
  width:8px;
  position:absolute;
  left:50%;
  top:-6px;
  bottom:-10px;
  background:
    repeating-linear-gradient(0deg,#ffffff0d 0 1px,transparent 1px 3px),
    linear-gradient(90deg,#3a1513,#7d3330 35%,#8c3d39 50%,#6a2724 70%,#341210);
  border-radius:2px;
  z-index:4;
  box-shadow:-2px 0 3px #3d2b1626,3px 0 5px #3d2b1633;
  transform:translateX(-50%);
}
.ribbon {
  position:absolute;
  left:50%;
  top:90%;
  height:95px;
  width:11px;
  background:
    repeating-linear-gradient(90deg,#ffffff12 0 1px,transparent 1px 2px),
    linear-gradient(90deg,#5e2623,#8a3b37 45%,#6d2b28);
  z-index:5;
  transform:rotate(-7deg);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%);
}
.page-curl {
  position:absolute;
  bottom:0;
  right:0;
  width:35px;
  height:35px;
  background:linear-gradient(135deg,transparent 49%,#cfc3aa 51%,#efe6d4 62%,#fbf6ea 82%,#efe5d1);
  border-radius:0 0 0 5px;
  box-shadow:-3px -3px 6px -2px rgba(var(--umber),.18);
  opacity:0;
  transition:opacity .25s,width .35s,height .35s;
}
.notebook:hover .page-curl,.notebook:focus-visible .page-curl {
  opacity:1;
  width:65px;
  height:65px;
}
.sketch-caption {
  font-family:var(--hand);
  font-size:23px;
  display:block;
  text-align:center;
  transform:rotate(3deg);
}
.sketch-browser {
  position:relative;
  width:173px;
  height:112px;
  border:2px solid #4a4940;
  border-radius:6px;
  transform:rotate(3deg);
  margin:35px auto 0;
  box-shadow:2px 3px 0 #4a494044;
}
.sketch-browser-bar {
  height:19px;
  border-bottom:1px solid #4a4940;
  font-size:13px;
  line-height:15px;
  padding-left:7px;
}
.sketch-browser>span {
  display:block;
  width:75px;
  height:3px;
  margin:9px 0 0 13px;
  border-bottom:2px solid #494a40;
}
.sketch-landscape {
  position:absolute;
  bottom:15px;
  right:14px;
  width:70px;
  height:45px;
  border:1.5px solid #494a40;
  font-family:var(--hand);
  font-size:58px;
  line-height:35px;
  text-align:center;
}
.sketch-lines {
  width:57px;
  height:25px;
  margin:10px 13px;
  background:repeating-linear-gradient(0deg,transparent 0 7px,#45453b 8px 9px);
}
.sketch-arrow {
  display:block;
  text-align:center;
  font-family:var(--hand);
  font-size:35px;
  line-height:41px;
}
.sketch-code {
  margin:0 auto;
  width:158px;
  height:80px;
  border:2px solid #45453b;
  background:repeating-linear-gradient(40deg,#49473fdd 0 1px,#49473fbf 2px 3px);
  border-radius:4px;
  color:#f5edde;
  text-align:center;
  font:36px var(--mono);
  padding:4px;
  transform:rotate(-3deg);
}
.sketch-code small {
  display:block;
  font:7px var(--mono);
  margin-top:5px;
}
.sketch-phones {
  display:flex;
  justify-content:center;
  gap:15px;
  transform:rotate(4deg);
}
.sketch-phones>div {
  width:63px;
  height:110px;
  border:2px solid #494a40;
  outline:1px solid #494a40;
  outline-offset:3px;
  border-radius:10px;
  padding:14px 9px;
}
.sketch-phones span {
  display:block;
  width:100%;
  height:43px;
  border:1px solid #494a40;
  text-align:center;
  font:35px var(--hand);
}
.sketch-phones i {
  display:block;
  height:3px;
  background:#494a4066;
  margin-top:8px;
}
.sketch-word {
  position:absolute;
  font:23px var(--hand);
  transform:rotate(-8deg);
}
.word-design {
  top:168px;
  right:12px;
}
.word-code {
  top:238px;
  right:26px;
}
.word-launch {
  bottom:42px;
  right:38px;
}
.object {
  position:absolute;
  background:transparent;
  padding:0;
  width:300px;
  aspect-ratio:1;
  z-index:5;
  --rot:0deg;
  /* Elevation of the object above the desk, in px; drives shadow length and softness. */
  --e:4;
  --lift:0;
  transform:rotate(var(--rot));
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.object:hover,.object:focus-visible {
  --lift:1;
  transform:translateY(-7px) rotate(calc(var(--rot) + 2deg));
}
.sprite {
  display:block;
  position:absolute;
  inset:0;
  background:url('assets/desk-objects.png') no-repeat;
  background-size:300% 200%;
  pointer-events:none;
  filter:drop-shadow(2px 7px 4px #32281d15);
  transition:filter .4s cubic-bezier(.2,.8,.2,1);
}
.object:hover .sprite,.object:focus-visible .sprite {
  filter:drop-shadow(4px 16px 9px #32281d29);
}
/* Filters are applied before the object's rotation, so the light direction (.38, 1) is
   rotated back by --rot. Every object then casts its shadow the same way across the desk:
   a tight contact shadow plus a soft occlusion shadow whose length follows --e and lifts on hover. */
@supports (width:calc(1px * sin(1deg))) {
  .sprite,.object:hover .sprite,.object:focus-visible .sprite {
    --ux:calc(.38 * cos(var(--rot)) + sin(var(--rot)));
    --uy:calc(cos(var(--rot)) - .38 * sin(var(--rot)));
    filter:
      drop-shadow(calc(var(--ux) * (.6px + var(--lift) * 2px)) calc(var(--uy) * (.6px + var(--lift) * 2px)) calc(1px + var(--lift) * 2px) rgba(var(--umber),calc(.42 - var(--lift) * .18)))
      drop-shadow(calc(var(--ux) * (var(--e) + var(--lift) * 9) * 1px) calc(var(--uy) * (var(--e) + var(--lift) * 9) * 1px) calc((var(--e) * 1.7 + var(--lift) * 12) * 1px) rgba(var(--umber),.32));
  }
}
.sprite-lamp {
  background-position:0 0;
}
.sprite-keyboard {
  background-position:50% 0;
}
.sprite-phone {
  background-position:100% 0;
}
.sprite-pen {
  background-position:0 100%;
}
.sprite-cable {
  background-position:50% 100%;
}
.lamp {
  width:285px;
  left:31px;
  top:-10px;
  z-index:6;
  --rot:-8deg;
  /* The lamp stands upright, so its silhouette drop shadow stays short; the cast shadow below does the work. */
  --e:2.5;
  /* Contact occlusion where the weighted base meets the desk. */
  background:radial-gradient(ellipse 24% 4.6% at 52% 93.4%,rgba(var(--umber),.38),rgba(var(--umber),.14) 55%,transparent 100%) no-repeat;
}
/* Cast shadow: the lamp's own silhouette, folded down onto the desk at the base, sheared along the
   light direction and compressed into the desk plane. It softens and fades with distance from the base,
   as a real shadow does under a large window. */
.lamp:before {
  content:'';
  position:absolute;
  inset:0;
  background:rgb(var(--umber));
  -webkit-mask:url('assets/desk-objects.png') 0 0/300% 200% no-repeat,linear-gradient(to top,#000 3%,#0008 26%,#0002 62%,#0000 85%);
  -webkit-mask-composite:source-in;
  mask:url('assets/desk-objects.png') 0 0/300% 200% no-repeat,linear-gradient(to top,#000 3%,#0008 26%,#0002 62%,#0000 85%);
  mask-composite:intersect;
  transform-origin:51% 93.4%;
  transform:skewX(34deg) scaleY(-.34);
  filter:blur(5px);
  opacity:.22;
  z-index:-1;
  pointer-events:none;
}
/* Warm bloom around the bulb when the lamp is switched on. */
.lamp:after {
  content:'';
  position:absolute;
  left:37%;
  top:26%;
  width:34%;
  height:26%;
  border-radius:50%;
  background:radial-gradient(closest-side,#fff7e0e6,#ffd98a80 40%,#ffcf7a00);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .5s;
  pointer-events:none;
}
.desk.lit .lamp:after {
  opacity:1;
}
/* The pool of lamplight on the desk: brightens and warms what it falls on. */
.lamp-glow {
  position:absolute;
  left:20px;
  top:60px;
  width:620px;
  height:560px;
  background:
    radial-gradient(ellipse 30% 26% at 33% 44%,#ffe7b2d9,#ffe7b200),
    radial-gradient(ellipse 62% 54% at 40% 50%,#ffd8907a,#ffd89000 72%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .6s;
  /* Above the notebook so the light falls on its pages too. */
  z-index:5;
  pointer-events:none;
}
.desk.lit .lamp-glow {
  opacity:1;
}
.keyboard {
  width:405px;
  top:438px;
  left:2px;
  --rot:-19deg;
  --e:10;
  z-index:6;
}
.pen {
  width:330px;
  left:644px;
  top:536px;
  --rot:49deg;
  --e:4;
  z-index:6;
}
.cable {
  width:250px;
  left:319px;
  top:568px;
  --rot:26deg;
  --e:2;
  z-index:2;
}
.phone {
  width:330px;
  left:1095px;
  top:345px;
  --rot:-29deg;
  --e:4;
  z-index:7;
}
.object-label {
  position:absolute;
  bottom:13%;
  left:50%;
  transform:translate(-50%,12px) rotate(calc(-1 * var(--rot,0deg)));
  background:#23241fef;
  color:#f8f3ea;
  padding:9px 13px;
  white-space:nowrap;
  font:500 12.5px var(--sans);
  letter-spacing:-.005em;
  border-radius:6px;
  box-shadow:inset 0 1px 0 #ffffff12,0 1px 2px rgba(var(--umber),.25),0 8px 18px -6px rgba(var(--umber),.4);
  opacity:0;
  transition:opacity .2s,transform .2s;
  pointer-events:none;
  z-index:9;
}
.object:hover .object-label,.object:focus-visible .object-label,.record:hover .object-label,.record:focus-visible .object-label {
  opacity:1;
  transform:translate(-50%,0) rotate(calc(-1 * var(--rot,0deg)));
}
.phone-notification {
  position:absolute;
  top:24%;
  left:26%;
  width:53%;
  padding:11px;
  background:#fbf9f2e6;
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  backdrop-filter:blur(6px) saturate(1.2);
  border:1px solid #ffffffb3;
  border-radius:11px;
  font-size:10px;
  line-height:1.35;
  text-align:left;
  transform:rotate(25deg) translateY(-10px);
  opacity:0;
  transition:opacity .25s,transform .25s;
  box-shadow:0 1px 1px #0000000f,0 6px 14px -4px #00000033;
}
.phone-notification span {
  display:block;
  font:7px var(--mono);
  color:var(--red);
  margin-bottom:5px;
}
.phone:hover .phone-notification,.phone:focus-visible .phone-notification,.phone.ringing .phone-notification {
  opacity:1;
  transform:rotate(25deg) translateY(0);
}
/* The phone's inner layer lifts on hover and buzzes while it rings. The button itself (the hit area) never
   moves, so the pointer cannot slip off the phone and re-enter it. The earlier version swapped the button's own
   `animation` for a vibration and, when the class was removed 1.2 s later, the entrance fade-in restarted
   (opacity 0 for its 0.45 s delay), so the phone vanished and faded back in. */
.phone-body {
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  transition:translate .4s cubic-bezier(.2,.8,.2,1),rotate .4s cubic-bezier(.2,.8,.2,1);
}
.phone:hover,.phone:focus-visible {
  transform:rotate(var(--rot));
}
.phone.ringing {
  --lift:1;
}
.phone:hover .phone-body,.phone:focus-visible .phone-body,.phone.ringing .phone-body {
  translate:0 -7px;
  rotate:2deg;
}
.phone.ringing .phone-body {
  animation:phone-buzz 1.5s linear infinite;
}
.battery-pop {
  position:absolute;
  top:45%;
  left:32%;
  background:#dce3cceb;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid #ffffff8c;
  box-shadow:0 6px 14px -4px #0000002e;
  padding:9px 14px;
  border-radius:10px;
  font:13px var(--mono);
  opacity:0;
  transform:rotate(25deg);
  transition:opacity .2s;
}
.phone.charging .battery-pop {
  opacity:1;
}
.pen-stroke {
  position:absolute;
  left:-38px;
  bottom:29%;
  height:3px;
  width:65px;
  /* Ink: denser where the nib starts, thinning out at the end of the stroke. */
  background:linear-gradient(90deg,#7f333000,#6f2a27b3 25%,#5e2220 85%,#4f1b19);
  border-radius:50%;
  transform:rotate(-49deg) scaleX(0);
  transform-origin:right;
  transition:transform .5s;
}
.pen:hover .pen-stroke,.pen:focus-visible .pen-stroke {
  transform:rotate(-49deg) scaleX(1);
}
.key-flash {
  position:absolute;
  left:28%;
  top:38%;
  width:12px;
  height:12px;
  background:#fffbd299;
  filter:blur(3px);
  opacity:0;
}
.keyboard:hover .key-flash,.keyboard:focus-visible .key-flash {
  animation:key-flash .8s infinite;
}
.editor {
  position:absolute;
  top:20px;
  left:1015px;
  width:340px;
  height:224px;
  /* A tablet lying on the desk: machined aluminium edge, black bezel, a screen under glass with a
     broad, soft window reflection, and the device's thickness showing on the side away from the light. */
  background:
    linear-gradient(122deg,#ffffff14 0%,#ffffff08 22%,#ffffff00 48%),
    radial-gradient(ellipse 90% 70% at 30% 0%,#2e312a,#1f211c 72%);
  border:1px solid #4a4c45;
  border-radius:12px;
  color:#e7e3d8;
  padding:0;
  text-align:left;
  transform:rotate(6deg);
  z-index:4;
  --device-edge:inset 0 1px 0 #ffffff2e,inset 1px 0 0 #ffffff14,inset 0 0 0 4px #121310,inset 0 0 0 5px #ffffff0a,0 1px 0 #5c5e57,0 2.5px 0 #1a1b18;
  box-shadow:
    var(--device-edge),
    0 3px 2px rgba(var(--umber),.34),
    3px 9px 10px -3px rgba(var(--umber),.3),
    16px 34px 46px -14px rgba(var(--umber),.36);
  transition:transform .35s,box-shadow .35s,translate .25s ease-out;
}
.editor:hover,.editor:focus-visible {
  transform:rotate(3deg) translateY(-5px);
  box-shadow:
    var(--device-edge),
    0 4px 4px rgba(var(--umber),.24),
    6px 15px 18px -4px rgba(var(--umber),.28),
    22px 46px 60px -16px rgba(var(--umber),.34);
}
.editor-top {
  height:36px;
  border-bottom:1px solid #ffffff0d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  font:9px var(--mono);
  color:#c8c7bf;
}
.traffic {
  display:flex;
  gap:5px;
}
.traffic i {
  height:7px;
  width:7px;
  border-radius:50%;
  background:#c87a65;
}
.traffic i:nth-child(2) {
  background:#d6b765;
}
.traffic i:nth-child(3) {
  background:#91a879;
}
.code {
  display:block;
  padding:14px 16px;
  text-shadow:0 0 6px #ffffff14;
  font:10px/1.75 var(--mono);
  white-space:pre;
}
.code>span {
  display:block;
}
.code em {
  font-style:normal;
  color:#6e7268;
  margin-right:15px;
}
.code b {
  font-weight:400;
  color:#b991b8;
}
.code strong {
  font-weight:400;
  color:#ccad83;
}
.code mark {
  background:none;
  color:#bdd4a1;
}
.code-caret {
  display:inline-block;
  height:11px;
  width:5px;
  background:#c3d7a8;
  margin-left:3px;
  vertical-align:middle;
  animation:blink 1s steps(1) infinite;
}
.build-status {
  display:block;
  font:8px var(--mono);
  color:#a9ba92;
  padding:2px 16px;
  transition:color .3s;
}
.editor.built .build-status {
  color:#d8e9ba;
}
.sticky {
  position:absolute;
  top:267px;
  left:1050px;
  width:126px;
  height:143px;
  padding:13px 16px;
  /* Adhesive band at the top lies flat; the free lower edge lifts and catches the light. */
  background:
    linear-gradient(180deg,#00000008,transparent 18%),
    linear-gradient(160deg,transparent 70%,#fffbe080 92%,#fff8d6b3),
    var(--grain),
    linear-gradient(125deg,#f4eab9,#ebdfa3);
  background-size:auto,auto,180px 180px,auto;
  color:#2b2a24;
  font:27px/1.17 var(--hand);
  transform:rotate(-9deg);
  border-radius:1px 1px 3px 2px;
  box-shadow:
    0 .5px .5px rgba(var(--umber),.2),
    2px 4px 4px -2px rgba(var(--umber),.2),
    6px 13px 12px -7px rgba(var(--umber),.38);
  z-index:4;
  transition:translate .25s ease-out;
}
.sticky span:not(.sticky-star) {
  padding-left:7px;
}
.sticky-star {
  position:absolute;
  bottom:3px;
  right:8px;
  font-size:35px;
}
.record-wrap {
  position:absolute;
  top:269px;
  left:1220px;
  z-index:8;
  transform:rotate(8deg);
}
.record {
  width:134px;
  height:139px;
  position:relative;
  background:none;
  padding:0;
  transition:transform .3s;
}
.record:hover,.record:focus-visible {
  transform:translateY(-5px) rotate(-3deg);
}
/* Photographic turntable, built from the unused cell of the object atlas (assets/turntable.png):
   1. the turntable with its arm removed (grooves under the arm rebuilt from the record's own rings),
   2. the tonearm on its own, 3. the counterweight, which sits above the arm and never moves.
   All three share one frame, so they line up pixel-for-pixel. Geometry, in % of that frame, was
   measured from the photo: record plane tilted -5.81deg and foreshortened to .9344; spindle at
   47.61% 44.95%; tonearm pivot at 80.5% 18.93%. */
.turntable {
  --plane-tilt:-5.81deg;
  --plane-squash:.9344;
  position:absolute;
  left:-3.15%;
  top:1.9%;
  width:106.3%;
  height:95.5%;
  background:url('assets/turntable.png') 0 0/100% 300% no-repeat;
  filter:drop-shadow(.5px 1px .8px rgba(var(--umber),.4)) drop-shadow(4px 9px 9px rgba(var(--umber),.26));
}
.turntable:after {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/turntable.png') 0 100%/100% 300% no-repeat;
  pointer-events:none;
  z-index:3;
}
/* The record label's print. It turns in the record's own tilted plane (rotate and scale are applied
   outside the spinning transform), while the photographed reflections on the vinyl stay still. */
.vinyl {
  position:absolute;
  left:calc(47.61% - 13.56%);
  top:calc(44.95% - 14.55%);
  width:27.12%;
  height:29.1%;
  border-radius:50%;
  rotate:var(--plane-tilt);
  scale:1 var(--plane-squash);
  animation:record-spin 3.4s linear infinite;
  animation-play-state:paused;
  z-index:1;
}
.vinyl-label {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:21% 0 22%;
  color:#e2c79acc;
  font:500 8px/1 var(--serif);
  font-style:normal;
  letter-spacing:.4px;
  text-shadow:0 0 .5px #00000066;
}
.vinyl-label span {
  font:4px/1 var(--mono);
  letter-spacing:.6px;
  opacity:.85;
}
/* The tonearm swings within the record's plane: tilt into the plane, rotate, tilt back. */
.tonearm {
  position:absolute;
  inset:0;
  background:url('assets/turntable.png') 0 50%/100% 300% no-repeat;
  transform-origin:80.5% 18.93%;
  transform:rotate(var(--plane-tilt)) scale(1,var(--plane-squash)) rotate(-30deg) scale(1,calc(1 / var(--plane-squash))) rotate(calc(-1 * var(--plane-tilt)));
  filter:drop-shadow(1px 1.5px .8px rgba(20,14,8,.32));
  transition:transform .6s;
  z-index:2;
  pointer-events:none;
}
/* Play state is engraved on the brass speed knob; the light sits in the photographed indicator. */
.record-play {
  position:absolute;
  left:8.5%;
  top:13.6%;
  width:10.2%;
  height:11%;
  display:grid;
  place-items:center;
  color:#5b4422d9;
  font-size:6px;
  line-height:1;
  text-shadow:0 .5px 0 #ffffff59;
  z-index:4;
}
.record-light {
  position:absolute;
  left:calc(86.8% - 1.5px);
  top:calc(68.3% - 1.5px);
  width:3px;
  height:3px;
  border-radius:50%;
  background:transparent;
  transition:background .3s,box-shadow .3s;
  z-index:4;
}
.record.is-playing .vinyl {
  animation-play-state:running;
}
.record.is-playing .tonearm {
  transform:rotate(var(--plane-tilt)) scale(1,var(--plane-squash)) rotate(0deg) scale(1,calc(1 / var(--plane-squash))) rotate(calc(-1 * var(--plane-tilt)));
}
.record.is-playing .record-light {
  background:#b4d27a;
  box-shadow:0 0 3px 1px #b4d27a99;
}
.record .object-label {
  bottom:-35px;
  font-size:8px;
  --rot:8deg;
}
.web-preview {
  position:absolute;
  top:500px;
  left:872px;
  width:280px;
  height:243px;
  /* Heavy uncoated card stock with a satin sheen from the window light. */
  background:
    linear-gradient(125deg,#ffffff8c,transparent 40%),
    var(--grain),
    #f8f4eb;
  background-size:auto,200px 200px,auto;
  border:1px solid #ece4d5;
  border-radius:7px;
  padding:10px;
  transform:rotate(-10deg);
  z-index:8;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #dcd2c0,
    0 1.5px 1px rgba(var(--umber),.18),
    3px 7px 8px -3px rgba(var(--umber),.2),
    12px 24px 30px -12px rgba(var(--umber),.3);
  transition:transform .4s,translate .25s ease-out;
  cursor:default;
}
.web-preview:hover,.web-preview:focus-visible {
  transform:rotate(-6deg) translateY(-5px);
}
.web-bar {
  height:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:6px var(--mono);
  color:#77766f;
}
.web-bar .traffic i {
  height:6px;
  width:6px;
}
.web-inside {
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  gap:9px;
  padding:5px;
}
.web-inside>div:first-child {
  width:45%;
}
.web-inside small {
  font:5px var(--mono);
  color:#777;
}
.web-inside p {
  font:26px/.95 var(--serif);
  margin:14px 0 20px;
}
.web-inside>div>span {
  font:7px var(--mono);
}
.blue-architecture {
  width:50%;
  height:162px;
  background:#7ca3d4;
  position:relative;
  overflow:hidden;
}
.blue-architecture span {
  position:absolute;
  display:block;
  background:#2d62a3;
  border-radius:50% 50% 0 0;
  width:130px;
  height:190px;
  left:20px;
  top:29px;
  transform:rotate(-32deg);
  box-shadow:inset -15px -8px 20px #10355944;
}
.blue-architecture span:nth-child(2) {
  left:-45px;
  top:77px;
  background:#4b7fb9;
  transform:rotate(9deg);
}
.blue-architecture span:nth-child(3) {
  left:75px;
  top:110px;
  background:#a6bed8;
  transform:rotate(-15deg);
}
.desk-signature {
  position:absolute;
  left:1210px;
  bottom:75px;
  font:24px/1 var(--hand);
  transform:rotate(10deg);
  color:#777364;
}
.desk-signature span {
  font-size:38px;
  position:absolute;
  right:2px;
  top:-43px;
}
.desk-toolbar {
  width:min(1280px,calc(100% - 80px));
  margin:-17px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 22px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:9;
}
.explore-hint {
  font:13px var(--sans);
  color:#74756b;
}
.explore-hint>span {
  font-size:20px;
  color:var(--red);
  vertical-align:middle;
  margin-right:8px;
}
.scroll-link {
  font-size:24px;
  margin-right:6px;
  transition:transform .3s;
}
.scroll-link:hover {
  transform:translateY(5px);
}
.section {
  width:min(1200px,calc(100% - 100px));
  margin:auto;
}
.services {
  padding:78px 0 85px;
}
.section-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:23px;
}
.eyebrow {
  font:500 13px var(--sans);
  letter-spacing:0;
  color:var(--muted);
}
.tiny-note {
  font:24px var(--hand);
  color:var(--muted);
  transform:rotate(-3deg);
}
.section h2 {
  font:600 52px/1.04 var(--sans);
  letter-spacing:-.032em;
}
.burgundy {
  color:var(--red);
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:30px;
}
.service-grid>article {
  display:flex;
  align-items:center;
  gap:22px;
  padding:28px 22px;
  border:1px solid #e3dccf;
  border-radius:8px;
  background:var(--grain),linear-gradient(160deg,#fefcf7,#f9f5ec);
  background-size:220px 220px,auto;
  box-shadow:inset 0 1px 0 #fffdf8,var(--shadow-paper);
  position:relative;
}
.service-grid h3 {
  font:600 21px/1.2 var(--sans);
  letter-spacing:-.015em;
  margin-bottom:10px;
}
.service-grid p {
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
}
.service-grid div>span {
  font:13px var(--sans);
  letter-spacing:0;
  display:block;
  margin-top:16px;
  color:#85857a;
}
.service-art {
  flex:0 0 65px;
  height:80px;
  position:relative;
}
.art-web {
  width:65px;
  height:65px;
  transform:rotate(-8deg);
  background:var(--grain),#f1e9d8;
  background-size:120px 120px,auto;
  border:1px solid #d3c8b2;
  box-shadow:0 .5px .5px rgba(var(--umber),.2),2px 5px 7px -2px rgba(var(--umber),.24);
}
.art-web i {
  display:block;
  margin:9px 7px;
  height:4px;
  background:#b8ad98;
  width:35px;
}
.art-web i:nth-child(2) {
  height:28px;
  background:#5580a5;
  width:42px;
}
.art-web i:nth-child(3) {
  height:3px;
  width:42px;
}
.art-code {
  font:27px var(--mono);
  display:grid;
  place-items:center;
  background:#292c27;
  color:#c8d6b1;
  width:67px;
  height:65px;
  transform:rotate(8deg);
  border-radius:6px;
  background:linear-gradient(118deg,#ffffff12,transparent 40%),#292c27;
  box-shadow:inset 0 1px 0 #ffffff1a,0 1px 1px rgba(var(--umber),.3),3px 7px 9px -3px rgba(var(--umber),.35);
}
.art-mobile {
  display:flex;
  gap:7px;
  align-items:center;
  transform:rotate(-8deg);
}
.art-mobile i {
  width:28px;
  height:56px;
  border:2px solid #4d5042;
  border-radius:5px;
  font:21px var(--serif);
  display:grid;
  place-items:center;
  background:#e0e5d2;
  box-shadow:0 .5px .5px rgba(var(--umber),.2),2px 5px 6px -2px rgba(var(--umber),.24);
}
.art-mobile i:nth-child(2) {
  transform:translateY(9px);
  background:#e9e1cf;
}
.work-section {
  padding:15px 0 80px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:35px;
}
.work-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.work-card {
  background:none;
  padding:0;
  text-align:left;
  display:block;
}
.work-visual {
  height:310px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid #ded9ce;
  box-shadow:inset 0 1px 0 #ffffff59,inset 0 -40px 60px -40px rgba(var(--umber),.08);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.work-card:hover .work-visual {
  transform:translateY(-5px);
}
.visual-web {
  background:radial-gradient(ellipse at 20% 10%,#ece5d6,#e1d8c6 70%);
}
.demo-browser {
  width:82%;
  height:180px;
  background:#f7f5ec;
  transform:rotate(-8deg);
  border-radius:5px;
  box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(var(--umber),.16),3px 8px 10px -3px rgba(var(--umber),.18),12px 26px 34px -12px rgba(var(--umber),.26);
  overflow:hidden;
  transition:transform .5s;
}
.work-card:hover .demo-browser {
  transform:rotate(-3deg) scale(1.03);
}
.demo-browser-nav {
  display:block;
  padding:9px;
  color:#9b9c88;
  font:7px var(--mono);
  border-bottom:1px solid #ddd8cb;
}
.demo-browser-nav i {
  float:right;
  font-style:normal;
  font-size:6px;
}
.demo-browser-content {
  display:block;
  position:relative;
  padding:29px 16px;
}
.demo-browser-content b {
  font:28px/1.05 var(--serif);
  position:relative;
  z-index:1;
}
.demo-orbit {
  width:115px;
  height:115px;
  border-radius:50%;
  background:#7e302e;
  position:absolute;
  right:-9px;
  top:7px;
  background:radial-gradient(circle at 34% 30%,#9a4441,#7e302e 55%,#6a2523);
  box-shadow:inset -19px -16px 20px #380c162e;
  transition:transform .6s;
}
.work-card:hover .demo-orbit {
  transform:translateX(-12px);
}
.visual-mobile {
  background:radial-gradient(ellipse at 20% 10%,#e4e9dc,#d6ddcc 70%);
}
.demo-mobile {
  width:140px;
  height:260px;
  background:#f9f6ed;
  border:6px solid #2c3029;
  outline:1px solid #acaea2;
  border-radius:23px;
  transform:rotate(10deg);
  padding:30px 11px 12px;
  box-shadow:inset 0 0 0 1px #ffffff1f,0 1px 1px rgba(var(--umber),.24),3px 8px 10px -3px rgba(var(--umber),.2),12px 26px 34px -12px rgba(var(--umber),.3);
  position:relative;
  transition:transform .5s;
}
.work-card:hover .demo-mobile {
  transform:rotate(3deg) translateY(-6px);
}
.demo-notch {
  position:absolute;
  top:7px;
  left:42px;
  width:46px;
  height:10px;
  background:#2c3029;
  border-radius:10px;
}
.demo-mobile small {
  font:6px var(--mono);
  color:#77836a;
}
.demo-mobile>b {
  display:block;
  font:27px/1 var(--serif);
  margin-top:9px;
}
.mobile-leaf {
  display:block;
  font:64px var(--serif);
  color:#788966;
  margin:2px auto;
  text-align:center;
}
.mobile-task {
  display:block;
  padding:7px 4px;
  border-top:1px solid #dbdfce;
  font:6px var(--mono);
}
.mobile-sticker {
  position:absolute;
  left:23px;
  bottom:30px;
  font:27px/.95 var(--hand);
  transform:rotate(-13deg);
  color:#747f63;
}
.visual-motion {
  background:radial-gradient(ellipse at 20% 10%,#e9e4ed,#ddd6e3 70%);
}
.motion-window {
  width:190px;
  height:228px;
  background:#393542;
  color:#f5f0e5;
  padding:24px;
  transform:rotate(-5deg);
  border-radius:8px;
  background:linear-gradient(118deg,#ffffff0d,transparent 40%),#393542;
  box-shadow:inset 0 1px 0 #ffffff1a,0 1px 1px rgba(var(--umber),.24),3px 8px 10px -3px rgba(var(--umber),.22),12px 26px 34px -12px rgba(var(--umber),.32);
  z-index:1;
}
.motion-window i {
  font:7px var(--mono);
  font-style:normal;
  color:#c4b7ca;
}
.motion-window b {
  display:block;
  font:40px/.96 var(--serif);
  margin-top:18px;
}
.motion-window>span {
  font:30px var(--serif);
  display:block;
  text-align:right;
  margin-top:11px;
}
.motion-ball {
  width:88px;
  height:88px;
  border-radius:50%;
  background:#aba0b8;
  position:absolute;
  left:20px;
  top:37px;
  background:radial-gradient(circle at 34% 30%,#c3b9cf,#aba0b8 55%,#968aa5);
  box-shadow:inset -15px -20px 25px #54426222,4px 10px 14px -4px rgba(var(--umber),.22);
  transition:transform .6s;
}
.work-card:hover .motion-ball {
  transform:translate(10px,-12px);
}
.work-meta {
  display:flex;
  justify-content:space-between;
  font:500 13px var(--sans);
  letter-spacing:0;
  color:var(--muted);
  margin:20px 0 10px;
}
.work-title {
  font:600 24px/1.15 var(--sans);
  letter-spacing:-.02em;
  display:block;
}
.work-desc {
  font-size:15px;
  color:var(--muted);
  display:block;
  margin-top:8px;
  line-height:1.5;
}
.about {
  padding:60px 0 95px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}
.about-note {
  background-color:#f4eee1;
  padding:35px 40px 40px;
  transform:rotate(-4deg);
  box-shadow:inset 0 1px 0 #fffaf0,var(--shadow-raised);
  position:relative;
  background-image:linear-gradient(125deg,#ffffff59,transparent 45%),var(--grain),linear-gradient(#ada48d2e 1px,transparent 1px);
  background-size:auto,220px 220px,100% 29px;
}
/* Translucent masking tape with torn ends. */
.about-note:before {
  content:'';
  position:absolute;
  width:96px;
  height:30px;
  background:linear-gradient(180deg,#f3ead0d9,#e6dabbcc);
  top:-14px;
  left:40%;
  transform:rotate(5deg);
  box-shadow:0 1px 2px rgba(var(--umber),.14);
  clip-path:polygon(2% 0,98% 4%,100% 22%,97% 41%,100% 63%,98% 100%,3% 96%,0 78%,3% 55%,0 33%);
}
.about-note h2 {
  font-size:64px;
  font-weight:600;
  line-height:.98;
  margin:28px 0 30px;
  letter-spacing:-.04em;
}
.about-note h2 i {
  color:inherit;
  font-style:normal;
}
.about-code {
  font:12.5px var(--mono);
  color:#74715f;
}
.about-copy .about-lead {
  font:400 30px/1.22 var(--serif);
  margin-bottom:26px;
  letter-spacing:-.012em;
}
.about-lead span {
  color:inherit;
}
.about-copy>p:not(.about-lead) {
  font-size:16px;
  line-height:1.65;
  color:#66675f;
  margin-bottom:16px;
  max-width:460px;
}
.about-copy>a {
  display:inline-block;
  font:500 15px var(--sans);
  margin-top:10px;
  border-bottom:1px solid #999b8a;
  padding-bottom:5px;
}
.contact {
  padding:70px 0 80px;
  border-top:1px solid var(--line);
  position:relative;
}
.contact h2 {
  font-size:96px;
  font-weight:600;
  line-height:.96;
  letter-spacing:-.045em;
  margin:24px 0 33px;
  position:relative;
  max-width:750px;
}
.contact h2 i {
  font-style:normal;
}
.email {
  font-size:28px;
  letter-spacing:-.02em;
  border-bottom:1px solid #bab9a7;
  padding-bottom:8px;
  transition:border-color .3s,color .3s;
  font-weight:500;
}
.email:hover {
  color:var(--red);
  border-color:currentColor;
}
.contact>p {
  font:16px/1.55 var(--sans);
  color:var(--muted);
  margin-top:25px;
}
footer.section {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:24px 0 32px;
  font:13px var(--sans);
  color:var(--muted);
}
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,20px);
  z-index:60;
  background:#292d26;
  color:#f6f1e4;
  padding:12px 20px;
  border-radius:5px;
  max-width:calc(100% - 40px);
  font:13.5px/1.5 var(--sans);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0);
}
dialog {
  width:min(760px,calc(100% - 28px));
  border:1px solid #cdc5b6;
  border-radius:12px;
  background:var(--grain),#f8f4eb;
  background-size:220px 220px,auto;
  padding:24px;
  color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px #0000001f,0 30px 80px -10px #00000066;
}
dialog::backdrop {
  background:#24261fe0;
  backdrop-filter:blur(6px);
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:15px;
  font:600 15px var(--sans);
  letter-spacing:-.01em;
}
.dialog-top button {
  font-size:18px;
  background:none;
  padding:6px;
}
.demo-footnote {
  font:12.5px/1.5 var(--sans);
  color:var(--muted);
  margin-top:20px;
  text-align:center;
}
.interactive-web {
  padding:35px;
  border:1px solid var(--line);
  margin-top:20px;
  min-height:330px;
  background:#ece6d8;
  position:relative;
  overflow:hidden;
}
.interactive-web.dark {
  background:#2e3029;
  color:#f3edde;
}
.interactive-web h3 {
  font:300 62px/.97 var(--serif);
  letter-spacing:-2px;
  position:relative;
  z-index:1;
  margin:25px 0;
}
.interactive-web>p {
  font:14px/1.55 var(--sans);
  position:relative;
  z-index:1;
  max-width:270px;
}
.demo-theme {
  float:right;
  border-radius:30px;
  border:1px solid currentColor;
  padding:8px 13px;
  font:500 13px var(--sans);
  background:transparent;
}
.demo-shape {
  position:absolute;
  width:220px;
  height:220px;
  background:var(--red);
  border-radius:50%;
  right:-20px;
  top:85px;
  transition:background .4s,transform .4s;
}
.dark .demo-shape {
  background:#dbe1cb;
  transform:translateX(-30px);
}
.interactive-mobile {
  padding:25px;
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:center;
}
.live-phone {
  width:225px;
  min-height:355px;
  border:8px solid #282c24;
  border-radius:28px;
  background:#e2e8d6;
  padding:30px 17px 20px;
  box-shadow:7px 8px 14px #1e29191c;
}
.live-phone>small {
  font:500 11.5px var(--sans);
}
.live-phone>h3 {
  font:35px/1.05 var(--serif);
  margin:13px 0 23px;
}
.task-button {
  width:100%;
  text-align:left;
  display:block;
  background:#f7f5ed;
  border-radius:7px;
  font-size:13px;
  margin-top:10px;
  padding:13px;
}
.task-button.done {
  text-decoration:line-through;
  background:#c8d3b5;
}
.mobile-progress {
  display:block;
  font:500 13px var(--sans);
  margin-top:20px;
  font-variant-numeric:tabular-nums;
}
.demo-side-copy {
  font:15px/1.55 var(--sans);
  max-width:230px;
  color:var(--muted);
}
.interactive-motion {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  padding:35px 0;
}
.motion-sample {
  height:170px;
  background:#e6dfcf;
  border-radius:9px;
  font:500 15px var(--sans);
  display:grid;
  place-items:center;
  transition:transform .4s,box-shadow .4s,background .4s;
}
.motion-sample:nth-child(2) {
  background:#dce3cf;
}
.motion-sample:nth-child(3) {
  background:#e0d8e5;
}
.motion-sample:hover,.motion-sample.active {
  transform:translateY(-12px) rotate(-4deg);
  box-shadow:6px 12px 14px #32271122;
}
.motion-sample:nth-child(2):hover,.motion-sample:nth-child(2).active {
  transform:scale(1.07);
}
.motion-sample:nth-child(3):hover,.motion-sample:nth-child(3).active {
  border-radius:50%;
  background:#b3a4c3;
  transform:rotate(8deg);
}
@keyframes phone-buzz {
  0% {
    transform:translate(0,0) rotate(0deg);
  }
  2.67% {
    transform:translate(0.32px,0.02px) rotate(0.08deg);
  }
  5.33% {
    transform:translate(-0.64px,0.00px) rotate(-0.15deg);
  }
  8.00% {
    transform:translate(0.85px,0.01px) rotate(0.22deg);
  }
  10.67% {
    transform:translate(-1.45px,-0.45px) rotate(-0.25deg);
  }
  13.33% {
    transform:translate(1.09px,0.34px) rotate(0.31deg);
  }
  16.00% {
    transform:translate(-1.06px,0.53px) rotate(-0.35deg);
  }
  18.67% {
    transform:translate(1.38px,0.13px) rotate(0.23deg);
  }
  21.33% {
    transform:translate(-1.05px,0.03px) rotate(-0.22deg);
  }
  24.00% {
    transform:translate(1.14px,-0.28px) rotate(0.21deg);
  }
  26.67% {
    transform:translate(-1.28px,-0.07px) rotate(-0.33deg);
  }
  29.33% {
    transform:translate(1.31px,0.15px) rotate(0.28deg);
  }
  32.00% {
    transform:translate(-1.38px,-0.05px) rotate(-0.25deg);
  }
  34.67% {
    transform:translate(1.56px,0.55px) rotate(0.33deg);
  }
  37.33% {
    transform:translate(-1.41px,-0.20px) rotate(-0.24deg);
  }
  40.00% {
    transform:translate(1.19px,-0.47px) rotate(0.32deg);
  }
  42.67% {
    transform:translate(-1.25px,0.38px) rotate(-0.26deg);
  }
  45.33% {
    transform:translate(1.54px,0.38px) rotate(0.21deg);
  }
  48.00% {
    transform:translate(-1.15px,0.45px) rotate(-0.28deg);
  }
  50.67% {
    transform:translate(1.55px,-0.11px) rotate(0.22deg);
  }
  53.33% {
    transform:translate(-1.37px,0.31px) rotate(-0.25deg);
  }
  56.00% {
    transform:translate(1.09px,-0.18px) rotate(0.34deg);
  }
  58.67% {
    transform:translate(-1.43px,-0.42px) rotate(-0.24deg);
  }
  61.33% {
    transform:translate(1.09px,-0.48px) rotate(0.32deg);
  }
  64.00% {
    transform:translate(-0.85px,0.05px) rotate(-0.20deg);
  }
  66.67% {
    transform:translate(0.57px,0.13px) rotate(0.11deg);
  }
  69.33% {
    transform:translate(-0.34px,-0.11px) rotate(-0.07deg);
  }
  72.00%,100% {
    transform:translate(0,0) rotate(0deg);
  }
}
@keyframes record-spin {
  to {
    transform:rotate(360deg);
  }
}
@keyframes slow-spin {
  to {
    transform:rotate(360deg);
  }
}
@keyframes blink {
  50% {
    opacity:0;
  }
}
@keyframes key-flash {
  0%,100% {
    opacity:0;
    transform:translateX(0);
  }
  30% {
    opacity:1;
  }
  60% {
    opacity:.5;
    transform:translateX(50px);
  }
}
@keyframes enter {
  from {
    opacity:0;
    translate:0 14px;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}
/* `backwards` (not `both`): once the entrance ends it must release `translate`,
   which app.js drives for the cursor-following depth effect. */
.notebook,.object,.editor,.sticky,.record-wrap,.web-preview {
  animation:enter .8s cubic-bezier(.2,.7,.2,1) backwards;
}
.notebook {
  animation-delay:.1s;
}
.lamp,.editor {
  animation-delay:.2s;
}
.keyboard,.record-wrap {
  animation-delay:.35s;
}
.phone,.pen,.cable,.sticky,.web-preview {
  animation-delay:.45s;
}
.keyboard {
  top:526px;
  left:-28px;
  width:355px;
}
.pen {
  top:586px;
  left:632px;
  width:300px;
}
/* The desk is composed at 1440px and scaled as one piece, in steps that keep the
   whole scene (lamp to turntable) inside the viewport instead of cropping its edges. */
@media(min-width:701px) and (max-width:1439px) {
  .desk {
    --s:.88;
    transform:scale(var(--s));
    transform-origin:top center;
    margin-bottom:calc(830px * (var(--s) - 1));
  }
  /* Keep hover captions readable when the scene is scaled down. */
  .desk .object-label,.desk .record .object-label {
    font-size:calc(12px / var(--s));
    padding:calc(8px / var(--s)) calc(12px / var(--s));
    border-radius:calc(6px / var(--s));
  }
  .desk-toolbar {
    margin-top:0;
  }
}
@media(min-width:701px) and (max-width:1279px) {
  .desk {
    --s:.8;
  }
}
@media(min-width:701px) and (max-width:1139px) {
  .desk {
    --s:.7;
  }
}
@media(min-width:701px) and (max-width:999px) {
  .desk {
    --s:.62;
  }
}
@media(min-width:701px) and (max-width:869px) {
  .desk {
    --s:.56;
  }
}
@media(min-width:701px) and (max-width:799px) {
  .desk {
    --s:.5;
  }
}
@media(min-width:701px) and (max-width:999px) {
  .nav {
    width:calc(100% - 45px);
  }
  .nav nav {
    gap:20px;
  }
  .desk-toolbar {
    margin-top:0;
    width:calc(100% - 50px);
  }
  .section {
    width:calc(100% - 55px);
  }
  .service-grid {
    gap:10px;
  }
  .service-grid>article {
    padding:18px 13px;
    display:block;
  }
  .service-art {
    display:block;
    margin-bottom:22px;
  }
  /* The two phone icons stay side by side instead of stacking over the title. */
  .service-art.art-mobile {
    display:flex;
  }
  .service-grid h3 {
    font-size:19px;
  }
  .work-grid {
    gap:15px;
  }
  .work-visual {
    height:240px;
  }
  .demo-browser-content b {
    font-size:22px;
  }
  .demo-orbit {
    width:80px;
    height:80px;
  }
  .demo-mobile {
    scale:.8;
  }
  .motion-window {
    scale:.8;
  }
  .work-meta {
    font-size:12px;
  }
  .work-title {
    font-size:21px;
  }
  .about {
    gap:40px;
  }
  .about-note {
    padding:30px;
  }
  .about-note h2 {
    font-size:50px;
  }
  .about-copy .about-lead {
    font-size:24px;
  }
  .contact h2 {
    font-size:76px;
  }
}
@media(max-width:700px) {
  html {
    scroll-padding-top:25px;
  }
  .nav {
    width:calc(100% - 34px);
    height:auto;
    flex-wrap:wrap;
    padding:14px 0 0;
    row-gap:4px;
  }
  .nav nav {
    display:flex;
    order:3;
    width:100%;
    gap:22px;
    font-size:14.5px;
    padding:6px 0 10px;
  }
  .nav-contact {
    font-size:13.5px;
    padding:10px 15px;
  }
  .desk {
    width:100%;
    left:0;
    margin-left:0;
    height:1020px;
  }
  .notebook {
    left:7%;
    top:159px;
    width:86%;
    height:424px;
    transform:rotate(-4deg);
  }
  .notebook:hover,.notebook:focus-visible {
    transform:rotate(-3deg);
  }
  .page-left {
    width:100%;
    border-radius:13px;
    background-image:linear-gradient(90deg,#ffffff2e,transparent 6%,transparent 94%,#5a432612),var(--paper-fibre),linear-gradient(#7e705a1c 1px,transparent 1px),linear-gradient(90deg,#7e705a1c 1px,transparent 1px);
    background-size:100% 100%,360px 360px,18px 18px,18px 18px;
    padding:25px 26px;
  }
  .page-right,.notebook-spine,.ribbon {
    display:none;
  }
  .note-eyebrow {
    font-size:10px;
  }
  .page h1 {
    font-size:84px;
    margin-top:6px;
    letter-spacing:-4px;
  }
  .red-underline {
    top:134px;
    left:90px;
    width:175px;
    height:4px;
  }
  .note-role {
    font-size:14.5px;
    margin-top:13px;
  }
  .page h2 {
    font-size:25px;
    margin-top:9px;
  }
  .page h2 br {
    display:none;
  }
  .note-description {
    font-size:11.5px;
    margin-top:18px;
    line-height:1.5;
  }
  .primary {
    margin-top:18px;
    padding:11px 16px;
    font-size:12.5px;
  }
  .note-link {
    font-size:11.5px;
    margin-top:15px;
  }
  .page-number {
    font-size:8.5px;
    left:26px;
    bottom:15px;
  }
  .lamp {
    width:181px;
    left:-38px;
    top:-27px;
    --rot:-13deg;
  }
  .lamp-glow {
    width:280px;
    height:280px;
    top:0;
    left:0;
  }
  .record-wrap {
    top:17px;
    left:auto;
    right:28px;
    transform:rotate(6deg);
  }
  .record {
    width:102px;
    height:107px;
  }
  .vinyl-label {
    font-size:6px;
  }
  .vinyl-label span {
    font-size:3px;
  }
  .record-play {
    font-size:4.5px;
  }
  .record .object-label {
    font-size:11px;
    bottom:-30px;
    max-width:170px;
  }
  .sticky {
    left:auto;
    right:20px;
    top:769px;
    width:83px;
    height:90px;
    font-size:18px;
    padding:8px;
    transform:rotate(9deg);
    z-index:8;
  }
  .sticky-star {
    font-size:24px;
  }
  .editor {
    left:9%;
    top:865px;
    width:82%;
    height:143px;
    transform:rotate(3deg);
    z-index:6;
  }
  .editor-top {
    height:26px;
    font-size:7px;
  }
  .code {
    font-size:8px;
    line-height:1.25;
    padding:9px 13px;
  }
  .code>span:nth-child(6) {
    display:none;
  }
  .build-status {
    font-size:6px;
    padding-top:1px;
  }
  .phone {
    width:236px;
    left:auto;
    right:-29px;
    top:566px;
    --rot:-21deg;
    z-index:7;
  }
  .keyboard {
    width:245px;
    left:-44px;
    top:564px;
    --rot:-12deg;
    z-index:5;
  }
  .cable {
    width:140px;
    top:728px;
    left:47%;
    --rot:35deg;
    z-index:5;
  }
  .pen {
    width:182px;
    top:747px;
    left:22px;
    --rot:35deg;
    z-index:8;
  }
  .web-preview {
    width:163px;
    height:145px;
    top:688px;
    left:47px;
    transform:rotate(-10deg);
    z-index:7;
    padding:6px;
  }
  .web-bar {
    height:12px;
    font-size:4px;
  }
  .web-bar .traffic i {
    width:4px;
    height:4px;
  }
  .web-inside {
    margin-top:3px;
    padding:2px;
    gap:5px;
  }
  .web-inside small {
    font-size:3px;
  }
  .web-inside p {
    font-size:17px;
    margin:7px 0 11px;
  }
  .web-inside>div>span {
    font-size:5px;
  }
  .blue-architecture {
    height:95px;
  }
  .blue-architecture span {
    width:90px;
    height:125px;
    left:10px;
    top:15px;
  }
  .blue-architecture span:nth-child(2) {
    left:-30px;
    top:45px;
  }
  .blue-architecture span:nth-child(3) {
    left:45px;
    top:62px;
  }
  .desk-signature {
    display:none;
  }
  .object-label {
    font-size:11.5px;
  }
  .phone-notification {
    font-size:8px;
    padding:7px;
  }
  .phone-notification span {
    font-size:5px;
  }
  .battery-pop {
    font-size:9px;
    padding:6px 8px;
  }
  .desk-toolbar {
    width:calc(100% - 36px);
    margin:15px auto 0;
    padding-bottom:21px;
    gap:10px;
  }
  .explore-hint {
    font-size:12px;
    max-width:none;
  }
  .explore-hint>span {
    font-size:16px;
    margin-right:4px;
  }
  .scroll-link {
    display:none;
  }
  .section {
    width:calc(100% - 40px);
  }
  .services {
    padding:48px 0 48px;
  }
  .section-top {
    margin-bottom:17px;
  }
  .eyebrow {
    font-size:12px;
    letter-spacing:0;
  }
  .tiny-note {
    font-size:17px;
  }
  .section h2 {
    font-size:38px;
    letter-spacing:-.03em;
  }
  .service-grid {
    grid-template-columns:1fr;
    margin-top:24px;
    gap:12px;
  }
  .service-grid>article {
    padding:21px 20px;
    gap:25px;
  }
  .service-grid h3 {
    font-size:20px;
  }
  .service-grid p {
    font-size:15px;
  }
  .service-grid div>span {
    font-size:12.5px;
  }
  .section-heading {
    display:block;
    margin-bottom:24px;
  }
  .work-section {
    padding:10px 0 50px;
  }
  .work-section .tiny-note {
    display:none;
  }
  .work-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
  .work-visual {
    height:320px;
  }
  .work-meta {
    font-size:12.5px;
  }
  .work-title {
    font-size:22px;
  }
  .demo-browser {
    max-width:300px;
  }
  .about {
    grid-template-columns:1fr;
    gap:40px;
    padding:50px 0;
  }
  .about-note {
    width:94%;
    margin:0 auto;
    padding:28px 30px;
  }
  .about-note h2 {
    font-size:52px;
  }
  .about-copy {
    padding:0 3px;
  }
  .about-copy .about-lead {
    font-size:26px;
  }
  .about-copy>p:not(.about-lead) {
    font-size:16px;
  }
  .contact {
    padding:45px 0 55px;
  }
  .contact h2 {
    font-size:min(64px,17vw);
    margin:25px 0 30px;
    letter-spacing:-.04em;
  }
  .email {
    font-size:21px;
    letter-spacing:-.02em;
  }
  .contact>p {
    font-size:15px;
  }
  footer.section {
    font-size:12.5px;
    padding-top:21px;
    flex-wrap:wrap;
    gap:17px;
  }
  footer.section>span:nth-child(2) {
    order:3;
    flex-basis:100%;
  }
  dialog {
    padding:16px;
  }
  .interactive-web {
    padding:24px;
    min-height:340px;
  }
  .interactive-web h3 {
    font-size:43px;
  }
  .demo-shape {
    width:150px;
    height:150px;
    top:150px;
    right:-40px;
  }
  .interactive-web>p {
    font-size:13px;
    max-width:195px;
  }
  .interactive-mobile {
    padding:25px 0;
    flex-direction:column;
    gap:20px;
  }
  .demo-side-copy {
    font-size:14px;
    text-align:center;
  }
  .interactive-motion {
    gap:8px;
    padding:30px 0;
  }
  .motion-sample {
    height:140px;
    font-size:13px;
  }
  .dialog-top {
    font-size:14px;
  }
  .demo-footnote {
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .record.is-playing .vinyl {
    outline:2px solid #8b9e60;
  }
  .notebook:hover,.object:hover,.editor:hover {
    transform:rotate(var(--rot,0deg));
  }
}
.section-top {
  justify-content:flex-end;
}
.record .object-label {
  max-width:260px;
  white-space:normal;
  width:max-content;
  text-align:center;
  line-height:1.5;
}
.mobile-leaf:empty {
  height:62px;
}
@media(max-width:700px) {
}
@media(max-width:700px) {
  /* A slimmer cover edge reads as a hardback, not a frame, at phone size. */
  .notebook-back {
    inset:-4px -5px -8px;
  }
}
@media(max-width:360px) {
  /* Tighten the page so "İşlerimi keşfet" clears the page number on the narrowest phones. */
  .page h2 {
    font-size:22px;
  }
  .note-description {
    font-size:11px;
    line-height:1.5;
    margin-top:12px;
  }
  .primary {
    margin-top:14px;
  }
  .note-link {
    margin-top:12px;
  }
  .page-number {
    bottom:11px;
  }
}
@media(max-width:360px) {
  /* Keep the brand line clear of the contact button on the narrowest phones. */
  .nav-contact {
    font-size:12.5px;
    padding:9px 12px;
  }
}
@media(max-width:700px) {
  .brand-logo {
    width:204px;
  }
}
@media(max-width:375px) {
  .brand-logo {
    width:190px;
  }
}
@media(max-width:360px) {
  .brand-logo {
    width:172px;
  }
}