/* TROUBled — built to the Claude Design handoff (design_handoff_troubled_gallery). Numbers here are the spec's numbers: strokes, sizes, easings and grid maths are exact. The ground is PURE WHITE everywhere — that is the gallery premise. No off-white, no tinted bed, no grey gutter. If a surface reads as grey, it is a bug. Two faces only. elegant.ttf renders the word TROUBled and nothing else; everything else is Helvetica Neue 900. The heavy look comes from an outward text stroke scaled by size, never from a heavier weight — `paint-order: stroke fill` draws the stroke under the fill so the counters stay open. */ @font-face{font-family:"TroubledPure";src:url("../assets/fonts/elegant.ttf") format("truetype"); font-weight:400;font-display:swap} :root{ --bg:#ffffff; --ink:#17150f; --ink2:#6a645a; --red:#8B2E2E; --hair:rgba(23,21,15,.16); --hair-soft:rgba(23,21,15,.12); --sys:"Helvetica Neue",Helvetica,"Arial Black",Arial,sans-serif; --hand:"TroubledPure","Helvetica Neue",Helvetica,sans-serif; --display-track:-.045em; --pad:16px; /* JS keeps this in sync: round(min(54,max(16,vw*.032))) */ --railw:0px; /* JS-measured */ --e:cubic-bezier(.22,.78,.16,1); --e-soft:cubic-bezier(.4,0,.2,1); --e-flip:cubic-bezier(.32,.72,0,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink);font-family:var(--sys); font-weight:900;text-transform:uppercase;letter-spacing:.02em; -webkit-font-smoothing:antialiased;overflow-x:hidden; -webkit-text-stroke:.7px currentColor;paint-order:stroke fill; } /* The hand is reserved for the word TROUBled. Adding this class anywhere else silently reintroduces it — and uppercase would render TROUBLED, whose capital D in this face reads as a P. */ .mk{font-family:var(--hand);text-transform:none;letter-spacing:0;font-weight:400} .mk i{font-style:normal} ::selection{background:var(--ink);color:var(--bg)} html{scrollbar-color:rgba(23,21,15,.3) transparent;scrollbar-width:thin;caret-color:var(--ink)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(23,21,15,.25)} ::-webkit-scrollbar-thumb:hover{background:rgba(23,21,15,.45)} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} button,input,select,textarea{text-transform:inherit;letter-spacing:inherit} img{display:block;max-width:100%} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} html{scroll-behavior:auto} } /* ============ INTRO PLATE ============ */ .intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--bg); animation:introOut .8s var(--e) 3.3s forwards} .intro .plate{display:flex;flex-direction:column;align-items:center;gap:18px} .intro .rule{width:0;height:1px;background:var(--ink);opacity:.45; animation:ruleDraw 1.1s var(--e) 1.5s forwards} .intro .mk{font-size:clamp(40px,9vw,132px);line-height:.9;color:var(--ink);opacity:0; -webkit-text-stroke:clamp(3px,.6vw,8px) currentColor;paint-order:stroke fill; animation:wordRise 1.3s var(--e) .35s forwards} @keyframes wordRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes ruleDraw{from{width:0}to{width:min(70vw,520px)}} @keyframes introOut{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){.intro{display:none}} /* ============ MASTHEAD ============ Three variants; one renders at a time, chosen by data-mast on . */ .masthead{padding-right:var(--railw)} .mast-crop,.mast-plate,.mast-veil{display:none} body[data-mast="crop"] .mast-crop {display:block} body[data-mast="plate"] .mast-plate{display:grid} body[data-mast="veil"] .mast-veil {display:block} /* — Crop (default): mark, statement, closed by a rule */ .mast-crop{overflow:hidden;padding-top:clamp(16px,2.6vw,36px)} .mast-mark{font-size:clamp(44px,10.4vw,190px);line-height:.9;padding-left:var(--pad); white-space:nowrap;will-change:transform; -webkit-text-stroke:clamp(4px,.75vw,11px) currentColor;paint-order:stroke fill} .statement{margin:clamp(6px,1vw,14px) 0 0;padding:0 var(--pad) clamp(18px,2.6vw,34px); font-size:clamp(46px,10.5vw,168px);line-height:.84;letter-spacing:var(--display-track); border-bottom:1px solid var(--hair);will-change:transform,opacity; -webkit-text-stroke:clamp(2px,.32vw,5px) currentColor;paint-order:stroke fill} /* — Plate: a full-height cover you scroll past */ .mast-plate{grid-template-rows:auto 1fr auto;height:100vh;min-height:620px;overflow:hidden} .plate-strip{border-bottom:1px solid var(--hair);height:clamp(38px,6vw,74px)} .plate-band{position:relative} .plate-band img{position:absolute;right:var(--pad);top:0;height:78%; width:clamp(180px,22vw,340px);object-fit:cover;filter:saturate(.94);will-change:transform} .plate-mark{font-size:clamp(40px,9vw,150px);line-height:.92;padding:0 var(--pad) clamp(14px,2vw,28px); white-space:nowrap;will-change:transform; -webkit-text-stroke:clamp(3.5px,.62vw,9px) currentColor;paint-order:stroke fill} /* — Veil: artwork first, full bleed */ .veil-band{height:64vh;min-height:380px;overflow:hidden} .veil-band img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03); will-change:transform} .veil-statement{margin:clamp(10px,1.6vw,22px) 0 0;padding:0 var(--pad); font-size:clamp(40px,8vw,200px);line-height:.84;letter-spacing:var(--display-track); will-change:transform; -webkit-text-stroke:clamp(2px,.34vw,5px) currentColor;paint-order:stroke fill} .veil-mark{font-size:clamp(38px,8.6vw,140px);line-height:.92;padding:clamp(8px,1.2vw,18px) var(--pad) clamp(14px,2vw,28px); white-space:nowrap;will-change:transform; -webkit-text-stroke:clamp(3.5px,.58vw,9px) currentColor;paint-order:stroke fill} /* ============ SHELL ============ */ .shell{display:block;padding-right:var(--railw);border-top:1px solid var(--hair)} .gal{padding:0;min-width:0} .tailspace{height:clamp(40px,6vw,96px)} .foot{height:clamp(40px,6vw,96px)} /* TROUBled + ART / MUSIC, stacked, flush left */ .head-mark{display:flex;flex-direction:column;align-items:flex-start;line-height:.82} .head-mark .mk{font-size:clamp(18px,1.8vw,24px);-webkit-text-stroke:1.4px currentColor; paint-order:stroke fill} .head-mark em{font-style:normal;font-size:clamp(46px,6.4vw,104px); letter-spacing:var(--display-track); -webkit-text-stroke:clamp(2px,.3vw,4.5px) currentColor;paint-order:stroke fill} /* wall header: heading left, two icon buttons flush right, no labels */ .wall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px; padding:clamp(16px,2.4vw,30px) var(--pad) clamp(12px,1.6vw,20px); border-bottom:1px solid var(--hair)} .wall-head .head-mark em{will-change:transform} .acts{display:flex;gap:14px;flex:none;align-items:center} .icon{width:26px;height:26px;display:grid;place-items:center;color:var(--ink2); transition:color .22s var(--e-soft)} .icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:square} .icon:hover{color:var(--red)} .icon.on{color:var(--red)} /* ============ THE WALL ============ Cells are one shape — works, chapter rules and voids differ only in their values. */ .wall{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr)); grid-auto-rows:var(--unit,10px);grid-auto-flow:row dense;gap:var(--gap,1px); background:var(--bg);border-bottom:1px solid var(--hair)} .cell{grid-column:span var(--cs,3);grid-row:span var(--rs,14); position:relative;padding:0;border:0;background:var(--bg);overflow:hidden; content-visibility:auto;contain-intrinsic-size:auto 240px; transition:opacity .7s var(--e-soft) var(--d,0ms), filter .7s var(--e-soft) var(--d,0ms), transform .55s var(--e), box-shadow .22s var(--e-soft)} .cell[role="button"]{cursor:pointer} .cell .in{width:100%;height:100%;overflow:hidden;transition:transform .9s var(--e)} .cell img{width:100%;height:100%;object-fit:cover;display:block} .cell.rule-cell{border-bottom:1px solid var(--hair)} /* the hidden state is written by JS, never authored here — a dead observer would otherwise blank the entire wall */ .cell.hid{opacity:0;filter:blur(6px)} /* ============ MUSIC RAIL ============ */ .rail{position:fixed;top:0;right:0;bottom:0;width:var(--railw);z-index:50; display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; padding:18px 16px 22px;scrollbar-width:none; background:rgba(255,253,250,.62); backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%); box-shadow:inset 1px 0 0 rgba(255,255,255,.75), -1px 0 0 rgba(23,21,15,.16), -18px 0 44px rgba(23,21,15,.07); transition:width .6s var(--e)} .rail::-webkit-scrollbar{display:none} .rail h2{margin:0 0 14px;padding:0 4px} .rail h2 em{font-size:clamp(34px,3.4vw,52px)} body[data-rail="off"] .rail{display:none} .sleeve-wrap{padding:0 4px} .sleeve{position:relative;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden; background:var(--red);display:grid;place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 1px rgba(23,21,15,.12), 0 10px 20px -6px rgba(23,21,15,.20), 0 26px 48px -14px rgba(23,21,15,.28)} .sleeve img{width:100%;height:100%;object-fit:cover} .sleeve::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(150deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 48%,rgba(255,255,255,.04) 82%,rgba(255,255,255,.12) 100%)} .sleeve .ph{font-size:clamp(20px,2vw,28px);color:#fff;text-align:center;line-height:.9; letter-spacing:var(--display-track);padding:0 12px} .scrub{margin:18px 4px 0;height:4px;border-radius:3px;overflow:hidden;cursor:pointer; background:var(--hair-soft);box-shadow:inset 0 1px 2px rgba(23,21,15,.10)} .scrub i{display:block;height:100%;width:0;background:var(--ink);border-radius:3px} .trans{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 0 0} .tbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink); transition:background .22s var(--e-soft),transform .3s var(--e)} .tbtn:hover{background:rgba(255,255,255,.62);transform:scale(1.06)} .tbtn:active{transform:scale(.94)} .tbtn svg{width:22px;height:22px;fill:currentColor} .tbtn.sm{width:32px;height:32px;color:var(--ink2)} .tbtn.sm svg{width:16px;height:16px} .tbtn.sm.on{color:var(--red)} .tbtn.big{width:52px;height:52px} .tbtn.big svg{width:30px;height:30px} /* ============ POP-UP ============ */ .lb{position:fixed;inset:0;z-index:100;display:none;background:var(--bg)} .lb.on{display:flex;flex-direction:column;animation:fade .28s var(--e-soft)} @keyframes fade{from{opacity:0}to{opacity:1}} .lb-top{display:flex;justify-content:flex-end;align-items:center; padding:16px var(--pad);border-bottom:1px solid var(--hair)} .x,.nav{display:grid;place-items:center;color:var(--ink);background:transparent; transition:color .22s var(--e-soft)} .x{width:34px;height:34px} .nav{width:44px;height:44px;flex:none} .x svg{width:20px;height:20px} .nav svg{width:22px;height:22px} .x svg,.nav svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square; stroke-linejoin:miter} .x:hover,.nav:hover{color:var(--red)} .lb-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:8px; padding:clamp(16px,3vw,40px) var(--pad);min-height:0} .stage{display:flex;flex-direction:column;align-items:center;gap:20px;min-width:0;max-height:100%} .stage img{max-height:62vh;width:auto;max-width:100%;cursor:zoom-in} .lb.zoom .stage img{max-height:none;max-width:none;cursor:zoom-out} .lb.zoom .lb-mid{overflow:auto;align-items:flex-start} /* the only place an artist is named */ .credit{font-size:clamp(22px,3.2vw,46px);line-height:.9;text-align:center; letter-spacing:var(--display-track); -webkit-text-stroke:1.8px currentColor;paint-order:stroke fill} .strip{display:flex;gap:1px;overflow-x:auto;background:var(--bg); border-top:1px solid var(--hair);scroll-snap-type:x proximity;scrollbar-width:none} .strip::-webkit-scrollbar{display:none} .strip button{flex:none;width:64px;height:64px;overflow:hidden;padding:0;position:relative; background:var(--bg);opacity:.5;transition:opacity .25s var(--e-soft)} .strip button img{width:100%;height:100%;object-fit:cover} .strip button:hover{opacity:.85} .strip button.sel{opacity:1;scroll-snap-align:center} .strip button.sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--red)} /* the clicked tile flies to the stage */ .flier{position:fixed;z-index:99;margin:0;overflow:hidden;pointer-events:none} .flier img{width:100%;height:100%;object-fit:cover} /* ============ TOAST ============ */ .toast{position:fixed;right:calc(var(--railw) + var(--pad));bottom:var(--pad);z-index:240; padding:11px 16px;font-size:9px;font-weight:700;letter-spacing:.24em; background:var(--ink);color:var(--bg);-webkit-text-stroke:0; opacity:0;transform:translateY(8px);transition:all .3s var(--e);pointer-events:none} .toast.on{opacity:1;transform:none} @media(max-width:900px){ .masthead,.shell{padding-right:0} .rail{display:none} .toast{right:var(--pad)} } /* ============ STUDIO (studio.html only) ============ */ .sheet{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end; justify-content:center;background:rgba(23,21,15,.4)} .sheet.on{display:flex} .panel{width:min(720px,100%);max-height:90vh;overflow-y:auto;background:var(--bg); padding:22px var(--pad) 40px;border-top:2px solid var(--ink)} .grip{display:none} .panel h3{font-family:var(--hand);font-size:30px;margin:0 0 4px;text-transform:none} .panel .lede{font-size:11px;color:var(--ink2);margin:0 0 20px;line-height:1.7;letter-spacing:.1em} .blk{border:1px solid var(--hair);padding:18px;margin-bottom:14px} .blk h4{font-size:11px;font-weight:700;margin:0 0 8px;letter-spacing:.18em} .blk p{font-size:10px;color:var(--ink2);margin:0 0 14px;line-height:1.8;letter-spacing:.1em} .blk code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; background:rgba(23,21,15,.07);padding:1px 5px;text-transform:none;letter-spacing:0} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .field-i{flex:1;min-width:150px;padding:10px 12px;border:1px solid var(--hair); border-radius:0;font-size:11px;background:transparent;letter-spacing:.1em} .drop{border:1px dashed var(--hair);padding:22px;text-align:center;font-size:10px; color:var(--ink2);cursor:pointer;letter-spacing:.16em;transition:all .2s var(--e-soft)} .drop:hover,.drop.hot{border-color:var(--ink);color:var(--ink)} .ok{font-size:10px;color:var(--red);margin:10px 0 0;min-height:1em;letter-spacing:.1em} .usage{font-size:9px;color:var(--ink2);margin:8px 0 0;min-height:1em;letter-spacing:.12em} .list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .mini{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:10px; border:1px solid var(--hair);letter-spacing:.1em} .mini b{font-weight:700} .mini button{color:var(--ink2);font-size:14px;line-height:1} .mini button:hover{color:var(--red)} .mini-a{color:var(--ink2);text-decoration:none;font-size:12px} .mini-a:hover{color:var(--red)} .pill{padding:9px 15px;font-size:10px;font-weight:700;letter-spacing:.16em; border:1px solid var(--ink);color:var(--ink);transition:all .2s var(--e-soft)} .pill:hover{background:var(--ink);color:var(--bg)} .pill.solid{background:var(--ink);color:var(--bg)}