/* desk · the four service rooms (sites, seo, apps, biz) and the line page layout.
   Each room lays its own objects on the desk, from the work itself:
   sites  a browser printout, a wireframe on graph paper, a swatch fan, a colour chip
   seo    a magnifier on a printout, a site tree, a card box with tabbed cards, a folder
   apps   phones with real screens, a screen flow on sticky notes, a test checklist
   biz    a thermal receipt, a calculator, a blank business card
   Objects that carry text are never tilted more than about a degree.
   Decorations are aria-hidden and never sit on text. */

/* ============================ shared objects of the rooms ============================ */
.browser { position: relative; background: var(--paper); border: 2px solid var(--black); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-lift);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }
.br-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #EDEAEA; border-bottom: 2px solid var(--black); }
.br-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--black); background: var(--paper); }
.br-bar i:first-child { background: var(--orange); }
.br-bar b { flex: 1; height: 12px; margin-inline-start: 10px; border-radius: 6px; background: var(--paper); border: 1.5px solid rgba(35,31,32,.3); }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; pointer-events: none; }

.phone { position: relative; background: var(--black); border-radius: 30px; padding: 10px; box-shadow: var(--sh-held);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }
.phone img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 22px; background: var(--paper); pointer-events: none; }
.ph-notch { position: absolute; z-index: 2; top: 16px; left: 50%; width: 32%; height: 14px; margin-left: -16%; border-radius: 10px; background: var(--black); }

.graph { position: relative; background-color: var(--paper); color: var(--black);
  background-image: linear-gradient(rgba(35,31,32,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(35,31,32,.09) 1px, transparent 1px);
  background-size: 16px 16px; box-shadow: var(--sh-flat); }
.wire, .tree { display: block; width: 100%; height: auto; }

/* ============================ line page: hero ============================ */
.l-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); grid-template-rows: auto 1fr; gap: 30px clamp(30px, 5vw, 80px); align-items: start; padding: clamp(36px, 5vw, 80px) var(--pad) clamp(70px, 8vw, 120px); }
.l-hero > .idx { grid-column: 1; grid-row: 1; z-index: 2; }
.l-hero > .where { grid-column: 1; grid-row: 2; }
.l-hero > .l-objs { grid-column: 2; grid-row: 1 / span 2; }
.l-hero .eyebrow { display: flex; align-items: center; gap: 10px; padding-inline-end: clamp(70px, 8vw, 120px); font-weight: 500; font-size: 16px; color: var(--grey); }
.l-hero .eyebrow .emb { flex: none; width: 34px; height: 34px; }
.room-title { font-weight: 900; font-size: clamp(40px, 4.8vw, 84px); line-height: .98; letter-spacing: -.03em; margin: 14px 0 22px; text-wrap: balance; }
.l-hero .hero-text { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; max-width: 46ch; }
.l-hero .idx .cta-hero { margin-top: 24px; }
.where { max-width: 560px; padding: 26px 28px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; font-weight: 500; --r: -.8deg; }

.l-objs { position: relative; min-height: clamp(440px, 42vw, 620px); }
.l-objs > * { position: absolute; }

/* sites: two browser printouts, a wireframe sketch, a swatch fan */
[data-room="sites"] .l-objs .o-1 { width: 90%; top: 0; inset-inline-start: 2%; --r: -2.5deg; z-index: 2; }
[data-room="sites"] .l-objs .o-2 { width: 66%; top: 44%; inset-inline-end: 0; --r: 3deg; z-index: 3; }
[data-room="sites"] .l-objs .o-3 { width: 36%; padding: 12px; bottom: 0; inset-inline-start: 0; --r: -7deg; z-index: 4; }
[data-room="sites"] .l-objs .o-4 { width: 30%; height: auto; top: 26%; inset-inline-start: -4%; --r: -10deg; z-index: 5; filter: drop-shadow(0 8px 10px rgba(35,31,32,.35)); }

/* seo: a printout under the magnifier, a site tree */
[data-room="seo"] .l-objs .o-1 { width: 84%; top: 0; inset-inline-start: 4%; padding: 12px; --r: -2deg; }
[data-room="seo"] .l-objs .o-1 img { width: 100%; }
[data-room="seo"] .l-objs .loupe { position: absolute; z-index: 6; width: 38%; height: auto; top: 34%; inset-inline-end: -10%; --r: -18deg; filter: drop-shadow(0 10px 10px rgba(35,31,32,.35)); pointer-events: none; }
[data-room="seo"] .l-objs .o-2 { width: 62%; bottom: 0; inset-inline-start: 0; padding: 18px; --r: 2.5deg; z-index: 3; }

/* apps: two phones with real screens, a flow on sticky notes */
[data-room="apps"] .l-objs .o-1 { width: 44%; top: 0; inset-inline-start: 8%; --r: -4deg; z-index: 3; }
[data-room="apps"] .l-objs .o-2 { width: 40%; top: 12%; inset-inline-end: 2%; --r: 5deg; z-index: 2; }
[data-room="apps"] .l-objs .o-3 { width: 42%; height: auto; bottom: -2%; inset-inline-start: -6%; --r: 0deg; z-index: 4; filter: drop-shadow(0 8px 10px rgba(35,31,32,.3)); }
[data-room="apps"] .l-objs { min-height: clamp(480px, 46vw, 680px); }

/* biz: a short receipt, a calculator, a blank business card */
.receipt { position: relative; background: var(--paper); color: var(--black); filter: drop-shadow(0 16px 20px rgba(0,0,0,.4));
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background-size: 14px 12px; background-repeat: repeat-x; }
.receipt::after { bottom: -12px; background-image: linear-gradient(135deg, var(--paper) 7px, transparent 0), linear-gradient(-135deg, var(--paper) 7px, transparent 0); }
.receipt::before { top: -12px; background-image: linear-gradient(45deg, var(--paper) 7px, transparent 0), linear-gradient(-45deg, var(--paper) 7px, transparent 0); background-position: 0 100%; }
.receipt.mini .rc-in { padding: 26px 22px 30px; }
.receipt.mini i { display: block; height: 6px; margin: 12px 0; background: rgba(35,31,32,.7); width: 70%; }
.receipt.mini i:nth-child(2) { width: 90%; } .receipt.mini i:nth-child(3) { width: 55%; } .receipt.mini i:nth-child(4) { width: 82%; } .receipt.mini i:nth-child(5) { width: 40%; }
.receipt.mini b { display: block; height: 30px; margin-top: 18px; background: repeating-linear-gradient(90deg, var(--black) 0 2px, transparent 2px 4px, var(--black) 4px 7px, transparent 7px 9px); }
[data-room="biz"] .l-objs .o-1 { width: 40%; top: 4%; inset-inline-start: 6%; --r: -4deg; z-index: 2; }
[data-room="biz"] .l-objs .o-2 { width: 34%; height: auto; top: 0; inset-inline-end: 6%; --r: 9deg; z-index: 3; filter: drop-shadow(0 12px 14px rgba(35,31,32,.4)); }
.bcard-w { display: grid; align-content: end; gap: 9px; padding: 22px 24px; background: var(--paper); border-radius: 4px; box-shadow: var(--sh-lift); aspect-ratio: 1.75;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }
.bcard-w i { display: block; height: 6px; width: 46%; background: rgba(35,31,32,.22); }
.bcard-w i:first-child { width: 26px; height: 26px; margin-bottom: auto; border-radius: 50%; background: var(--orange); }
.bcard-w i:last-child { width: 30%; }
[data-room="biz"] .l-objs .o-3 { width: 56%; bottom: 4%; inset-inline-start: 22%; --r: -6deg; z-index: 4; }

/* ============================ line page: what I do, on the table ============================ */
.l-do { padding: clamp(60px, 7vw, 120px) var(--pad) clamp(70px, 8vw, 130px); }
.do-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.do-side { display: grid; gap: 48px; justify-items: center; padding-top: 24px; }
.do-main strong { display: block; font-weight: 900; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.22; margin-bottom: 6px; }
.do-main p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; }

/* how I work: a paper slip taped down */
.slip { position: relative; max-width: 420px; padding: 32px 26px 24px; background: var(--paper); color: var(--black); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; box-shadow: 0 14px 30px rgba(0,0,0,.45); --r: -1deg; }

/* sites: the four items on graph paper with the wireframe in the corner; ownership on a colour chip */
.graph.big { max-width: 760px; padding: clamp(42px, 4.5vw, 66px) clamp(22px, 4vw, 60px) 190px; box-shadow: 0 18px 40px rgba(0,0,0,.5); --r: -.5deg; }
.graph.big > .wire { position: absolute; width: 132px; bottom: 30px; inset-inline-end: clamp(22px, 4vw, 60px); transform: rotate(-3deg); }
.gl { display: grid; gap: clamp(24px, 2.6vw, 36px); }
.gl li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; }
.gl-n { align-self: start; margin-top: 3px; padding: 2px 8px; background: var(--black); color: var(--white); font-weight: 700; font-size: 14px; }
.chip { width: min(100%, 320px); padding: 12px; background: var(--paper); color: var(--black); border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,.55); --r: 1.5deg; }
.chip-c { height: 150px; border-radius: 3px; background: var(--orange); }
.chip-t { padding: 18px 10px 10px; font-size: clamp(18px, 1.35vw, 21px); font-weight: 500; line-height: 1.5; }

/* seo: a card box with tabbed index cards; ownership in a folder; the honest line on a sticky note */
.cardbox { max-width: 780px; padding: 44px clamp(14px, 2vw, 26px) 26px; border-radius: 10px; background: #3a3435; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 24px 50px rgba(0,0,0,.5); --r: 0deg; }
.cardbox ol { display: grid; gap: 34px; }
.kc { position: relative; padding: 22px clamp(18px, 2.4vw, 34px) 20px; background: var(--paper); color: var(--black); border-radius: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.kc-tab { position: absolute; top: -24px; inset-inline-start: calc(16px + (var(--i) - 1) * 21%); height: 25px; padding: 0 16px; border-radius: 6px 6px 0 0; background: var(--paper); font-weight: 700; font-size: 13px; line-height: 25px; }
.kc:first-child .kc-tab { background: var(--orange); }
.folder { position: relative; width: min(100%, 360px); padding: 34px 16px 16px; border-radius: 3px 10px 6px 6px; background: var(--orange); box-shadow: 0 20px 40px rgba(0,0,0,.5); --r: 1.2deg; }
.folder::before { content: ""; position: absolute; top: -20px; inset-inline-start: 0; width: 42%; height: 22px; border-radius: 8px 8px 0 0; background: var(--orange); }
.folder p { padding: 22px; background: var(--paper); color: var(--black); font-size: clamp(18px, 1.35vw, 21px); font-weight: 500; line-height: 1.5; }
.note-t { max-width: 360px; padding: 26px 26px; font-size: clamp(16px, 1.15vw, 18px); font-weight: 500; line-height: 1.55; --r: -1.5deg; }

/* apps: a test checklist on a clipboard; ownership on a white sticky note */
.checklist { position: relative; max-width: 760px; padding: 56px clamp(22px, 3.4vw, 56px) 42px; background: var(--paper); color: var(--black); box-shadow: 0 18px 40px rgba(0,0,0,.5); --r: -.4deg; }
.checklist > .binder { inset-inline-end: auto; inset-inline-start: 50%; margin-inline-start: -24px; top: -26px; }
.checklist ul { display: grid; gap: 28px; }
.checklist li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
.cbx { position: relative; width: 34px; height: 34px; margin-top: 2px; border: 2.5px solid var(--black); border-radius: 4px; }
.cbx .tick { position: absolute; width: 40px; height: 40px; top: -12px; inset-inline-start: 1px; }
.postit.pw { max-width: 360px; padding: 32px 28px; background: var(--paper); color: var(--black); font-size: clamp(18px, 1.35vw, 21px); font-weight: 500; line-height: 1.5; box-shadow: 0 14px 26px rgba(0,0,0,.5); --r: 1.5deg; }

/* biz: the four items on a thermal receipt, ownership as its total */
.receipt:not(.mini) { max-width: 640px; --r: -.6deg; }
.receipt:not(.mini) .rc-in { padding: 26px clamp(22px, 3vw, 44px) 26px; }
.receipt li { padding: 20px 0; border-bottom: 2px dashed rgba(35,31,32,.35); }
.rc-tot { margin-top: 8px; padding: 22px 0 10px; border-top: 4px double var(--black); font-weight: 700; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; }
.rc-bar { height: 46px; margin-top: 16px; background: repeating-linear-gradient(90deg, var(--black) 0 2px, transparent 2px 4px, var(--black) 4px 7px, transparent 7px 9px, var(--black) 9px 10px, transparent 10px 13px); }

/* biz: three more index cards on the mat (breadth, models, creative) */
.l-more { padding: clamp(60px, 7vw, 110px) var(--pad); border-top: 4px solid var(--black); }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); align-items: start; }
.more-grid .card { padding: clamp(26px, 3vw, 40px); padding-top: clamp(30px, 3vw, 44px); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; }
.more-grid .mc-1 { --r: -1deg; } .more-grid .mc-2 { --r: .8deg; } .more-grid .mc-3 { --r: -.6deg; }

/* the line's cases, as printed sheets (home.css styles the sheets) */
.l-cases .work-h { margin-bottom: 40px; }

@media (max-width: 860px) {
  .l-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 60px; }
  .l-hero > .idx, .l-hero > .where, .l-hero > .l-objs { grid-column: 1; grid-row: auto; }
  .l-objs, [data-room="apps"] .l-objs { min-height: 0; height: 92vw; max-height: 520px; margin-top: 10px; }
  [data-room="sites"] .l-objs .o-4 { inset-inline-start: 0; width: 26%; }
  [data-room="seo"] .l-objs .loupe { inset-inline-end: 0; width: 30%; }
  [data-room="apps"] .l-objs { height: 118vw; max-height: 640px; }
  [data-room="apps"] .l-objs .o-3 { inset-inline-start: 0; width: 36%; }
  .do-grid { grid-template-columns: minmax(0, 1fr); }
  .do-side { justify-items: start; gap: 40px; }
  .graph.big { padding-bottom: 160px; }
  .graph.big > .wire { width: 104px; }
  .cardbox { padding-inline: 10px; }
  .kc-tab { inset-inline-start: calc(10px + (var(--i) - 1) * 23%); padding: 0 12px; }
  .more-grid { grid-template-columns: minmax(0, 1fr); }
  .ruler span:nth-child(n+8) { display: none; }
}
@media (max-width: 760px) {
  .l-hero .eyebrow { padding-inline-end: 64px; font-size: 15px; }
  .l-hero .eyebrow .emb { width: 28px; height: 28px; }
}
/* the stage note lies on the orange mat: a white sticky note with an orange edge, so it reads */
.postit.where { background: var(--paper); border-inline-start: 10px solid var(--orange); box-shadow: var(--sh-lift); }

/* ============================ UX pass, stage 2, 8.11.2026 ============================ */
/* a line with nothing for the side column (business): the receipt is not pushed to one edge with half the table empty */
.do-grid.solo { grid-template-columns: minmax(0, 640px); justify-content: center; }