/*
 * METASYS / UNIFIED RESPONSIVE LAYOUT — v1
 *
 * One rectangular corner language across public / commerce / committee.
 * Fluid grid > 1100px desktop, 700–1100px tablet, <= 700px compact,
 * <= 480px narrow mobile. Component widths are explicitly constrained
 * instead of forcing desktop-sized layouts into narrow screens.
 *
 * Stacks after original styles.css and midnight design-system.css so the
 * site preserves all existing working vanilla-JS business markup.
 */

/* 01 — CONSISTENT RECTANGULAR CORNERS */
:root{
 --radius-ui:12px;
 --radius-sm:var(--radius-ui);
 --radius-md:var(--radius-ui);
 --radius-lg:var(--radius-ui);
 --radius-2xl:var(--radius-ui);
 --radius-3xl:var(--radius-ui);
 --radius-full:var(--radius-ui);
 --radius-cards:var(--radius-ui);
 --radius-badges:var(--radius-ui);
 --radius-inputs:var(--radius-ui);
 --radius-modals:var(--radius-ui);
 --radius-buttons:var(--radius-ui);
 --layout-gutter:clamp(16px,3.4vw,48px);
 --layout-gap:clamp(16px,2.5vw,32px);
 --layout-section-space:clamp(64px,8.2vw,112px);
 --layout-card-pad:clamp(18px,2.1vw,28px);
 --layout-line:rgba(186,215,247,.16);
}
#app :is(
 .project-card,.designer-card,.category-card,.sponsor-opps>div,.sponsor-form,.sponsor-feature-media,
 .wf-empty,.wf-partner-mark,.catalogue-empty,.empty,.showcase-empty,.portfolio-public-share,
 .meta-dash-metrics>div,.meta-dash-sidebar,.portfolio-workspace,.portfolio-drop,
 .portfolio-project-row,.portfolio-project-thumb,.portfolio-checklist,.portfolio-no-projects,
 .portfolio-avatar-preview,.portfolio-image-preview,.portfolio-gallery-preview img,
 .portfolio-review-cover,.portfolio-preview-modal,.meta-crop-dialog,.meta-crop-stage,
 .meta-admin-section,.sponsor-admin,.admin-access-panel,.admin-access-row,
 .event-panel,.event-camera,.event-sandbox-status,.event-production-status,
 .event-scan-result,.event-stat-row>div,.event-party-summary,.event-pass-qr,
 .event-camera-state,.event-file-button,.event-recovery,.event-guest-row,
 .merch-product,.merch-image,.merch-no-image,.merch-cart,.merch-empty,
 .merch-admin-product,.merch-admin-note,.merch-admin-order,.merch-order-status,
 .merch-receipt,.merch-mode,#merch-order-detail,.merch-add-variant,
 .meta-signin-panel,.demo-site-banner,.toast,
 .button,.filter-pill,.badge,.status-chip,.menu-toggle,.meta-logout,
 .portfolio-public-share,.admin-category-nav button,.meta-dash-sidebar>button,
 .merch-qty button,.merch-remove,.portfolio-preview-toolbar button,
 .meta-crop-controls button,.meta-crop-footer button,.meta-crop-head button,
 .sponsor-inquiry-actions button,.event-staff-row button,.metasys-checkbox-label
){border-radius:var(--radius-ui)}
#app :is(
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
 textarea,select
){border-radius:var(--radius-ui)}
#app :is(.form-control input,.form-control select,.form-control textarea,
 .event-panel input,.event-panel select,.event-admin-grid input,.event-admin-grid select,
 .merch-admin label input,.merch-admin label textarea,
 .merch-variant-label select,#merch-checkout-form input,
 .filter-input,.event-gate-tools select,.portfolio-review-actions textarea
){border-radius:var(--radius-ui)}
#app .project-media,#app .designer-photo,#app .merch-product>.merch-image{
 border-radius:var(--radius-ui) var(--radius-ui) 0 0;
}
#app .merch-product .merch-image{border-radius:var(--radius-ui) var(--radius-ui) 0 0}
#app .portfolio-person-photo,#app .merch-receipt-items img{
 border-radius:var(--radius-ui);
}
/* Keep round geometry for intentionally circular status dots, hero orbits
   and radio buttons. Square native checkbox tick boxes are not cards. */
#app input[type="checkbox"]{border-radius:4px}
#app input[type="radio"]{border-radius:50%}
#app :is(.wf-hero-orbit,.wf-hero-glow){border-radius:50%}
#app .status-chip::before{border-radius:50%}
#app .metasys-checkbox-label.metasys-checkbox-card,
#app .event-checkbox.metasys-checkbox-label,
#app .merch-admin .metasys-checkbox-label{border-radius:var(--radius-ui)}
#app .logo .wordmark-glyph{border-radius:var(--radius-ui)}
#app .button{min-height:44px;padding-inline:18px;white-space:normal;max-width:100%}
#app :is(.button,.meta-logout,.admin-category-nav button){font-variant-numeric:tabular-nums}
#app :is(.button,.filter-pill,.nav-link,.meta-dash-sidebar>button){
 -webkit-tap-highlight-color:transparent;
}
#app :is(button,a,input,textarea,select,summary):focus-visible{
 outline:2px solid #98c0ef;outline-offset:3px;
}

/* 02 — FLUID PAGE GRID, MEANINGFUL TYPE HIERARCHY */
html{scroll-padding-top:80px}
body{overflow-x:clip}
#app{min-width:0;max-width:100%;overflow:visible}
#app #main{min-width:0;width:100%;max-width:100%}
#app .container,#app .nav-inner{
 width:min(var(--page-max-width),calc(100% - (var(--layout-gutter) * 2)));
 max-width:100%;margin-inline:auto;
}
#app :is(.container,.meta-dash-content,.meta-admin-grid,.admin-tab-panel,
 .event-layout,.event-panel,.event-gate-grid,.merch-layout,.merch-products,
 .merch-product-grid,.merch-admin-grid,.portfolio-case-cols,.portfolio-editor-fields,
 .sponsor-split,.sponsor-contact-grid,.page-hero,.portfolio-workspace
){min-width:0}
#app :is(p,h1,h2,h3,h4,small,strong,span){overflow-wrap:break-word}
#app :is(.event-code,.merch-order-meta strong,.portfolio-project-info h4,.admin-access-row strong){
 overflow-wrap:anywhere;
}
#app :is(.page-space,.sponsor-section,.portfolio-person-work,.portfolio-public-hero){
 padding-block:var(--layout-section-space);
}
#app :is(.page-hero,.sponsor-hero){padding-block:clamp(72px,8vw,116px) clamp(42px,6vw,90px)}
#app .page-hero .h-page,#app .sponsor-hero h1{
 font-size:clamp(46px,7.6vw,100px);line-height:1.02;
}
#app .page-lead{max-width:62ch;font-size:clamp(15px,1.45vw,18px)}
#app :is(.section-heading,.meta-dash-head,.merch-heading){
 gap:clamp(16px,3vw,38px);
}
#app :is(.section-heading h2,.meta-sec-heading h2){
 font-size:clamp(32px,4.4vw,56px);
 line-height:1.1;
}
#app .event-page{padding-block:clamp(48px,6vw,95px)}
#app .merch-page{padding-block:clamp(54px,7vw,105px)}
#app .meta-dashboard{padding-block:clamp(45px,6vw,88px)}
#app .meta-dash-head h1{font-size:clamp(36px,4.5vw,60px)}
#app .meta-signin{padding-block:clamp(60px,8vw,118px)}
#app .meta-signin-inner{min-width:0}
#app .meta-signin-panel{width:min(100%,680px);max-width:100%;padding:var(--layout-card-pad)}
#app img,#app video,#app canvas,#app svg{max-width:100%}
#app :is(.project-card,.designer-card,.merch-product,.meta-admin-section,.event-panel,.portfolio-workspace){
 min-width:0;
}
#app .toast{width:max-content;max-width:min(92vw,580px);overflow-wrap:anywhere}

/* 03 — COMPACT HEADER AND RESPONSIVE MOBILE NAV */
#app .site-nav{position:sticky;top:0;z-index:70}
#app .nav-inner{height:68px;display:flex;gap:clamp(10px,2vw,28px);min-width:0}
#app .nav-links{margin-left:0;gap:clamp(10px,1.4vw,20px);min-width:0}
#app .nav-end{flex:0 0 auto;gap:clamp(8px,1.2vw,16px)}
#app .logo{flex:0 0 auto;white-space:nowrap}
#app .nav-link{font-size:12px;white-space:nowrap}
#app .nav-sponsor{min-height:38px;padding:9px 12px}
#app .studio-link{font-size:12px}
#app .menu-toggle{align-items:center;justify-content:center;min-height:44px;padding:9px 14px}
#app .nav-links.open{box-shadow:0 25px 50px rgba(0,0,0,.55)}

/* 04 — HOME, COLLECTIONS AND PUBLIC CASE STUDIES */
/* The previous hero had flex:1 on .wf-hero-inner, which made the
   1200px centered .container expand to full viewport width on desktop.
   A grid wrapper + a width-constrained grid item fix the clipping at x=0. */
#app .wf-hero--immersive{
 display:grid;
 grid-template-columns:minmax(0,1fr);
 width:100%;
 min-height:clamp(650px,calc(100svh - 68px),860px);
 border-radius:0;
 overflow:hidden;
}
#app .wf-hero-backdrop{inset:0;border-radius:0}
#app .wf-hero-inner{
 box-sizing:border-box;
 flex:none;
 align-self:stretch;
 justify-self:center;
 width:min(var(--page-max-width),calc(100% - (var(--layout-gutter) * 2)));
 max-width:100%;
 min-width:0;
 margin-inline:auto;
 padding:clamp(60px,9svh,105px) 0 25px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 border-radius:0;
}
#app .wf-hero-copy{
 width:100%;max-width:790px;min-width:0;
 position:relative;z-index:1;
}
#app .wf-hero h1{
 font-size:clamp(52px,6.1vw,101px);
 line-height:1.025;letter-spacing:-.068em;
 margin:clamp(18px,2vw,26px) 0 clamp(22px,2.5vw,30px);
 width:100%;max-width:100%;text-wrap:initial;
}
#app .wf-hero-title-line{
 display:block;
 white-space:nowrap;
 max-width:100%;
}
#app .wf-hero p{
 font-size:clamp(15px,1.2vw,18px);
 max-width:490px;line-height:1.64;margin:0 0 25px;
}
#app .wf-hero .eyebrow{font-size:11px;letter-spacing:.13em}
#app .wf-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:11px}
#app .wf-hero .hero-actions .button{border-radius:var(--radius-ui);min-height:44px}
#app .wf-hero .hero-under{
 width:100%;flex-wrap:wrap;gap:10px;margin-top:40px;
 padding-top:18px;
}
/* Atmosphere remains section background, never a framed image or logo. */
#app .wf-hero-backdrop{
 background:
 radial-gradient(ellipse 54% 67% at 80% 48%,rgba(112,147,207,.23),transparent 73%),
 radial-gradient(ellipse 55% 60% at 85% 9%,rgba(88,79,177,.12),transparent 75%),
 linear-gradient(125deg,#05060f 12%,#0b1020 58%,#0b1223 100%);
}
#app .wf-hero-backdrop::after{
 background:linear-gradient(90deg,#05060f 0%,rgba(5,6,15,.83) 27%,rgba(5,6,15,.27) 72%,rgba(5,6,15,.09) 100%),
 linear-gradient(0deg,rgba(5,6,15,.46) 0%,transparent 22%);
}
#app .wf-hero-sculpture{opacity:.18;right:-9%;top:10%;width:57%;height:85%}
#app .wf-hero-orbit--inner{opacity:.69}
#app .wf-hero-orbit--outer{opacity:.53}
#app .project-grid,#app .directory-grid{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-gap);
 align-items:stretch;
}
#app .project-card,#app .designer-card{overflow:hidden;height:100%}
#app .project-card-link{display:flex;flex-direction:column;height:100%;min-width:0}
#app .project-card-bottom,#app .designer-info{
 flex:1;display:flex;align-items:center;justify-content:space-between;
 gap:18px;padding:clamp(16px,2vw,24px);
}
#app .project-media,#app .designer-photo{min-width:0;overflow:hidden}
#app .project-media img,#app .designer-photo img{width:100%;height:100%;object-fit:cover}
#app .card-title{font-size:clamp(18px,1.55vw,23px);overflow-wrap:anywhere}
#app .category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-gap)}
#app .category-card{display:flex;flex-direction:column;min-width:0}
#app .filterbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
#app .search-field{display:flex;align-items:center;gap:12px;flex:1 1 270px;min-width:0}
#app .filter-input{width:100%;min-width:0;max-width:430px}
#app .catalogue-filters{min-width:0;display:flex;gap:8px;flex-wrap:wrap}
#app .filter-pill{min-height:39px;padding-inline:14px}
#app .catalogue-meta{flex-wrap:wrap}
#app .wf-empty,#app .catalogue-empty{gap:22px;min-width:0}
#app .wf-partner-grid,#app .wf-last-grid,#app .visit-grid{
 grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(25px,5vw,70px);
}
#app .portfolio-public-meta{grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px}
#app .portfolio-case-cols{grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr);gap:clamp(25px,6vw,80px)}
#app .portfolio-public-image-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
#app .portfolio-person-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(25px,4vw,64px)}

/* 05 — SPONSORSHIP / VISIT / FOOTER */
#app .sponsor-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(25px,5vw,70px)}
#app .sponsor-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
#app .sponsor-contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--layout-gap)}
#app .sponsor-opps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-gap)}
#app .sponsor-opps>div{min-height:0;padding:var(--layout-card-pad)}
#app .sponsor-form{padding:var(--layout-card-pad)}
#app .sponsor-feature-media img{object-fit:cover;width:100%;height:auto;max-height:430px}
#app .facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#app .facts-grid>div{min-width:0;padding:22px;gap:10px}
#app .footer-inner{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:var(--layout-gap)}
#app .footer-brand,#app .footer-note,#app .footer-links{min-width:0}
#app .site-footer{padding-top:clamp(55px,7vw,92px)}
#app .meta-footer-bottom{flex-wrap:wrap;gap:10px}

/* 06 — RSVP, FAMILY CATEGORIES, QR CHECK-IN AND STATS */
#app .event-layout{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,5vw,68px)}
#app .event-gate-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--layout-gap)}
#app .event-gate-head{gap:20px;flex-wrap:wrap}
#app .event-panel{padding:var(--layout-card-pad)}
#app .event-admin-content{padding:var(--layout-card-pad)}
#app .event-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
#app .event-rate-admin-grid,#app .event-party-fields,#app .event-category-grid{
 grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
#app .event-party-fields label{min-width:0}
#app .event-party-fields input{max-width:100%}
#app .event-stat-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#app .event-stat-row>div{min-width:0;padding:16px}
#app .event-stat-row strong{font-size:clamp(21px,2.4vw,30px);overflow-wrap:anywhere}
#app .event-actions{flex-wrap:wrap;align-items:stretch;gap:10px}
#app .event-actions .button{flex:1 1 145px;min-width:0}
#app .event-actions #event-sound-toggle{min-width:110px}
#app .event-camera{aspect-ratio:4/3;width:100%;max-height:460px;overflow:hidden}
#app .event-camera video{width:100%;height:100%;object-fit:contain}
#app .event-pass{max-width:100%;min-width:0}
#app .event-pass-qr{min-width:0;width:min(100%,320px);aspect-ratio:1;min-height:0;max-height:none;overflow:hidden}
#app .event-pass-qr :is(img,canvas,svg){max-width:100%;width:100%;height:auto}
#app .event-pass-qr img{object-fit:contain}
#app .event-attendee-row{
 grid-template-columns:minmax(0,1.5fr) minmax(80px,.65fr) minmax(80px,.75fr) minmax(0,1fr);
 gap:14px;align-items:center;
}
#app .event-ledger-head{gap:14px;flex-wrap:wrap}
#app .event-ledger-head .button{max-width:100%}
#app .event-recovery>form{display:flex;flex-wrap:wrap;gap:12px}
#app .event-recovery>form label{flex:1 1 240px;min-width:0}
#app .event-payment-row{flex-wrap:wrap;gap:12px}
#app .event-payment-row button{white-space:normal}

/* 07 — STUDENT STUDIO, ADMIN AND RESPONSIVE DATA PANELS */
#app .meta-dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
#app .meta-dash-head>div:first-child{flex:1 1 330px;min-width:0}
#app .meta-dash-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#app .meta-dash-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--layout-gap)}
#app .meta-dash-metrics>div{min-width:0;padding:clamp(16px,2vw,25px)}
#app .meta-dash-metrics strong{overflow-wrap:anywhere;line-height:1.2}
#app .meta-dash-layout{grid-template-columns:minmax(185px,210px) minmax(0,1fr);gap:var(--layout-gap)}
#app .meta-dash-sidebar{align-self:start;min-width:0;padding:14px}
#app .meta-dash-sidebar>button{min-height:44px;min-width:0;text-align:left}
#app .meta-dash-content{min-width:0}
#app .portfolio-workspace{padding:var(--layout-card-pad)}
#app .portfolio-profile-layout{grid-template-columns:minmax(0,1fr) minmax(150px,215px);gap:var(--layout-gap)}
#app .portfolio-profile-aside{min-width:0}
#app .portfolio-editor-section{grid-template-columns:minmax(100px,145px) minmax(0,1fr);gap:var(--layout-gap)}
#app .two-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
#app .portfolio-project-row{min-width:0;gap:14px}
#app .portfolio-project-actions{min-width:0}
#app .portfolio-gallery-preview{grid-template-columns:repeat(4,minmax(0,1fr))}
#app .portfolio-review-story{grid-template-columns:repeat(2,minmax(0,1fr))}
#app .meta-admin-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:var(--layout-gap)}
#app .meta-admin-list{min-width:0}
#app .meta-admin-row{min-width:0}
#app .meta-admin-row>div:nth-child(2){overflow-wrap:anywhere}
#app .admin-access-columns{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--layout-gap)}
#app .admin-access-row{min-width:0;gap:10px}
#app .admin-access-row .button{flex-shrink:0}
#app .admin-category-nav{
 display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;
 scroll-padding-inline:10px;scrollbar-width:thin;
 padding:7px 0 17px;
 -webkit-overflow-scrolling:touch;
}
#app .admin-category-nav button{flex:0 0 auto;white-space:nowrap;min-height:43px}
#app .admin-tab-panel{min-width:0;max-width:100%}
#app .portfolio-preview-modal,#app .meta-crop-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
#app .portfolio-preview-scroll{max-height:calc(100dvh - 90px)}
#app .portfolio-preview-content{padding:clamp(20px,4vw,46px)}
#app .meta-crop-stage{max-width:calc(100% - 24px)}
#app .meta-crop-controls{min-width:0;gap:14px}

/* 08 — MERCHANDISE, CART AND ORDER RECEIPTS */
#app .merch-layout{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(295px,350px);
 gap:var(--layout-gap);align-items:start;
}
#app .merch-products{min-width:0}
#app .merch-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
#app .merch-product{min-width:0;display:flex;flex-direction:column}
#app .merch-product-body{flex:1;padding:var(--layout-card-pad);min-width:0}
#app .merch-card-foot{margin-top:auto}
#app .merch-product-top{gap:10px;flex-wrap:wrap}
#app .merch-variant-label select{max-width:100%;white-space:normal}
#app .merch-cart{position:sticky;top:90px;max-width:100%;padding:var(--layout-card-pad)}
#app .merch-cart-line{min-width:0;gap:10px}
#app .merch-cart-line>div:first-child{min-width:0;overflow-wrap:anywhere}
#app .merch-qty button{width:30px;height:30px;min-width:30px;min-height:30px}
#app .merch-admin-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--layout-gap)}
#app .merch-admin-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#app .merch-admin label{min-width:0}
#app .merch-admin label input,#app .merch-admin label textarea{min-width:0;max-width:100%}
#app .merch-order-bottom{gap:11px}
#app .merch-receipt{width:min(100%,750px);max-width:100%}

/* 09 — <= 1100PX / TABLET & SMALL LAPTOP */
@media(max-width:1100px){
 #app .nav-links{display:none;position:absolute;top:100%;left:var(--layout-gutter);
  right:var(--layout-gutter);width:auto;max-height:calc(100dvh - 80px);overflow-y:auto;
  margin:0;padding:15px;gap:4px;background:rgba(7,10,22,.97);
  border:1px solid rgba(186,215,247,.20);border-radius:var(--radius-ui);
  box-shadow:0 24px 55px rgba(0,0,0,.53);
  backdrop-filter:blur(20px);z-index:80;
 }
 #app .nav-links.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .nav-link{font-size:14px;white-space:normal;padding:11px 14px;
  border-radius:var(--radius-ui);min-height:44px;display:flex;align-items:center;
 }
 #app .nav-link:hover,#app .nav-link.active{background:rgba(186,214,247,.085);box-shadow:none;text-decoration:none}
 #app .menu-toggle{display:inline-flex}
 #app .nav-sponsor{display:none}
 #app .project-grid,#app .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .meta-dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .meta-admin-grid,#app .admin-access-columns{grid-template-columns:1fr}
 #app .sponsor-contact-grid{grid-template-columns:1fr 1fr}
 #app .event-admin-grid{grid-template-columns:1fr 1fr}
 #app .merch-admin-grid{grid-template-columns:1fr}
 #app .footer-inner{grid-template-columns:1.35fr repeat(2,minmax(0,1fr))}
 #app .footer-note{grid-column:2/-1}
}
/* 10 — <= 900PX / TABLET PORTRAIT */
@media(max-width:900px){
 #app .wf-partner-grid,#app .wf-last-grid,#app .visit-grid,
 #app .sponsor-split,#app .sponsor-feature-grid,#app .sponsor-contact-grid,
 #app .event-layout,#app .event-gate-grid,
 #app .portfolio-case-cols,#app .portfolio-person-grid{
  grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,42px);
 }
 #app .event-layout .event-intro{max-width:730px}
 #app .event-layout>.event-panel{width:100%;max-width:100%}
 #app .event-gate-head{align-items:flex-start}
 #app .event-admin-grid{grid-template-columns:1fr}
 #app .meta-dash-layout{grid-template-columns:minmax(0,1fr)}
 #app .meta-dash-sidebar{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
 }
 #app .meta-dash-sidebar>.meta-kicker,#app .meta-side-note{grid-column:1/-1}
 #app .meta-dash-sidebar>button{justify-content:flex-start}
 #app .portfolio-profile-layout{grid-template-columns:minmax(0,1fr) 180px}
 #app .portfolio-editor-section{grid-template-columns:minmax(0,1fr);gap:12px}
 #app .sponsor-opps{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .merch-layout{grid-template-columns:minmax(0,1fr)}
 #app .merch-cart{position:static}
 #app .merch-products{order:0}
 #app .merch-cart{order:1}
 #app .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .footer-brand{grid-column:1/-1}
 #app .footer-note{grid-column:2}
}
/* 11 — <= 700PX / MOBILE AND SMALL TABLET */
@media(max-width:700px){
 :root{--layout-gutter:clamp(15px,4.3vw,24px);--layout-gap:16px}
 #app .nav-inner{height:64px;gap:10px}
 #app .site-nav{z-index:80}
 #app .nav-links{left:var(--layout-gutter);right:var(--layout-gutter);max-height:calc(100dvh - 75px)}
 #app .logo{font-size:15px}
 #app .studio-link{font-size:11px}
 #app .menu-toggle{padding:8px 11px;font-size:12px}
 #app .wf-hero--immersive{min-height:clamp(620px,calc(100svh - 64px),790px)}
 #app .wf-hero-inner{padding-top:clamp(58px,8svh,80px);padding-bottom:22px}
 #app .wf-hero h1{font-size:clamp(43px,8.4vw,68px)}
 #app .wf-hero .hero-under{font-size:10px;margin-top:30px}
 #app .page-hero .h-page,#app .sponsor-hero h1{font-size:clamp(46px,9vw,74px)}
 #app .section-heading h2{font-size:clamp(31px,7vw,48px)}
 #app .project-grid,#app .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 #app .project-card-bottom,#app .designer-info{padding:15px}
 #app .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .facts-grid>div{padding:16px}
 #app .sponsor-opps{grid-template-columns:1fr}
 #app .portfolio-public-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .portfolio-public-image-grid{grid-template-columns:1fr}
 #app .portfolio-profile-layout{grid-template-columns:1fr}
 #app .portfolio-profile-aside{grid-row:1;display:grid;grid-template-columns:135px minmax(0,1fr);gap:18px}
 #app .portfolio-project-row{flex-wrap:wrap}
 #app .portfolio-project-actions{flex:1 1 100%;flex-direction:row;flex-wrap:wrap}
 #app .portfolio-gallery-preview{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app .portfolio-review-story{grid-template-columns:1fr}
 #app .event-rate-admin-grid,#app .event-category-grid,#app .event-party-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .event-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .event-attendee-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #app .event-gate-tools{flex-wrap:wrap}
 #app .event-gate-tools label:not(.event-file-button){min-width:0;flex:1 1 100%}
 #app .merch-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .merch-admin-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .two-fields{grid-template-columns:minmax(0,1fr)}
 #app .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .meta-footer-bottom{font-size:11px}
}
/* 12 — <= 480PX / SMALL MOBILE, 320-480 */
@media(max-width:480px){
 :root{--layout-gutter:16px;--layout-gap:14px;--layout-card-pad:18px}
 #app .nav-inner{height:62px}
 #app .nav-links.open{grid-template-columns:minmax(0,1fr)}
 #app .nav-links{max-height:calc(100dvh - 70px)}
 #app .logo{font-size:14px;letter-spacing:-.045em}
 #app .logo small{display:none}
 #app .studio-link{font-size:11px}
 #app .nav-end{gap:7px}
 #app .menu-toggle{padding-inline:10px}
 #app .wf-hero--immersive{min-height:clamp(555px,78svh,690px)}
 #app .wf-hero h1{font-size:clamp(36px,9.1vw,45px);letter-spacing:-.057em}
 #app .wf-hero .hero-actions{flex-direction:column;align-items:stretch}
 #app .wf-hero .hero-actions .button{width:100%;justify-content:center}
 #app .wf-hero .hero-under{flex-direction:column;align-items:flex-start;gap:7px;margin-top:22px}
 #app .page-hero .h-page,#app .sponsor-hero h1{font-size:clamp(42px,10vw,58px)}
 #app .project-grid,#app .directory-grid,#app .category-grid,
 #app .sponsor-opps,#app .merch-product-grid{
  grid-template-columns:minmax(0,1fr);
 }
 #app .filterbar{flex-direction:column}
 #app .search-field{width:100%;flex:1 1 auto}
 #app .filter-input{width:100%;max-width:100%}
 #app .catalogue-filters{gap:7px}
 #app .catalogue-meta{flex-direction:column;gap:4px}
 #app .wf-empty,#app .catalogue-empty{flex-direction:column;align-items:flex-start;padding:19px}
 #app .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .facts-grid>div{padding:13px}
 #app .facts-grid strong{font-size:18px}
 #app .sponsor-form{padding:18px}
 #app .sponsor-hero{padding-block:64px}
 #app .portfolio-public-meta{grid-template-columns:minmax(0,1fr)}
 #app .portfolio-person-photo{width:100%}
 #app .portfolio-profile-aside{grid-template-columns:minmax(0,1fr)}
 #app .portfolio-avatar-preview{max-width:190px}
 #app .portfolio-workspace{padding:16px}
 #app .portfolio-project-actions .button{flex:1 1 140px}
 #app .portfolio-gallery-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .portfolio-preview-modal,#app .meta-crop-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
 #app .portfolio-preview-toolbar{gap:8px;flex-wrap:wrap}
 #app .portfolio-preview-content{padding:20px}
 #app .meta-crop-head{padding-inline:14px}
 #app .meta-crop-controls{padding-inline:12px;gap:9px}
 #app .meta-crop-footer{padding-inline:12px;gap:8px}
 #app .meta-dash-head-actions{width:100%}
 #app .meta-dash-head-actions>*{flex:1 1 135px;justify-content:center}
 #app .meta-dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 #app .meta-dash-metrics>div{padding:14px}
 #app .meta-dash-metrics strong{font-size:clamp(17px,5vw,26px)}
 #app .meta-dash-sidebar{grid-template-columns:minmax(0,1fr)}
 #app .meta-dash-sidebar>.meta-kicker,#app .meta-side-note{grid-column:1}
 #app .admin-category-nav{gap:7px;margin:18px 0 17px}
 #app .admin-category-nav button{padding:10px 12px;min-height:42px}
 #app .event-panel,#app .merch-cart{padding:16px}
 #app .event-rate-admin-grid,#app .event-category-grid,#app .event-party-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #app .event-category-grid label{font-size:12px}
 #app .event-stat-row>div{padding:14px}
 #app .event-actions .button{flex:1 1 100%}
 #app .event-attendee-row{grid-template-columns:minmax(0,1fr)}
 #app .event-pass-qr{width:min(100%,295px)}
 #app .event-gate-head .button{width:100%;justify-content:center}
 #app .event-recovery>form{flex-direction:column;align-items:stretch}
 #app .event-recovery>form label{flex:1 1 auto;width:100%}
 #app .event-payment-row{align-items:flex-start;flex-wrap:wrap}
 #app .event-payment-row button{width:100%}
 #app .merch-cart-line{grid-template-columns:minmax(0,1fr) auto;gap:10px}
 #app .merch-cart-line>div:first-child{grid-column:1/-1}
 #app .merch-qty{grid-column:1}
 #app .merch-remove{grid-column:2;justify-self:end}
 #app .merch-admin-fields{grid-template-columns:minmax(0,1fr)}
 #app .merch-admin-product summary{flex-wrap:wrap}
 #app .merch-order-meta,#app .merch-order-bottom{justify-content:flex-start;gap:9px}
 #app .merch-receipt-items>div{flex-wrap:wrap}
 #app .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 #app .footer-brand{grid-column:1/-1}
 #app .footer-note{grid-column:1/-1}
 #app .meta-footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
 #app .wf-hero-inner{padding-top:54px}
 #app .wf-hero p{font-size:14px;line-height:1.6;margin-bottom:21px}
 #app .wf-hero .eyebrow{font-size:10px;letter-spacing:.085em}
 #app .wf-hero .hero-actions{gap:9px}
 #app .wf-hero .hero-under{font-size:9px}
 #app .wf-hero-sculpture{opacity:.12}
}
@media(max-width:350px){
 #app .studio-link{font-size:10px}
 #app .logo{font-size:13px}
 #app .wordmark-glyph{width:21px;height:21px;margin-right:0}
 #app .event-rate-admin-grid,#app .event-category-grid,#app .event-party-fields{grid-template-columns:minmax(0,1fr)}
 #app .facts-grid{grid-template-columns:1fr}
 #app .meta-dash-metrics{grid-template-columns:minmax(0,1fr)}
}
/* Keyboard, safe area, rotation and reduced motion */
@media(orientation:landscape) and (max-height:520px){
 #app .wf-hero--immersive{min-height:530px}
 #app .wf-hero-inner{padding-top:44px}
}
@media(prefers-reduced-motion:reduce){
 #app :is(.project-card,.designer-card,.merch-product,.category-card,.sponsor-opps>div,.button){transform:none!important;transition:none!important}
}
@supports(padding:max(1px,2px)){
 @media(max-width:480px){
  #app .site-footer{padding-bottom:max(23px,env(safe-area-inset-bottom))}
 }
}