:root { --ink:#121212; --paper:#f8f7f2; --yellow:#ffe500; --blue:#1959d1; --orange:#ff8a18; --line:2px solid var(--ink); }
* { box-sizing:border-box; }
img[data-artwork] { user-select:none; -webkit-user-drag:none; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Space Grotesk", sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
.site-header { height:76px; padding:0 4vw; border-bottom:var(--line); display:flex; align-items:center; justify-content:space-between; background:var(--paper); position:sticky; top:0; z-index:10; }
.brand { font-size:1.05rem; font-weight:700; letter-spacing:.01em; line-height:.9; width:150px; }
.brand span { display:block; }
.nav { display:flex; gap:26px; align-items:center; font-family:"DM Mono", monospace; font-size:.72rem; letter-spacing:.04em; }
.nav a { position:relative; padding:8px 0; }
.nav a::after { content:""; position:absolute; left:0; bottom:3px; width:0; height:2px; background:currentColor; transition:width .2s; }
.nav a:hover::after, .nav a.active::after { width:100%; }
.menu-button { display:none; background:none; border:0; font-size:1.4rem; }
.page { min-height:calc(100vh - 76px); }
.hero { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1.1fr .9fr; border-bottom:var(--line); overflow:hidden; }
.hero-copy { padding:clamp(36px,6vw,100px) 4vw 34px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow, .meta { font:500 .68rem/1.5 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.055em; }
.hero h1, .page-title { font-size:clamp(3.6rem,8vw,8.7rem); line-height:.84; letter-spacing:-.075em; margin:25px 0; max-width:800px; }
.button-link { align-self:flex-start; border:var(--line); padding:13px 18px; font-family:"DM Mono", monospace; font-size:.72rem; letter-spacing:.03em; background:var(--yellow); transition:transform .2s, box-shadow .2s; }
.button-link:hover { transform:translate(-4px,-4px); box-shadow:5px 5px 0 var(--ink); }
.hero-art { min-height:540px; background:var(--blue); border-left:var(--line); position:relative; display:grid; place-items:center; overflow:hidden; }
.hero-art::before { content:""; width:64%; aspect-ratio:1; background:var(--yellow); border-radius:50%; position:absolute; top:12%; right:9%; }
.hero-design-art { width:min(84%,560px); height:84%; object-fit:contain; position:relative; z-index:1; transform:rotate(-10deg); transition:transform .3s ease; }
.hero-art:hover .hero-design-art { transform:rotate(-10deg) translateY(-8px); }
.section { padding:clamp(52px,8vw,120px) 4vw; }
.new-members { padding:clamp(50px,7vw,100px) 0 clamp(48px,6vw,84px); background:var(--blue); color:var(--paper); border-bottom:var(--line); overflow:hidden; }
.new-members-head { padding:0 4vw 34px; display:flex; justify-content:space-between; align-items:end; gap:28px; }
.new-members h2 { font-size:clamp(3rem,6vw,6.7rem); }
.new-member-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.slider-button { width:46px; height:46px; border:2px solid var(--paper); background:transparent; color:var(--paper); font-size:1.35rem; line-height:1; cursor:pointer; transition:background .2s, color .2s, transform .2s; }
.slider-pause { width:auto; padding:0 10px; font-size:.8rem; }
.slider-button:hover, .slider-button:focus-visible { background:var(--yellow); color:var(--ink); transform:translate(-3px,-3px); outline:0; }
.new-member-viewport { overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:4vw; }
.new-member-track { display:flex; gap:clamp(16px,2vw,28px); padding:0 4vw; }
.new-member-card { flex:0 0 min(38vw,500px); scroll-snap-align:start; display:block; }
.new-member-art { position:relative; aspect-ratio:1.25; background:var(--card-color); border:2px solid var(--paper); overflow:hidden; }
.new-member-art img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .35s ease; }
.new-member-card:hover .new-member-art img { transform:scale(1.05) rotate(-2deg); }
.new-badge { position:absolute; z-index:3; top:12px; left:12px; padding:6px 8px; background:var(--yellow); color:var(--ink); font:500 .65rem "DM Mono", monospace; letter-spacing:.06em; }
.new-member-name { display:block; padding:12px 0 0; font-size:1.05rem; font-weight:700; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:38px; }
h2 { margin:0; font-size:clamp(2.5rem,5vw,5.8rem); line-height:.88; letter-spacing:-.07em; }
.arrow-link { font:500 .7rem "DM Mono", monospace; text-transform:uppercase; border-bottom:2px solid; padding-bottom:3px; white-space:nowrap; }
.design-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,28px); }
.design-card { grid-column:span 4; display:block; }
.design-card.feature { grid-column:span 8; }
.art-frame { aspect-ratio:1 / 1.05; border:var(--line); background:var(--card-color); display:grid; place-items:center; position:relative; overflow:hidden; }
.design-card.feature .art-frame { aspect-ratio:1.65; }
.art-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; }
.design-card:hover .art-frame { outline:3px solid var(--ink); outline-offset:4px; }
.art-frame .expression-image { opacity:0; background:var(--card-color); transition:opacity .25s ease; }
.expression-status { position:absolute; z-index:3; bottom:14px; left:50%; transform:translate(-50%,6px); opacity:0; transition:opacity .2s ease,transform .2s ease; padding:8px 12px; background:var(--paper); color:var(--ink); border:var(--line); font:500 .65rem "DM Mono",monospace; white-space:nowrap; }
.design-card:focus-visible .expression-image:not([data-failed]) { opacity:1; }
.design-card:focus-visible .expression-status { opacity:1; transform:translate(-50%,0); }
@media (hover:hover) {
  .design-card:hover .expression-image:not([data-failed]) { opacity:1; }
  .design-card:hover .expression-status { opacity:1; transform:translate(-50%,0); }
}
.card-info { display:flex; justify-content:space-between; gap:10px; padding-top:12px; }
.card-title { font-size:1.05rem; font-weight:700; }
.card-info .meta { color:#333; }
.page-header { padding:clamp(50px,8vw,120px) 4vw 42px; border-bottom:var(--line); background:var(--yellow); }
.page-header p { margin:18px 0 0; font-size:clamp(1.1rem,2vw,1.7rem); }
.gallery-page { padding-bottom:100px; }
.gallery-page .design-grid { padding:clamp(40px,6vw,90px) 4vw; }
.gallery-page .design-card:nth-child(1), .gallery-page .design-card:nth-child(6) { grid-column:span 6; }
.detail { display:grid; grid-template-columns:1.15fr .85fr; min-height:calc(100vh - 76px); }
.detail-art { min-height:590px; border-right:var(--line); background:var(--detail-color); display:grid; place-items:center; position:relative; }
.detail-art > img { width:86%; height:86%; object-fit:contain; position:relative; z-index:2; }
.detail-copy { padding:clamp(35px,6vw,90px) 4vw; display:flex; flex-direction:column; }
.detail-copy h1 { font-size:clamp(3rem,6vw,6.5rem); line-height:.86; letter-spacing:-.075em; margin:18px 0 35px; }
.detail-copy p { max-width:430px; font-size:1.2rem; line-height:1.4; }
.detail-meta { margin-top:42px; border-top:var(--line); padding-top:18px; display:grid; gap:15px; }
.detail-nav { margin-top:auto; padding-top:50px; display:flex; justify-content:space-between; font:500 .67rem "DM Mono", monospace; text-transform:uppercase; }
.detail-stickers { margin-top:28px; display:grid; gap:12px; }
.detail-stickers strong, .detail-meta strong { font-weight:700; }
.detail-stickers .arrow-link { color:var(--blue); justify-self:start; white-space:normal; }
.detail-examples { grid-column:1 / -1; border-top:var(--line); padding:40px 4vw; }
.detail-examples h2 { margin:12px 0 28px; }
.example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.example-grid figure { margin:0; }
.example-art { background:var(--card-color); border:var(--line); aspect-ratio:1; display:grid; place-items:center; }
.example-art img { width:100%; height:100%; object-fit:contain; }
.example-grid figcaption { margin-top:12px; font:500 .75rem "DM Mono",monospace; }
@media (max-width:700px) { .example-grid { grid-template-columns:1fr; } }
.about-intro { background:var(--blue); color:white; padding:clamp(60px,10vw,150px) 4vw; border-bottom:var(--line); }
.about-intro h1 { font-size:clamp(3.8rem,8vw,9rem); line-height:.84; letter-spacing:-.08em; max-width:1050px; margin:0; }
.shop-page { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1.1fr .9fr; }
.shop-copy { padding:clamp(48px,8vw,120px) 4vw; background:var(--orange); display:flex; flex-direction:column; }
.shop-copy h1 { font-size:clamp(4rem,9vw,10rem); line-height:.79; letter-spacing:-.09em; margin:25px 0; }
.shop-copy p { font-size:clamp(1.3rem,2.4vw,2.2rem); line-height:1.15; max-width:500px; }
.shop-side { background:var(--yellow); border-left:var(--line); display:grid; place-items:center; font-size:clamp(8rem,18vw,18rem); }
footer { border-top:var(--line); padding:28px 4vw; display:flex; justify-content:space-between; gap:25px; font:500 .68rem "DM Mono", monospace; text-transform:uppercase; }
@media (max-width:700px) {
	#menu-button { display:block; min-width:44px; min-height:44px; cursor:pointer; }
	#nav.enhanced { display:none; position:absolute; top:100%; left:0; right:0; padding:16px 4vw; background:var(--paper); border-bottom:var(--line); flex-direction:column; align-items:stretch; gap:4px; }
	#nav.enhanced.open { display:flex; }
	#nav a { display:block; padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto; }
	*, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
@media (max-width:700px) {
	.site-header { height:63px; }
	.nav { display:flex; position:static; padding:0; gap:14px; }
	.nav a { padding:12px 0; }
	.menu-button { display:none; }
	.page, .shop-page { min-height:calc(100svh - 63px); }
	.hero, .detail, .shop-page { grid-template-columns:1fr; }
	.hero-art, .detail-art, .shop-side { border-left:0; border-top:var(--line); min-height:390px; }
	.shop-copy { padding:48px 8vw; }
	.shop-copy h1 { font-size:clamp(3.8rem,18vw,5.5rem); margin:22px 0; }
	.shop-copy p { font-size:1.25rem; }
	.shop-side { min-height:190px; font-size:8rem; }
	.new-members-head { align-items:start; }
	.new-member-card { flex-basis:78vw; }
	.design-card, .design-card.feature, .gallery-page .design-card:nth-child(1), .gallery-page .design-card:nth-child(6) { grid-column:span 6; }
	.design-card.feature .art-frame { aspect-ratio:1 / 1.05; }
	.detail-copy { min-height:430px; } footer { flex-direction:column; } }

/* Progressive enhancement and resilient image states. */
[hidden] { display:none !important; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; padding:12px; background:var(--yellow); color:var(--ink); transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.image-fallback { position:relative; z-index:3; padding:16px; margin:16px; background:var(--paper); color:var(--ink); border:var(--line); text-align:center; font:500 .8rem/1.5 "DM Mono", monospace; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
@media (max-width:700px) {
  .site-header { height:auto; min-height:63px; flex-wrap:wrap; padding-block:8px; gap:8px; }
  #nav:not(.enhanced) { display:flex; flex-wrap:wrap; width:100%; }
  .card-info { flex-direction:column; gap:4px; }
  .card-title { overflow-wrap:anywhere; }
  .detail-art { border-right:0; }
}