/* Direction 2, Paper strips: the M is woven from strips, so the studio is a craft table of paper strips.
   Fonts: Bricolage Grotesque + Nunito Sans (SIL OFL 1.1), self-hosted. Strips run at 38.2 degrees, the angle of the mark's diagonals. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-VF.ttf") format("truetype"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans-VF.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }

:root { --cream: #FFF3DC; --ink: #231F3A; --muted: #57516E; --indigo: #4F46E5; --marigold: #F6B026; --teal: #2BB596; --sky: #8FD0F5; --card: #FFFFFF; }
* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; color: var(--ink); background: var(--cream) url("assets/grain.png"); font-family: "Nunito Sans", system-ui, sans-serif; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--ink); color: #fff; padding: 10px 14px; }

.top { padding-top: 18px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand .m { width: 30px; color: var(--indigo); }
.brand .w { width: 240px; }
.brand svg, .card svg { display: block; width: 100%; height: auto; }

.hero { display: grid; gap: 8px; padding-bottom: 40px; }
.table { position: relative; height: 330px; margin: 0 -20px; }
.strip {
 position: absolute; left: 14%; width: 72%; height: 46px; border-radius: 3px;
 background-image: url("assets/grain.png");
 box-shadow: 0 1px 0 rgba(35,31,58,.10), 0 6px 14px rgba(35,31,58,.14);
}
.s1 { top: 26%; background-color: var(--indigo); transform: rotate(-38.2deg); }
.s2 { top: 46%; background-color: var(--marigold); transform: rotate(-38.2deg); }
.s3 { top: 34%; background-color: var(--teal); transform: rotate(38.2deg); }
.s4 { top: 56%; background-color: var(--sky); transform: rotate(38.2deg); height: 34px; }
.s5 { top: 66%; background-color: var(--indigo); transform: rotate(-38.2deg); height: 22px; opacity: .9; }
.card {
 position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; padding: 34px;
 background: var(--card); border-radius: 6px; color: var(--indigo);
 box-shadow: 0 2px 0 rgba(35,31,58,.08), 0 18px 34px rgba(35,31,58,.22);
}
.tape { position: absolute; left: 50%; top: -12px; width: 74px; height: 24px; margin-left: -37px; background: rgba(246,176,38,.75); transform: rotate(-4deg); border-radius: 2px; }

h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-stretch: 85%; font-size: 40px; line-height: 1.02; letter-spacing: -.02em; margin: 18px 0 0; font-variation-settings: "opsz" 72; }
.tag { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 8px 16px 8px 12px; background: var(--card); border-radius: 999px; font-weight: 700; font-size: 17px; box-shadow: 0 1px 0 rgba(35,31,58,.1), 0 4px 10px rgba(35,31,58,.08); }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--teal); }
.write { margin: 26px 0 0; font-weight: 700; color: var(--muted); }
.sticker { display: inline-block; margin-top: 8px; padding: 12px 18px; background: var(--marigold) url("assets/grain.png"); color: var(--ink); font-weight: 800; font-size: 20px; text-decoration: none; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 1px 0 rgba(35,31,58,.12), 0 6px 14px rgba(35,31,58,.16); overflow-wrap: anywhere; }
.sticker:hover, .sticker:focus-visible { transform: rotate(0) translateY(-2px); outline: 3px solid var(--ink); outline-offset: 3px; }

.foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 26px; width: calc(100% - 40px); max-width: calc(1280px - 112px); border-top: 2px dashed rgba(35,31,58,.25); color: var(--muted); font-size: 16px; }
.foot p { margin: 0; }
.foot a { color: var(--ink); font-weight: 700; padding: 12px 0; }

@media (min-width: 900px) {
 .wrap { padding: 0 56px; }
 .foot { width: calc(100% - 112px); padding-left: 0; padding-right: 0; }
 .top { padding-top: 28px; }
 .brand .m { width: 36px; } .brand .w { width: 280px; }
 .hero { grid-template-columns: 6fr 6fr; align-items: center; gap: 40px; min-height: 640px; padding-bottom: 60px; }
 .copy { order: -1; }
 .table { height: 620px; margin: 0; }
 .strip { left: 2%; width: 96%; }
 .strip { height: 78px; } .s4 { height: 54px; } .s5 { height: 34px; }
 .card { width: 300px; height: 300px; margin: -150px 0 0 -150px; padding: 60px; }
 .tape { width: 120px; height: 34px; margin-left: -60px; top: -16px; }
 h1 { font-size: 78px; }
 .sticker { font-size: 26px; padding: 14px 24px; }
}
/* motion idea (not in the mock): the strips are laid down one by one (0.7 s, 80 ms apart), skipped under prefers-reduced-motion */
.legal h1 { font-size: 40px; } .legal a { color: var(--ink); font-weight: 700; }

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 2026-11-10 trimmed page (Pratik: "cool it on the content"): logo table centred, email under it, grain to the bottom */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.copy { order: 0; }
.foot { box-sizing: border-box; margin-left: auto; margin-right: auto; gap: 16px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding-top: 10px; }
  .copy { order: 0; }
  .table { width: 620px; height: 560px; }
}
@media (max-width: 899px) {
  .table { justify-self: stretch; width: auto; }
  .foot { width: auto; margin: 0 20px; }
}

/* company name in the page font instead of the spaced wordmark (Pratik 2026-11-10) */
.wt { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }