/* desk · case page. The case is one printed document laid out on the mat,
   with the proof (screenshots, printouts) pinned beside it. The decision is
   an index card taped over the sheet. The line's room adds its objects. */

.c-mat { padding: clamp(26px, 4vw, 60px) var(--pad) clamp(70px, 8vw, 130px); }
.c-back { margin-bottom: clamp(26px, 3vw, 44px); }
.c-back .dymo { --r: -1.5deg; }
.c-wrap { position: relative; max-width: 1240px; padding-inline-end: clamp(0px, 30vw, 400px); }

/* the document */
.doc { position: relative; padding: clamp(46px, 5vw, 80px) clamp(22px, 5vw, 76px) clamp(40px, 5vw, 70px); background: var(--paper); box-shadow: var(--sh-flat), 0 20px 44px rgba(35,31,32,.3); }
.doc .binder { inset-inline-end: 44px; }
.doc-top { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.doc-n { font-weight: 700; font-size: 14px; background: var(--black); color: var(--white); padding: 2px 8px; }
.tag { font-size: 14px; padding: 2px 9px; border: 1.5px solid var(--black); border-radius: 3px; }
.doc-h { font-weight: 900; font-size: clamp(50px, 6.4vw, 104px); line-height: .92; letter-spacing: -.03em; margin: 18px 0 8px; text-wrap: balance; }
.doc-url { font-size: 16px; color: var(--grey); }
.doc-lead { margin-top: clamp(22px, 2.4vw, 34px); font-weight: 700; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.5; max-width: 38ch; text-wrap: pretty; }
.doc-sec { margin-top: clamp(40px, 4.4vw, 64px); }
.doc h2 { font-weight: 900; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.1; padding-top: 16px; margin-bottom: 18px; border-top: 2px solid var(--black); }
.doc p, .doc li { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.7; max-width: 64ch; }
.did { display: grid; gap: 22px; counter-reset: d; }
.did li { position: relative; padding-inline-start: 46px; counter-increment: d; }
.did li::before { content: counter(d, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: .2em; font-weight: 700; font-size: 13px; line-height: 1; padding: 4px 6px; background: var(--black); color: var(--white); unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.did strong, .got strong { font-weight: 700; }

/* the decision: an index card taped over the sheet, sticking out of it */
.decision { margin: clamp(40px, 4.4vw, 64px) calc(-1 * clamp(8px, 3vw, 54px)) 0; padding: clamp(34px, 3.6vw, 56px) clamp(24px, 3.4vw, 52px) clamp(30px, 3vw, 44px); padding-inline-start: clamp(44px, 5vw, 80px); --r: -.7deg; }
.decision h2 { border-top: 0; padding-top: 0; }
.decision p { font-size: clamp(18px, 1.3vw, 20px); }

/* the results: ticked off by hand */
.got { display: grid; gap: 16px; }
.got li { position: relative; padding-inline-start: 44px; }
.got .tick { position: absolute; inset-inline-start: 0; top: .1em; width: 30px; height: 30px; }
.doc-link { margin-top: 18px; }
.doc-link .dymo { --r: 1deg; }

/* proof pinned beside the sheet */
.prints { position: absolute; top: 40px; inset-inline-start: calc(100% + clamp(30px, 3.4vw, 56px)); width: clamp(220px, 24vw, 340px); display: grid; gap: 48px; }
.prints .polaroid { padding: 12px 12px 40px; }
.prints .polaroid img { aspect-ratio: auto; }
.prints .p1 { --r: 3deg; }
.prints .p2 { --r: -2.5deg; margin-inline-start: -30px; }
.prints .p3 { --r: 2deg; }
.prints .sheet { padding: 12px; }
.prints .sheet img { width: 100%; }
.loupe { position: absolute; z-index: 6; width: clamp(110px, 10vw, 150px); height: auto; top: 46%; inset-inline-end: -40px; --r: -18deg; filter: drop-shadow(0 10px 10px rgba(35,31,32,.35)); pointer-events: none; }
[dir="rtl"] .loupe { inset-inline-end: auto; left: -40px; }

/* the end: one action, and the way back */
.c-end { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: clamp(56px, 8vw, 110px) var(--pad); }
.c-end .cb-p { max-width: 46ch; }
.c-end .back2 { margin-top: 14px; }

@media (max-width: 1100px) {
  .c-wrap { padding-inline-end: 0; }
  .prints { position: relative; inset: auto; width: auto; display: flex; gap: 0; margin: 34px -6px 10px; align-items: flex-start; }
  .prints > * { flex: 1 1 0; min-width: 0; }
  .prints .polaroid { padding: 8px 8px 24px; }
  .prints .p2 { margin-inline-start: -14px; margin-top: 24px; z-index: 4; }
  .prints .p3 { margin-inline-start: -14px; }
  .loupe { width: 90px; top: auto; bottom: -34px; left: 30%; inset-inline-end: auto; }
  [dir="rtl"] .loupe { left: 30%; }
}
@media (max-width: 760px) {
  .doc { padding-top: 44px; }
  .decision { --r: -.4deg; margin-inline: -10px; }
  .ruler span:nth-child(n+8) { display: none; }
}

/* ============================ UX pass, 8.11.2026 ============================ */
.back2 { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.c-next { --r: 1.5deg; }
@media (max-width: 760px) {
  /* reading width on a phone: about 40 characters instead of 34 */
  .c-mat { padding-inline: 10px; }
  .doc { padding-inline: 18px; }
  .decision { padding-inline-start: 32px; padding-inline-end: 18px; }
  /* the proof: a strip of prints big enough to read, swiped sideways,
     with the next one peeking in. Nothing covers the screenshots. */
  .prints { display: flex; gap: 16px; margin: 30px -18px 6px; padding: 26px 18px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .prints::-webkit-scrollbar { display: none; }
  .prints > * { flex: 0 0 72%; scroll-snap-align: center; }
  .prints .p2, .prints .p3 { margin: 0; }
  .prints .p2 { flex-basis: 82%; align-self: center; }
  .prints .loupe { width: 64px; bottom: -22px; top: auto; left: auto; inset-inline-end: -8px; }
  [dir="rtl"] .prints .loupe { left: -8px; inset-inline-end: auto; }
}

/* ============================ stage 2, 8.11.2026 ============================ */
/* the case title: a short name big, the rest of the file's title under it */
.doc-h.long { font-size: clamp(36px, 4.4vw, 70px); line-height: .98; }
.doc-sub { margin-bottom: 10px; font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; max-width: 32ch; text-wrap: balance; }
/* the result line, right under the opening (section 7.1): the first thing a phone reader gets */
.doc-res { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 18px; max-width: 46ch; background: var(--orange); color: var(--black); font-weight: 700; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; box-shadow: 0 3px 0 var(--black); }
.doc-res .tick { flex: none; width: 26px; height: 26px; margin-top: .05em; }
/* a case waiting for the client's approval: a rubber stamp on the document, in the flow, never over text */
.pend { margin: 16px 0 4px; --r: -4deg; transform-origin: 0 50%; }
.pend span { display: inline-block; padding: 6px 16px; border: 5px double var(--black); color: var(--black); font-family: var(--f-label); font-weight: 700; letter-spacing: .1em; font-size: clamp(17px, 1.5vw, 24px); opacity: .86; }
.c-wrap.no-prints { padding-inline-end: 0; max-width: 980px; }
/* the line tag opens the line page */
a.tag-l { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a.tag-l:hover { background: var(--black); color: var(--white); }
.doc-top .tag { display: inline-flex; align-items: center; min-height: 32px; }
/* extra sections in a case (the apps in the app factory) */
.doc-x h3 { margin: 28px 0 6px; font-weight: 900; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; }
.doc ul.plain { display: grid; gap: 10px; }
.doc ul.plain li { position: relative; padding-inline-start: 22px; }
.doc ul.plain li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.inl { font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.doc-note { margin-inline-start: 12px; font-size: 15px; color: var(--grey); }
/* next work: the label, and the case name on a second line (section 7.4) */
.c-next .nx-in { display: grid; line-height: 1.15; text-align: start; }
.c-next .nx-l { font-size: .74em; opacity: .8; }
.c-next { padding-block: 8px; }
/* proof in the room's own objects: a browser window (sites), a phone (apps) */
.prints .phone { width: 74%; justify-self: center; }
.prints .browser img { aspect-ratio: auto; }
.prints .p1.browser, .prints .p1.phone { --r: 2deg; }
@media (max-width: 1100px) {
  .prints .phone { width: auto; }
}
@media (max-width: 760px) {
  .prints > .phone { flex-basis: 60%; }
  .prints > .browser { flex-basis: 86%; align-self: center; }
  .doc-res { margin-inline: -6px; }
}
.pend { margin-top: 26px; }
@media (max-width: 760px) {
  /* the stamp floats at the head of the document now: no extra room at the bottom */
}

/* ============================ UX pass, stage 2, 8.11.2026 ============================ */
/* the line tag is a link: a 44px touch target, same look */
a.tag-l { position: relative; }
a.tag-l::after { content: ""; position: absolute; inset: -6px -2px; }
/* English subtitles come from "Name: a family of…", so they start lower case */
[lang="en"] .doc-sub::first-letter { text-transform: uppercase; }