/* ==========================================================================
   Kalash Jain: responsive layer
   Desktop/laptop: handled by responsive.js (scale-to-fit + centring).
   Phones / small tablets (<= 860px): the rules below reflow every page.
   Nothing here changes content, colours, type or behaviour: layout only.
   ========================================================================== */

html{background:#fff}
@media (max-width:860px){
  :root{--pad:18px}
  html:not([data-fit]){-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html:not([data-fit]),
  html:not([data-fit]) body{overflow-x:hidden;max-width:100%}
  html:not([data-fit]) body{width:auto!important;margin:0!important;zoom:1!important}
  html:not([data-fit]) .sc-host>div{width:100%!important;max-width:100%!important;height:auto!important;min-height:100vh;padding:16px var(--pad) 26px!important;box-sizing:border-box!important}
  html:not([data-fit]) header[style]{flex-wrap:wrap;gap:8px 12px;align-items:center}
  html:not([data-fit]) header[style] .sig{width:104px!important;height:28px!important}
  html:not([data-fit]) header[style]>a{flex:0 0 auto}
  html:not([data-fit]) header[style] nav{gap:12px!important;font-size:10px!important;flex-wrap:nowrap;white-space:nowrap;letter-spacing:.05em}
  html:not([data-fit]) [style*="repeat(12"]{grid-template-columns:minmax(0,1fr)!important;row-gap:22px!important;column-gap:0!important}
  html:not([data-fit]) [style*="repeat(12"]>*{grid-column:1/-1!important}
  html:not([data-fit]) footer[style]{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;font-size:12px!important;padding-top:18px!important;margin-top:28px!important}
  html:not([data-fit]) footer[style]>*{height:auto!important;min-height:0!important}
  html:not([data-fit]) .mk-marquee:not(.mk-rev){font-size:42px!important;padding:14px 0!important}
  html:not([data-fit]) h1[style]{font-size:clamp(46px,15.5vw,92px)!important;line-height:.98!important;letter-spacing:-.01em}
  html:not([data-fit]) header+section[style]{padding-top:34px!important}
  html:not([data-fit]) section[style*="padding-top: 96px"]{padding-top:44px!important}
  html:not([data-fit]) section[style*="gap: 96px"]{gap:52px!important}
  html:not([data-fit]) section[style*="padding-bottom: 96px"]{padding-bottom:40px!important}
  html:not([data-fit]) section[style*="justify-content: space-between"][style*="display: flex"]{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
  html:not([data-fit]) section[style*="justify-content: space-between"]>p{max-width:none!important}
  html:not([data-fit]) nav[aria-label][style*="border-top"]{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
  html:not([data-fit]) nav[aria-label][style*="border-top"]::-webkit-scrollbar{display:none}
  html:not([data-fit]) nav[aria-label][style*="border-top"] button{white-space:nowrap;flex:0 0 auto}
  html:not([data-fit]) img,
  html:not([data-fit]) video,
  html:not([data-fit]) canvas,
  html:not([data-fit]) svg{max-width:100%}
}

/* ---------------------------------------------------------------- HOME */
@media (max-width:860px){
  html[data-page=Main] #content{padding-top:22px!important;padding-bottom:30px!important;gap:18px!important}
  html[data-page=Main]{--figw:58vw}
  html[data-page=Main] #content>div[style*="height: 740px"]{height:calc(var(--figw)*2.2222 + 14px)!important}
  html[data-page=Main] #content>div[style*="height: 740px"]>div[style*="position: absolute"]{justify-content:flex-start!important;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;bottom:0;top:auto;height:calc(var(--figw)*2.2222)!important}
  html[data-page=Main] #content>div[style*="height: 740px"]>div[style*="position: absolute"]::-webkit-scrollbar{display:none}
  html[data-page=Main] .hi-fig{flex:0 0 var(--figw)!important;width:var(--figw)!important;height:calc(var(--figw)*2.2222)!important;scroll-snap-align:start}
  html[data-page=Main] h1 .sig-w{height:26vw!important}
  html[data-page=Main] .hi-fade{flex-direction:column!important;align-items:flex-start!important;gap:10px}
  html[data-page=Main] .hi-fade p{max-width:none!important}
  html[data-page=Main] .mk-row{grid-template-columns:30px minmax(0,1fr) auto!important;row-gap:8px;padding:18px 0!important;align-items:baseline}
  html[data-page=Main] .mk-row>span:nth-child(1){grid-column:1;grid-row:1}
  html[data-page=Main] .mk-row>span:nth-child(2){grid-column:2/4;grid-row:1;font-size:38px!important}
  html[data-page=Main] .mk-row>span:nth-child(3){grid-column:2;grid-row:2}
  html[data-page=Main] .mk-row>span:nth-child(4){grid-column:3;grid-row:2}
  html[data-page=Main] section[style*="repeat(12"]{row-gap:26px!important}
  html[data-page=Main] section[style*="repeat(12"]>div:nth-child(2){max-width:420px}
}

/* --------------------------------------------------------------- CARDS */
@media (max-width:860px){
  html[data-page=Cards]{--s:min(.95,calc(.56*var(--k,1)))}
  html[data-page=Cards] section[style*="flex-end"]{flex-grow:0!important;justify-content:flex-start!important;padding-bottom:0!important;margin-top:8px}
  html[data-page=Cards] .deck{flex:0 0 auto;transform:translateX(calc(-54px*var(--s))) scale(var(--s));transform-origin:50% 0;margin-bottom:calc(-740px*(1 - var(--s)) + 8px)}
}

/* ------------------------------------------------------- PDF VIEWERS */
@media (max-width:860px){
  html[data-page=GSViewer] section[style*="border-top"]>div:first-child,
  html[data-page=VWViewer] section[style*="border-top"]>div:first-child{flex-wrap:wrap!important;justify-content:center!important;gap:14px 18px!important;width:100%!important}
  html[data-page=GSViewer] div.pv-pages,
  html[data-page=VWViewer] div.pv-pages{order:-1;flex:0 0 100%!important;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:1100/778}
  html[data-page=GSViewer] section[style*="border-top"]>div:last-child,
  html[data-page=VWViewer] section[style*="border-top"]>div:last-child{max-width:100%!important;width:100%!important}
}

/* ------------------------------------------------------------ PROJECT */
@media (max-width:860px){
  html[data-page=Project] div[style*="gap: 28px"][style*="align-items: center"]{gap:10px!important;width:100%;justify-content:space-between}
  html[data-page=Project] div[style*="gap: 28px"] button[aria-label]{width:40px!important;height:40px!important;flex:0 0 auto}
  html[data-page=Project] div[role="img"][style*="height: 620px"]{width:min(300px,calc(100vw - 150px))!important;height:calc(min(300px,calc(100vw - 150px))*2.0667)!important}
}

/* --------------------------------------------- NEXT PROJECT + MISC */
@media (max-width:860px){
  html:not([data-fit]) div[style*="justify-content: space-between"][style*="padding: 48px 0"]{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:30px 0!important}
  html:not([data-fit]) div[style*="padding: 48px 0"]>a[style*="font-size: 72px"]{font-size:clamp(34px,11vw,56px)!important;max-width:100%;overflow-wrap:anywhere}
  html:not([data-fit]) a[style*="Instrument"],html:not([data-fit]) p,html:not([data-fit]) h2,html:not([data-fit]) h3{overflow-wrap:break-word}
}

@media (max-width:860px){
  html:not([data-fit]) div:has(>span+a[style*="font-size: 72px"]){flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:30px 0!important}
  html:not([data-fit]) div>a[style*="font-size: 72px"]{font-size:clamp(34px,11vw,56px)!important;max-width:100%;overflow-wrap:anywhere}
}

/* ------------- BOARD + COVER FRAMES: real proportions on phones ------------- */
@media (max-width:860px){
  html:not([data-fit]) .mk-frame:has(>.gs-cover){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gs-moodstill){height:auto!important;aspect-ratio:900 / 471;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gsb-concept){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gsb-cover){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gsb-fabric){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gsb-hardware){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gsb-mood){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.gsb-print){height:auto!important;aspect-ratio:1600 / 1131;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.ob-colour){height:auto!important;aspect-ratio:2000 / 1413;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.ob-fabric){height:auto!important;aspect-ratio:2000 / 1415;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.ob-mood){height:auto!important;aspect-ratio:2000 / 1415;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.ob-trim){height:auto!important;aspect-ratio:2000 / 1417;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.vw-colour){height:auto!important;aspect-ratio:2400 / 3110;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.vw-cover){height:auto!important;aspect-ratio:2400 / 3110;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.vw-fabric){height:auto!important;aspect-ratio:2400 / 3110;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.vw-mood){height:auto!important;aspect-ratio:2400 / 3110;position:relative;width:100%}
  html:not([data-fit]) .mk-frame:has(>.vw-trim){height:auto!important;aspect-ratio:2400 / 3110;position:relative;width:100%}
  html:not([data-fit]) .mk-frame>.mk-zoom[role="img"]{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important}
  /* boards: one per row, full width, so every board is clearly readable */
  html:not([data-fit]) div[style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
  html:not([data-fit]) div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"]{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  /* portfolio cover: keep proportion, sensible width */
  html:not([data-fit]) .mk-frame.mk-up:has(>.gs-cover),
  html:not([data-fit]) .mk-frame.mk-up:has(>.vw-cover){max-width:340px}
}

/* ------------- FOOTER: always one tidy horizontal block on phones ------------- */
@media (max-width:860px){
  html:not([data-fit]) footer[style]{flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 14px!important;font-size:10px!important;letter-spacing:.04em!important;text-align:center!important;padding-top:16px!important;margin-top:26px!important}
  html:not([data-fit]) footer[style]>*{white-space:nowrap;flex:0 0 auto}
  html:not([data-fit]) footer[style] .sig{width:62px!important;height:18px!important;vertical-align:-4px!important}
  html:not([data-fit]) footer[style]>span[style*="display: flex"]{gap:5px!important}
  html:not([data-fit]) footer[style] a[href*="Terms"]{margin-left:10px!important}
}

/* boards grids: one board per row on phones (matches however the browser writes the style) */
@media (max-width:860px){
  html:not([data-fit]) div[style*="grid-template-columns: repeat(3,"],
  html:not([data-fit]) div[style*="grid-template-columns: repeat(4,"]{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}
  html:not([data-fit]) figure.mk-up figcaption,html:not([data-fit]) figure.mk-up2 figcaption,html:not([data-fit]) figure.mk-up3 figcaption{font-size:13px!important}
}

@media (max-width:860px){
  html:not([data-fit]) .mk-frame{position:relative}
}

/* ======================= v3 refinements (phones) ======================= */
@media (max-width:860px){
  /* Vivienne Westwood PDF viewer: pages are A4 PORTRAIT (600 x 842), not landscape */
  html[data-page=VWViewer] div.pv-pages{aspect-ratio:600 / 842!important;flex:0 0 100%!important;width:100%!important;max-width:380px!important;height:auto!important;margin:0 auto!important}

  /* About: smaller, calmer portrait */
  html[data-page=About] .portrait{height:auto!important;aspect-ratio:4 / 5;width:min(230px,64%)!important;justify-self:start}

  /* Project details (Year / Type / Looks / Medium ...): compact single-line rows */
  html[data-page=GradShow] div:has(>div[style*="grid-column: span 2"]),
  html[data-page=Vivienne] div:has(>div[style*="grid-column: span 2"]),
  html[data-page=Project] div:has(>div[style*="grid-column: span 2"]){row-gap:0!important;font-size:11.5px!important;line-height:1.5!important;padding-top:10px!important}
  html[data-page=GradShow] div:has(>div[style*="grid-column: span 2"])>div[style*="grid-column: span 2"],
  html[data-page=Vivienne] div:has(>div[style*="grid-column: span 2"])>div[style*="grid-column: span 2"],
  html[data-page=Project] div:has(>div[style*="grid-column: span 2"])>div[style*="grid-column: span 2"]{display:flex!important;justify-content:space-between;align-items:baseline;gap:18px;padding:9px 0;border-bottom:1px solid rgba(18,18,18,.14)}
  html[data-page=GradShow] div:has(>div[style*="grid-column: span 2"])>div[style*="grid-column: span 2"]>div:last-child,
  html[data-page=Vivienne] div:has(>div[style*="grid-column: span 2"])>div[style*="grid-column: span 2"]>div:last-child,
  html[data-page=Project] div:has(>div[style*="grid-column: span 2"])>div[style*="grid-column: span 2"]>div:last-child{text-align:right;min-width:0}
  html[data-page=GradShow] div:has(>div[style*="grid-column: span 2"])>p,
  html[data-page=Vivienne] div:has(>div[style*="grid-column: span 2"])>p,
  html[data-page=Project] div:has(>div[style*="grid-column: span 2"])>p{margin-top:18px!important;font-size:14px!important}
}