/* ============================================================================
UNIÓN , 08 Deck, social and print. Lane D owns this file.
NO hex, NO font name, NO easing, NO duration here. Everything is a var().
THE ARTBOARD is the only new idea on this page. Everything inside an artboard
is composed from the seven devices, .u-pill and the type voices. If a rule
here sets a colour, it names a token; if it sets type, it sets a voice class
in the markup instead.
============================================================================ */
/* ----------------------------------------------------------------------------
.artboard , a real page at TRUE PIXEL SIZE, scaled to fit its container.
Why true size: a later agent copies one artboard's markup, drops it into a
blank document at --aw x --ah, and exports it. If the artboard were built in
percentages it would export at whatever size the browser happened to be, and
every measurement in the notes would be a lie.
How the scale works: the frame is a container query unit host. The board is
laid out at --aw x --ah px and then transform: scale()d by --fit, which is
the frame's own width divided by --aw. transform does not affect layout, so
the frame reserves the scaled height with an aspect-ratio box. Nothing inside
the board knows it has been scaled: a 64px headline is 64 real px.
---------------------------------------------------------------------------- */
.artboard-frame{position:relative;width:100%;max-width:calc(var(--aw) * 1px);
aspect-ratio:var(--aw) / var(--ah);
container-type:inline-size;
/* the frame is the only thing that clips: an artboard bleeds nothing. */
overflow:hidden;
box-shadow:0 0 0 var(--rule) var(--hairline)}
.artboard{position:absolute;top:0;left:0;
width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
transform-origin:0 0;
/* --fit is set per frame by js/formats.js from the frame's measured width.
A CSS-only fallback of 1 keeps the board readable if the script never runs. */
transform:scale(var(--fit,1));
background:var(--ground);color:var(--ink);
overflow:hidden;
font-family:var(--font)}
/* the format index is a twelve by seven table: it cannot reflow to 390 without
becoming twelve stacked cards that hide the comparison it exists for, so it
scrolls sideways inside its own frame while the page does not pan. */
.fmt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fmt-scroll .ds-table{min-width:760px}
/* a run of artboards on a stage, each captioned with its production spec */
.fmt-set{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.fmt-item{flex:1 1 380px;min-width:0;max-width:640px}
.fmt-item--wide{flex-basis:100%;max-width:1080px}
.fmt-item--tall{flex:1 1 300px;max-width:360px}
.fmt-item--sq{flex:1 1 320px;max-width:420px}
.fmt-cap{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.5 var(--font);
letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}
.fmt-cap b{font-weight:900;opacity:1;letter-spacing:.06em}
/* ----------------------------------------------------------------------------
INSIDE AN ARTBOARD , layout primitives only.
These place things. They never invent a colour, a face or a shape.
---------------------------------------------------------------------------- */
.ab{position:absolute} /* free placement */
.ab-pad{position:absolute;inset:var(--pad,56px)} /* the type margin */
.ab-stack{display:flex;flex-direction:column;gap:var(--gap,16px);align-items:flex-start}
.ab-row{display:flex;align-items:center;gap:var(--gap,16px)}
.ab-row--sb{justify-content:space-between;width:100%}
.ab-push{margin-top:auto}
.ab-fill{flex:1 1 auto;min-width:0;min-height:0}
/* ink to the margins: a ground that runs edge to edge inside the board */
.ab-ground{position:absolute;inset:0}
.ab-ground--pink{background:var(--pink)}
.ab-ground--coral{background:var(--coral)}
.ab-ground--yellow{background:var(--yellow)}
.ab-ground--cream{background:var(--cream)}
.ab-ground--black{background:var(--black)}
/* the poster's black slab: the ARTIST NAME block on the LINEUP ANNOUNCEMENT
sheet and the black band under SET TIMES. Square, no border, cream ink. */
.ab-slab{background:var(--black);color:var(--cream);padding:var(--s5) var(--s6);
border-radius:var(--radius-slab)}
.ab-slab--tight{padding:var(--s4) var(--s5)}
/* the pink label bar: EARLY BIRD's tag and the stage headers on SET TIMES.
A full-width bar of stage colour with black caps in it. */
.ab-bar{display:flex;align-items:center;gap:var(--s3);
background:var(--dc,var(--primary));color:var(--black);
padding:var(--s2) var(--s4);border-radius:var(--radius-slab)}
.ab-bar--main{--dc:var(--stage-main)}
.ab-bar--grove{--dc:var(--stage-grove)}
.ab-bar--corner{--dc:var(--stage-corner)}
/* the three-line corner label from every poster: MUSIC / PEOPLE / TOGETHER,
micro caps, tight, hugging a corner. */
.ab-corner{line-height:1.45;letter-spacing:var(--track-micro)}
.ab-corner--r{text-align:right}
/* a hairline rule inside a board, at the poster's own 2px weight */
.ab-rule{height:var(--rule);background:currentColor;width:100%;flex:none;opacity:.9}
.ab-rule--thin{height:1px;opacity:.35}
/* the set-times / day-board table, built as a grid so the artboard has no
layout surprises when it is copied into an export document. */
.ab-grid{display:grid;gap:1px;background:currentColor}
.ab-grid > *{background:var(--ground)}
/* placeholder image block. Never a stock photo and never a grey box with a
cross in it: it is the brand's own black slab with a micro label, so a board
with no photography still reads as UNIÓN. */
.ab-img{position:relative;background:var(--black);color:var(--cream);
display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-slab)}
.ab-img > .t-micro{opacity:.55}
/* safe areas, drawn, for the 9:16 story. A dashed inset that a later agent can
see and respect. It is documentation drawn ON the artboard, so it carries
data-export-omit and the notes say to delete it before export. */
.ab-safe{position:absolute;pointer-events:none;
outline:2px dashed var(--pink);outline-offset:0}
.ab-safe__tag{position:absolute;top:0;left:0;transform:translateY(-100%);
background:var(--pink);color:var(--black);padding:3px 6px;
font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}
/* ----------------------------------------------------------------------------
PHYSICAL OBJECTS , the one place the brief allows all-over pattern, because
the pattern is the SKIN of the object (wristband webbing, lanyard tape, the
cloth of a flag). Everywhere else pattern goes through .pattern-slot.
---------------------------------------------------------------------------- */
/* the woven tape of a wristband or a lanyard. The pattern is the weave. */
.ab-tape{position:relative;overflow:hidden;background:var(--black)}
.ab-tape__skin{position:absolute;inset:0;z-index:var(--z-river)}
.ab-tape__print{position:relative;z-index:var(--z-body);display:flex;align-items:center;
gap:var(--s6);height:100%;padding:0 var(--s5)}
/* a flag: cloth on a pole, hanging. The pole is a rule, the cloth is a ground. */
.ab-flag{position:relative;display:flex;flex-direction:column}
.ab-flag__pole{position:absolute;top:0;bottom:0;left:0;width:var(--rule-heavy);
background:var(--black)}
.ab-flag__cloth{margin-left:var(--s3);flex:1 1 auto;position:relative;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:var(--s4);padding:var(--s5) var(--s4)}
/* A totem used as a PHYSICAL SIGN fills its post: on a 2400mm totem the bars
divide the whole panel rather than stacking at the top and leaving foamex
showing. This adds nothing to .d-totem's look, it only lets its rows share the
height, so the device stays lane F's and this stays a layout decision. */
.ab-totem-fill{display:flex;flex-direction:column}
.ab-totem-fill > .d-totem__bar{flex:1 1 0;min-height:0}
/* ----------------------------------------------------------------------------
Responsive. Artboards scale, so nothing here changes an artboard's INSIDE:
only how many sit side by side. That is the point of the helper.
---------------------------------------------------------------------------- */
@media (max-width:700px){
.fmt-set{gap:var(--s5)}
.fmt-item,.fmt-item--tall,.fmt-item--sq{flex-basis:100%;max-width:100%}
}