/* Resources page (Milestone 7), built to the approved Resources desktop and mobile boards (Y-R2).
   Tokens and shell come from tokens.css / shell.css. Nothing here is loaded by other pages.
   Tablet (700-1099px) is an interpolation of the two approved boards; the separate tablet board was a recommendation, not a selected design. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.theme-dark main{background:var(--ink)}
.rs-hero h1,.rs-start h2,.rs-cta h2{font-family:var(--font-display);font-weight:800;font-stretch:125%;letter-spacing:0;margin:0;text-wrap:balance}
.rs-light{background:var(--warm);color:var(--ink)}
.rs-light :focus-visible,.rs-cta :focus-visible{outline-color:var(--ink)}
.rs-br{position:absolute;width:18px;height:18px;border:0 solid var(--warm);z-index:3;pointer-events:none}
.rs-br--dim{border-color:#3a3a3c}
.rs-br-tl{top:12px;left:12px;border-width:2px 0 0 2px}.rs-br-tr{top:12px;right:12px;border-width:2px 2px 0 0}
.rs-br-bl{bottom:12px;left:12px;border-width:0 0 2px 2px}.rs-br-br{bottom:12px;right:12px;border-width:0 2px 2px 0}

/* ---------- 1. hero and catalogue (dark) ---------- */
.rs-hero{background:var(--ink);color:var(--warm);padding-block:var(--s6) var(--s7)}
.rs-hero-top{display:flex;flex-direction:column;gap:var(--s5)}
.rs-eyebrow{color:var(--lime)}
.rs-hero h1{margin-top:var(--s3);font-size:clamp(38px,calc(38px + 30 * (100vw - 390px) / 1050),68px);line-height:1.04;text-wrap:wrap}
.rs-lead{margin:0;color:var(--grey);font-size:17px;line-height:1.55;max-width:44ch}
.rs-catalogue{margin-top:var(--s7)}
.rs-cat-head{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.rs-cat-label{margin:0;color:var(--grey)}
.rs-cat-status{margin:0;color:var(--warm)}
.rs-areas{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
.rs-area{border-top:1px solid #3a3a3c;padding-top:var(--s4);display:flex;flex-direction:column;gap:14px;min-width:0}
.rs-area p,.rs-area h3{margin:0}
.rs-area-n{color:var(--lime)}
.rs-area-count{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(72px,calc(72px + 56 * (100vw - 390px) / 1050),128px);line-height:.9;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--warm)}
.rs-area-t{font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.rs-area-d{margin-top:6px!important;color:var(--grey);font-size:14px;line-height:1.45}

/* ---------- 2. start here (light) ---------- */
.rs-start{padding-block:var(--s7) 44px}
.rs-start-eyebrow{color:var(--ink);margin:0}
.rs-start h2{margin-top:var(--s4);font-size:clamp(30px,calc(30px + 16 * (100vw - 390px) / 1050),46px);line-height:1.08;max-width:18ch}
.rs-cards{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.rs-card-link{display:block;color:var(--ink);text-decoration:none}
.rs-card-art{position:relative;aspect-ratio:350/230;overflow:hidden;background:var(--ink)}
.rs-card--work .rs-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.rs-art-tag{position:absolute;left:30px;bottom:18px;color:var(--warm);z-index:3}
.rs-card--studio .rs-card-art{display:grid;place-items:center}
.rs-card-sym{width:50%;color:var(--lime);height:auto;aspect-ratio:var(--sym-ratio)}
.rs-card-body{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-top:18px}
.rs-card-t{margin:0;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:19px;line-height:1.15}
.rs-card-d{margin:8px 0 0;font-size:16px;line-height:1.5;color:#55524c}
.rs-card-body .arrow{flex:none;margin-top:2px;transition:transform var(--m-fast) var(--ease)}
.rs-card-link:hover .arrow{transform:translate(4px,-4px)}
.rs-card-link:hover .rs-card-t,.rs-card-link:focus-visible .rs-card-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.rs-card-link:focus-visible{outline-offset:6px}

/* mosaic: three genuine stills over two illustrative format studies (never client work) */
.rs-mosaic{position:absolute;inset:0;background:var(--warm);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:71fr 155fr;gap:4px}
.rs-tile{position:relative;overflow:hidden;min-width:0;min-height:0}
.rs-tile--motion,.rs-tile--3d,.rs-tile--ai{grid-column:span 2}
.rs-tile--graphic,.rs-tile--brand{grid-column:span 3}
.rs-tile img{width:100%;height:100%;object-fit:cover;display:block}
.rs-chip{position:absolute;left:8px;bottom:6px;max-width:calc(100% - 16px);z-index:2;font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.35;color:var(--warm);background:rgba(10,10,11,.78);padding:2px 5px}
.rs-chip b{font-weight:500;color:var(--lime)}
.rs-art-graphic,.rs-art-brand{position:absolute;inset:0}
.rs-art-graphic{background:var(--ink)}
.rs-art-brand{background:#151517}
.rs-art-graphic span,.rs-art-brand span{position:absolute;display:block}
.rs-g-frame{left:8%;top:12%;width:40%;height:30%;border:1.5px solid var(--warm)}
.rs-g-bar{left:55%;top:10%;width:17%;height:38%;background:var(--lime)}
.rs-g-box{left:78%;top:12%;width:14%;height:30%;border:1px solid #5a5a5c}
.rs-g-word{left:8%;top:54%;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(14px,3.6vw,26px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--warm)}
.rs-b-sq{left:8%;top:14%;width:34%;height:40%;border:1.5px solid var(--warm)}
.rs-b-sq2{left:13.5%;top:22%;width:23%;height:27%;border:1px dashed var(--lime)}
.rs-b-aa{left:49%;top:10%;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(22px,4.4vw,41px);line-height:1;color:var(--warm)}
.rs-art-brand .rs-b-sw{left:49%;top:40%;display:flex;gap:3px}
.rs-b-sw i{display:block;width:clamp(6px,1vw,9px);height:clamp(14px,2.3vw,21px)}
.rs-b-sw i:nth-child(1){background:var(--warm)}.rs-b-sw i:nth-child(2){background:var(--grey)}.rs-b-sw i:nth-child(3){background:#5a5a5c}.rs-b-sw i:nth-child(4){background:var(--graphite)}.rs-b-sw i:nth-child(5){background:var(--lime)}

/* ---------- 3. closing call to action (lime) ---------- */
.rs-cta{background:var(--lime);color:var(--ink);padding-block:44px 40px}
.rs-cta-row{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center}
.rs-cta h2{font-size:clamp(32px,calc(32px + 20 * (100vw - 390px) / 1050),52px);line-height:1.06}
.rs-cta-row .btn{width:100%;min-height:64px;font-size:18px;padding-inline:24px}
.rs-cta-from{margin-top:36px}
.rs-cta-from p{margin:0}
.rs-cta-from ul{list-style:none;margin:10px 0 0;padding:0;border-bottom:1px solid var(--ink)}
.rs-cta-from li{border-top:1px solid var(--ink)}
.rs-cta-from a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink)}
.rs-cta-from a:hover .rs-ch-full,.rs-cta-from a:hover .rs-ch-short{text-decoration:underline;text-underline-offset:4px}
.rs-ch-short{display:none}

/* ---------- tablet ---------- */
@media (min-width:700px){
  .rs-hero{padding-block:var(--s7) var(--s8)}
  .rs-areas{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
  .rs-area-t{font-size:17px}
  .rs-cta-row .btn{width:auto}
  .rs-cta-row{grid-template-columns:1fr auto}
  .rs-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
  .rs-card--disciplines{grid-column:auto}
}
@media (max-width:1099.98px) and (min-width:700px){.rs-areas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .rs-hero h1{letter-spacing:-.02em}
  .rs-hero{padding-block:var(--s8) var(--s8)}
  .rs-lead{font-size:19px}
  .rs-catalogue{margin-top:var(--s9)}
  .rs-areas{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .rs-area{padding-top:20px}
  .rs-area-t{font-size:19px}
  .rs-area-d{font-size:15px}
  .rs-start{padding-block:var(--s9)}
  .rs-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:var(--s8)}
  .rs-card-art{aspect-ratio:416/300}
  .rs-mosaic{grid-template-rows:85fr 211fr}
  .rs-card-t{font-size:22px}
  .rs-card-body .arrow{width:22px;height:22px}
  .rs-cta{padding-block:var(--s8)}
  .rs-cta-row .btn{min-height:76px;font-size:20px;padding-inline:44px}
  .rs-cta-from{margin-top:var(--s8);padding-top:16px;border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
  .rs-cta-from ul{margin:0;border:0;display:flex;gap:30px}
  .rs-cta-from li{border:0}
  .rs-cta-from a{min-height:44px;gap:var(--s2);font-size:15px;border-bottom:1px solid var(--ink)}
  .rs-cta-from .arrow{width:14px;height:14px}
  .rs-ch-short{display:inline}
  .rs-ch-full{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:1200px){
  .rs-hero-top{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:60px}
  .rs-hero-head{max-width:800px}
  .rs-lead{flex:0 0 430px}
}