/* desk · home page. Layout only; every object comes from desk.css */

/* hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 40px clamp(30px, 5vw, 80px); align-items: start; padding: clamp(36px, 5vw, 80px) var(--pad) clamp(60px, 7vw, 110px); }
.eyebrow { font-weight: 500; font-size: 16px; color: var(--grey); }
.hero-name { font-weight: 900; font-size: clamp(66px, 9.6vw, 168px); line-height: .88; letter-spacing: -.035em; margin: 14px 0 22px; }
.hero-text { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; max-width: 40ch; }
.idx .cta-hero { margin-top: 22px; }
.hero .polaroid { justify-self: center; width: min(100%, 400px); padding: 16px 16px 64px; box-shadow: var(--sh-held); }
.dymos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 16px; }
.hero .ring { top: 54%; inset-inline-start: 46%; }

/* work: printed sheets on the mat */
.work { overflow-x: clip; padding: clamp(50px, 6vw, 90px) var(--pad) clamp(70px, 8vw, 130px); border-top: 4px solid var(--black); }
.work-head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: end; justify-content: space-between; margin-bottom: 40px; }
.work-h { font-weight: 900; font-size: clamp(54px, 8vw, 130px); line-height: .9; letter-spacing: -.03em; }
.work-h .num { display: inline-block; font-size: .32em; vertical-align: top; background: var(--black); color: var(--white); padding: 4px 12px; letter-spacing: 0; transform: rotate(4deg); }
.f-btn { background: var(--white); color: var(--black); border-radius: 3px; font-weight: 500; box-shadow: 0 2px 0 rgba(35,31,32,.3); }
.f-btn[aria-pressed="true"] { background: var(--black); color: var(--white); }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(26px, 3vw, 44px); align-items: start; }
.case { position: relative; }
.board .sheet { touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.board .sheet:hover { --lift: 1; }
.case:nth-child(3n+2) .clip { display: none; }
.sh-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eee; }
.sh-pic img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sh-cap { display: flex; gap: 10px; align-items: baseline; }
.sh-n { font-weight: 700; font-size: 13px; background: var(--black); color: var(--white); padding: 1px 6px; }
.sh-name { font-weight: 900; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.12; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; padding: 2px 8px; border: 1.5px solid var(--black); border-radius: 3px; }
.tag-s { background: var(--black); color: var(--white); }
.no-img .sheet { padding: 22px 20px 22px; background-image: linear-gradient(transparent calc(100% - 1px), var(--rule) calc(100% - 1px)); background-size: 100% 1.9em; }
.no-img .sh-name { font-size: clamp(26px, 2.3vw, 36px); }
/* a sheet that opens a real case page carries a dot sticker (desk.css) */

/* what I do: index cards, each with its room's emblem */
.lines { padding: clamp(60px, 7vw, 120px) var(--pad); }
.ics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.ic a { position: relative; display: grid; gap: 12px; align-content: start; height: 100%; padding: 30px 24px 28px; background: var(--white); border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--black); transition: transform .3s var(--ease), box-shadow .3s; }
.ic a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--orange); border-bottom: 2px solid var(--black); }
.ic a:hover { transform: translate3d(-4px, -6px, 0) rotate(-1deg); box-shadow: 10px 12px 0 var(--black); }
.ic .emb { margin-top: 4px; }
.ic-name { font-weight: 900; font-size: clamp(24px, 2vw, 32px); line-height: 1.05; }
.ic-d { font-size: 16px; line-height: 1.55; }
.consult { display: grid; gap: 10px; max-width: 520px; margin-top: 50px; padding: 34px 30px; transition: transform .3s var(--ease); }
.consult:hover { transform: rotate(-1.5deg) scale(1.02); }
.consult-name { font-weight: 900; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; }

/* about: notepad */
.about { padding: 0 var(--pad) clamp(60px, 7vw, 120px); }
.about .pad { max-width: 980px; margin-inline: auto; padding: 60px clamp(24px, 5vw, 80px) 50px; font-size: clamp(22px, 2.3vw, 36px); }
.about .dymo-h { font-size: 16px; }
.about-big { font-weight: 500; line-height: 1.45; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .polaroid { width: 74%; margin-top: -10px; }
  .hero .ring { display: none; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .case:nth-child(odd) .sheet { --r: -1.5deg; }
  .case:nth-child(even) .sheet { --r: 1.5deg; }
  .no-img .sh-name, .sh-name { font-size: 17px; }
  .no-img .sheet { padding: 18px 12px; }
  .tag { font-size: 12px; padding: 1px 6px; }
  .ruler span:nth-child(n+8) { display: none; }
}
@media (max-width: 340px) { .board { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ic a:hover, .consult:hover { transform: none; } }
/* business card lies across the polaroid corner */
.hero .bcard { left: clamp(330px, 29vw, 440px); top: clamp(380px, 31vw, 450px); }
@media (max-width: 860px) {
  .hero .bcard { position: relative; left: auto; top: auto; justify-self: end; width: 236px; height: 136px; margin-top: -84px; padding: 14px 18px; }
  .hero .bcard .bc-logo { height: 96px; }
  .hero .bcard .bc-name { font-size: 19px; }
}

/* ============================ stage 2, 8.11.2026 ============================ */
/* every sheet opens its case now; the result line sits under the name (section 7.1) */
.sh-res { font-size: 14px; line-height: 1.4; font-weight: 500; }
.no-img .sh-res { font-size: 15px; }
/* the legend for the dot sticker, next to the filter (section 7.2) */
.filter-wrap { display: grid; gap: 12px; }
.legend { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.legend .dot-st { position: static; flex: none; width: 22px; height: 22px; }
/* the business card follows the portrait to the other side in English */
[dir="ltr"] .hero .bcard { left: auto; right: clamp(330px, 29vw, 440px); }
@media (max-width: 860px) {
  [dir="ltr"] .hero .bcard { right: auto; }
  .sh-res { font-size: 13px; }
}

/* ============================ UX pass, stage 2, 8.11.2026 ============================ */
/* a sheet with no picture: the dot sticker had nothing to sit on and covered the
   number and the first word of the name. It gets its own strip at the top. */
.no-img .sheet { padding-top: 60px; }
@media (max-width: 860px) { .no-img .sheet { padding-top: 54px; } }

/* home: the business card lies on the bottom corner of the card, so on a wide screen the stamp goes on
   the top corner, half into the card margin, small enough that the name keeps its line.
   On a phone the name needs the whole width: the stamp sits beside the button instead. */
.hero > .idx { display: flow-root; }
.hero > .idx > .stamp { width: clamp(84px, 6.8vw, 104px); margin-top: clamp(-34px, -2.4vw, -16px); margin-inline-end: clamp(-44px, -2.8vw, -16px); margin-inline-start: 14px; }
.hero > .idx > .stamp-m { display: none; }
@media (max-width: 760px) {
  .hero > .idx > .stamp { display: none; }
  .hero > .idx > .stamp-m { display: block; width: 62px; margin: 14px 0 0; margin-inline-end: -10px; margin-inline-start: 12px; }
}