/* ==========================================================================
   Arch: homepage feature and /work/arch case study.
   Builds on main.css tokens (--ink, --lineD, --mono, --display ...) and its
   .reveal motion; nothing here hides content when motion is off.
   ========================================================================== */

/* Device frames ---------------------------------------------------------- */
.device{border:1px solid var(--lineD);border-radius:12px;overflow:hidden;background:var(--ink2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.device .frame{border-radius:0;height:30px;background:var(--ink3)}
.device img{width:100%;height:auto;display:block}
.light .device,.soft .device{border-color:#C9CBCA;box-shadow:0 30px 70px rgba(11,12,12,.18)}
.phone-frame{border:6px solid #2A2C2C;border-radius:30px;overflow:hidden;background:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.phone-frame img{width:100%;height:auto;display:block}
.paper{background:var(--white);box-shadow:0 24px 70px rgba(0,0,0,.35);border-radius:4px;overflow:hidden}
.paper img{width:100%;height:auto;display:block}
.light .paper,.soft .paper{border:1px solid var(--rule);box-shadow:0 24px 60px rgba(11,12,12,.12)}

/* Homepage feature -------------------------------------------------------- */
.arch-feature{border-top:1px solid var(--lineD);overflow:hidden}
.arch-feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.arch-feature .head{margin-bottom:0}
.arch-points{list-style:none;margin:28px 0 32px;padding:0;border-top:1px solid var(--lineD)}
.arch-points li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--lineD);color:var(--light);font-size:15px}
.arch-points li::before{content:"";flex:none;width:14px;height:1lh;background-color:var(--muteD);-webkit-mask:var(--ico-right-thin) center/14px no-repeat;mask:var(--ico-right-thin) center/14px no-repeat}
.arch-live{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--muteD);text-decoration:none}
.arch-live:hover{color:var(--white)}
.arch-live .dot{background:#3FB37F;margin-right:0}
.arch-media{position:relative;padding:0 0 clamp(28px,4vw,48px) 0}
.arch-media .phone-frame{position:absolute;right:clamp(-8px,-1vw,0px);bottom:0;width:clamp(110px,15vw,190px)}
.arch-note{margin:14px 0 0;font-size:12px;color:var(--muteD)}

/* Case study hero -------------------------------------------------------- */
.arch-hero{padding-block:clamp(48px,7vw,96px) clamp(48px,6vw,80px);overflow:hidden}
.arch-hero h1{font-size:clamp(64px,11vw,168px);line-height:.85;font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em;margin:18px 0 0 -.04em}
.arch-expansion{margin:18px 0 0;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muteD)}
.arch-hero .promise{max-width:56ch;margin:22px 0 26px}
.arch-hero .client{margin-bottom:32px}
.arch-hero-shot{margin-top:clamp(40px,6vw,72px)}

/* Three-column story ----------------------------------------------------- */
.arch-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.arch-cols>div{border-top:1px solid var(--rule);padding-top:20px}
.arch-cols h3{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--mute)}
.arch-cols p{margin:0;color:var(--body)}

/* Principles -------------------------------------------------------------- */
.arch-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.arch-principle{border:1px solid var(--lineD);padding:24px;min-width:0}
.arch-principle .n{font:500 12px var(--mono);color:var(--muteD);letter-spacing:.08em}
.arch-principle h3{font-size:20px;line-height:1.1;font-weight:700;margin:18px 0 10px}
.arch-principle p{margin:0;color:var(--muteD);font-size:15px}

/* Feature tour ------------------------------------------------------------ */
.arch-tour{display:grid;gap:clamp(64px,9vw,128px)}
.arch-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:center}
.arch-row:nth-child(even){grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.arch-row:nth-child(even) .arch-row-media{order:2}
.arch-row-media.is-document{max-width:520px;width:100%;justify-self:center}
.arch-row-copy .label{margin-bottom:14px}
.arch-row-copy h3{font-size:clamp(24px,2.6vw,34px);line-height:1.06;font-weight:700;margin-bottom:14px}
.arch-row-copy p{margin:0;color:var(--body);font-size:16px;max-width:46ch}

/* Phone row ---------------------------------------------------------------- */
.arch-phones{display:grid;grid-template-columns:repeat(3,minmax(0,260px));justify-content:center;gap:clamp(16px,3vw,40px)}
.arch-phones .phone-frame:nth-child(2){transform:translateY(clamp(16px,3vw,40px))}

/* Foundations -------------------------------------------------------------- */
.arch-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.arch-card{background:var(--white);border:1px solid var(--rule);padding:24px;min-width:0}
.arch-card h3{font-size:19px;line-height:1.15;font-weight:700;margin-bottom:10px}
.arch-card p{margin:0;color:var(--body);font-size:15px}

/* What's next --------------------------------------------------------------- */
.arch-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.arch-next h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 28px}
.arch-next ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--lineD)}
.arch-next li{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--lineD);color:var(--light)}
.arch-next li::before{content:"";flex:none;width:14px;height:1lh;background-color:var(--muteD);-webkit-mask:var(--ico-right-thin) center/14px no-repeat;mask:var(--ico-right-thin) center/14px no-repeat}
.arch-closing{border:1px solid var(--lineD);padding:clamp(24px,3vw,36px)}
.arch-closing h3{font-size:clamp(24px,2.6vw,32px);line-height:1.08;font-weight:700;margin-bottom:22px}
.arch-closing .cta{margin-bottom:18px}

/* Responsive ---------------------------------------------------------------- */
@media (max-width:1100px){
  .arch-principles,.arch-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .arch-feature-grid,.arch-row,.arch-row:nth-child(even),.arch-next{grid-template-columns:1fr}
  .arch-row:nth-child(even) .arch-row-media{order:0}
  .arch-cols{grid-template-columns:1fr}
}
@media (max-width:600px){
  .arch-principles,.arch-cards{grid-template-columns:1fr}
  .arch-phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .arch-phones .phone-frame{border-width:4px;border-radius:18px}
  .arch-media .phone-frame{width:96px;border-width:4px;border-radius:18px}
  .device .frame{height:22px}
}