/* ==========================================================================
   METRO OLOGRAFIX — "The Underground Bulletin"
   Dark editorial, Swiss/Bauhaus discipline. See DESIGN.md.
   No framework, no third-party requests.
   ========================================================================== */
/* IBM Plex Sans (400/500/600/700) + IBM Plex Mono Regular, self-hosted. Per the MX Graphics Standards Manual. */
@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/plex-sans/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/plex-sans/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/plex-sans/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/plex-sans/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/fonts/plex-sans/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }

@font-face { font-family:'Plex'; src:url('/fonts/plex-mono/ibm-plex-mono-latin-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
/* Mono Bold is used only to reproduce the fleece print in the Shop section */
@font-face { font-family:'Plex'; src:url('/fonts/plex-mono/ibm-plex-mono-latin-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --black:#000; --bg:#000; --surface:#0e0e0e; --surface-h:#161616;
  --line:#1a1a1a; --line-h:#333;
  --w:#fff; --w2:rgba(255,255,255,.8); --w3:rgba(255,255,255,.62); --w4:rgba(255,255,255,.46);
  --red:#e53e3e; --green:#22c55e;
  --veil:rgba(5,5,5,.95); --veil-soft:rgba(5,5,5,.3);
  --veil-card:rgba(5,5,5,.82); --veil-mid:rgba(5,5,5,.6); --veil-faint:rgba(5,5,5,.05);
  --scrim:rgba(0,0,0,.92); --scrim-mid:rgba(0,0,0,.4);
  --green-tint:rgba(34,197,94,.12);
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'Plex','IBM Plex Mono',ui-monospace,monospace;
  --max:1180px;
  --nav-h:3.5rem;
  --gap:clamp(1rem,2vw,1.5rem);
  --sec:clamp(3.5rem,7vw,6rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--nav-h) + 1rem);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;color-scheme:dark;scrollbar-color:var(--line-h) var(--black)}
::selection{background:var(--w);color:var(--black)}
:focus-visible{outline:2px solid var(--w);outline-offset:3px}
body{font-family:var(--sans);background:var(--bg);color:var(--w);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
b,strong{font-weight:600}


.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);position:relative;z-index:1}

/* ═══════════ NAV ═══════════ */
/* A solid black bar with a hairline: the nav never sits on a photo; the mosaic and image headers start below it */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--black);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
@media(min-width:68.75em){.nav__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}}
.nav__mark{display:flex;align-items:center;padding:3px 0;transition:opacity .2s;flex-shrink:0;grid-column:1/4;grid-row:1;justify-self:start}.nav__mark img{height:24px;width:auto}
.nav__mark:hover{opacity:.6}

.nav__links{display:none;gap:clamp(1.1rem,1.6vw,1.75rem);font-family:var(--sans);font-size:.85rem;align-items:center;grid-column:4/-1;grid-row:1;padding-right:7rem}
@media(min-width:68.75em){.nav__links{display:flex}}
.nav__links a,.nav__links button{color:var(--w3);transition:color .2s;background:none;border:none;font-family:var(--sans);font-size:.85rem;padding:0;cursor:pointer}
.nav__links a:hover,.nav__links button:hover,.nav__links a.on{color:var(--w)}
.nav__links a.on{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* dropdown */
.dd{position:relative}
.dd__menu{display:none;position:absolute;top:100%;left:-16px;z-index:50;padding-top:10px}
.dd:not(.dd--closed):hover .dd__menu,.dd:not(.dd--closed):focus-within .dd__menu{display:block}
.dd__inner{background:var(--surface);border:1px solid var(--line);padding:6px 0;min-width:170px}
.dd__inner a{display:block;padding:8px 16px;font-size:.8rem;color:var(--w3);transition:color .15s,background-color .15s}
.dd__inner a:hover{color:var(--w);background:var(--surface-h)}
.dd svg{width:10px;height:10px;margin-left:3px;transition:transform .2s}
.dd:not(.dd--closed):hover svg,.dd:not(.dd--closed):focus-within svg{transform:rotate(180deg)}

.nav__lang{display:none;grid-column:4/-1;grid-row:1;justify-self:end}
@media(min-width:68.75em){.nav__lang{display:block}}

/* language switch */
.lang{display:flex;gap:.25rem;font-family:var(--sans);font-size:.75rem}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}
.mmenu__foot .lang a{min-width:44px;min-height:44px;font-size:.9rem}
.lang a{color:var(--w4);transition:color .2s}
.lang a:hover,.lang a.on{color:var(--w)}
.lang a.on{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* social links */
.soc{display:flex;gap:.25rem;align-items:center;margin:0 -12px}
.soc a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.soc a{color:var(--w4);transition:color .2s;font-size:1rem}
.soc a:hover{color:var(--w)}

/* text for screen readers only (live regions) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:1rem;top:-3rem;z-index:300;background:var(--w);color:var(--black);font-family:var(--sans);font-size:.8rem;padding:.5rem .9rem;transition:top .2s}
.skip:focus{top:1rem}

.nav__burger{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;width:44px;height:44px;margin-right:-8px}
@media(min-width:68.75em){.nav__burger{display:none}}
.nav__burger span{display:block;width:100%;height:1.5px;background:var(--w)}

/* ═══════════ MOBILE MENU ═══════════ */
.mmenu{position:fixed;inset:0;overscroll-behavior:contain;background:var(--black);z-index:200;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.mmenu.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
/* Same height and hairline as the nav bar, so the logo and the burger/close button don't move when the menu opens */
.mmenu__top{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;height:calc(var(--nav-h) + 1px);padding:0 clamp(1.25rem,4vw,2.5rem);border-bottom:1px solid var(--line)}
.mmenu__top img{height:1.5rem;width:auto}
.mmenu__x{font-size:1.5rem;color:var(--w3);padding:8px;min-width:44px;min-height:44px;margin-right:-8px;transition:color .2s}
.mmenu__x:hover{color:var(--w)}
.mmenu__body{flex:1;display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;padding:1rem clamp(1.25rem,4vw,2.5rem)}
.mmenu__body>a{display:block;font-size:clamp(1.6rem,6vw,3rem);font-weight:600;padding:.6rem 0;color:var(--w3);transition:color .2s,transform .3s var(--ease)}
.mmenu__body>a:hover,.mmenu__body>a.on{color:var(--w);transform:translateX(16px)}
.mmenu__foot{padding:1.5rem clamp(1.25rem,4vw,2.5rem) 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;border-top:1px solid var(--line)}
.mmenu__foot .soc a{font-size:1.15rem}
.mmenu__sub{display:flex;flex-direction:column;padding:0 0 .75rem 1.25rem;border-left:1px solid var(--line);margin-left:.2rem}
.mmenu__sub a{font-family:var(--sans);font-size:.95rem;padding:.35rem 0;color:var(--w3);transition:color .2s}
.mmenu__sub a:hover,.mmenu__sub a.on{color:var(--w)}

/* ═══════════ CTA LINE ═══════════ */
.cta{display:inline-flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);width:100%;text-decoration:none}
.cta__label{font-family:var(--sans);font-size:.85rem;font-weight:500;min-width:0;overflow-wrap:break-word;border-bottom:1px solid var(--w3);padding-bottom:2px}
.cta__line{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.cta__line::after{content:'';position:absolute;inset:0;background:var(--w);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cta:hover .cta__line::after,.cta:focus-visible .cta__line::after{transform:scaleX(1)}
.cta__arrow{color:var(--w3);transition:transform .3s var(--ease),color .3s}
.cta:hover .cta__arrow,.cta:focus-visible .cta__arrow{transform:translateX(6px);color:var(--w)}

/* ═══════════ SECTION GRID ═══════════
   12 columns: side heading in 1–3, content in 4–12 (nav links start on col 4 too) */
.sec{padding:var(--sec) 0}
.sec+.sec .sec__in::before{content:'';grid-column:1/-1;height:1px;background:var(--line);margin-bottom:calc(var(--sec) - clamp(1.5rem,3vw,2rem))}
.sec+.sec{padding-top:0}
/* Below 48em every child spans the full row, so the 11 column gaps would only eat width (and overflow with large text) */
.sec__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;row-gap:clamp(1.5rem,3vw,2rem)}
.sec__h{grid-column:1/-1;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.sec__body{grid-column:1/-1;min-width:0}
@media(min-width:48em){.sec__in{column-gap:var(--gap)}.sec__h{grid-column:1/4}.sec__body{grid-column:4/-1}}
.sec__body--full{grid-column:1/-1!important}
.sec__h--year{font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--w4)}
.sec__h--now{color:var(--w)}
main>.sec:first-child{padding-top:0}
.sede__hero+main>.sec:first-child{padding-top:clamp(2rem,4vw,3rem)}
.sec__more{margin-top:clamp(1.5rem,3vw,2.25rem);max-width:380px}

/* intro */
.intro__text{max-width:62ch;font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.85;color:var(--w2);margin-bottom:2.25rem}

/* ═══════════ LOCATIONS ═══════════ */
.locs__grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:37.5em){.locs__grid{grid-template-columns:1fr 1fr}}
.loc__card{--loc-pad:clamp(1.25rem,2.5vw,2rem);position:relative;overflow:hidden;min-height:clamp(220px,30vw,320px);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--loc-pad)}
/* The veil is anchored to the text block, so text that grows (zoom, longer copy) never climbs onto bare map */
.loc__body::before{content:'';position:absolute;z-index:-1;top:-3.5rem;left:calc(-1*var(--loc-pad));right:calc(-1*var(--loc-pad));bottom:calc(-1*var(--loc-pad));background:linear-gradient(to top,var(--veil-card) 0,var(--veil-card) 45%,var(--veil-mid) calc(100% - 3.5rem),var(--veil-faint) 100%);pointer-events:none}
.loc__map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85;pointer-events:none;transform-origin:center}
.locs__grid>*:nth-child(1) .loc__map{transform:scale(2.5)}
.locs__grid>*:nth-child(2) .loc__map{transform:scale(1.15)}
.loc__card>*:not(.loc__map){position:relative;z-index:1}
.loc__title{font-size:.95rem;font-family:var(--mono);font-weight:400;margin-bottom:.6rem}
.loc__text{font-size:.85rem;color:var(--w3);line-height:1.65;margin-bottom:.85rem}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.8rem;color:var(--w4)}
.status[data-state=open]{color:var(--green)}
.status[data-state=closed]{color:var(--red)}

/* ═══════════ MOSAIC ═══════════ */
.mosaic{position:relative;z-index:1;overflow:hidden;padding-top:calc(var(--nav-h) + 5px)}
.mosaic__grid{display:grid;gap:4px;padding:0 4px;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(70px,11vw,130px)}
.mosaic__grid>*{overflow:hidden;position:relative}
.mosaic__grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .5s var(--ease),transform .5s var(--ease)}
.mosaic__grid>*:hover img{filter:grayscale(.2) contrast(1) brightness(1);transform:scale(1.06)}
/* placement */
.m1{grid-column:1/4;grid-row:1/3}
.m2{grid-column:4/6;grid-row:1/2}
.m3{grid-column:6/8;grid-row:1/2}
.m4{grid-column:8/10;grid-row:1/2}
.m5{grid-column:10/13;grid-row:1/3}
.m6{grid-column:4/7;grid-row:2/4}
.m7{grid-column:7/10;grid-row:2/4}
.m8{grid-column:1/4;grid-row:3/5}
.m9{grid-column:4/10;grid-row:4/5}
.m10{grid-column:10/13;grid-row:3/5}

.mosaic__text{position:absolute;left:0;right:0;bottom:0;padding:8rem 0 clamp(1.5rem,4vw,3rem);background:linear-gradient(to top,var(--scrim) 0%,var(--scrim-mid) 50%,transparent 100%);z-index:3;pointer-events:none}
.mosaic__text a{pointer-events:auto}
/* The home headline runs a step above every page title (the marquee token): the front page's first line */
.mosaic__h{font-size:clamp(2.5rem,7vw,5.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;text-wrap:balance;margin-bottom:1.25rem}
.mosaic__cta{max-width:280px}
/* Credit of a tile that isn't ours: a black label in the tile's top-left corner (top, because the headline's scrim
   covers the bottom of the hero); on phones only "© author", the license stays for screen readers */
.mosaic__credit{position:absolute;top:0;left:0;z-index:1;padding:.2rem .45rem;background:var(--bg);font-size:.7rem;line-height:1.4;color:var(--w4);text-decoration:none}
a.mosaic__credit:hover{color:var(--w)}
a.mosaic__credit:focus-visible{outline-offset:-2px}
@media(max-width:37.4375em){.mosaic__lic{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* responsive mosaic */
@media(max-width:56.1875em){
  .mosaic__grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(60px,14vw,100px)}
  .m1{grid-column:1/3;grid-row:1/3}.m2{grid-column:3/5;grid-row:1/2}.m3{grid-column:5/7;grid-row:1/2}
  .m4{display:none}.m5{grid-column:5/7;grid-row:2/3}.m6{grid-column:3/5;grid-row:2/4}.m7{grid-column:5/7;grid-row:3/4}
  .m8{grid-column:1/3;grid-row:3/5}.m9{grid-column:3/7;grid-row:4/5}.m10{display:none}
}

/* ═══════════ PROJECTS ═══════════ */
.prow{display:grid;grid-template-columns:1fr;gap:.75rem;padding:clamp(1.25rem,2.5vw,2rem) 0;border-bottom:1px solid var(--line);transition:background-color .25s;text-decoration:none;color:inherit}
@media(min-width:48em){.prow{grid-template-columns:3rem 1fr 1.1fr;gap:clamp(1rem,2vw,2rem);align-items:start}}
.prow:first-of-type{border-top:1px solid var(--line)}
.prow:hover,.prow:focus-visible{background:var(--surface);margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.prow__name{font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;transition:transform .3s var(--ease)}
.prow:hover .prow__name,.prow:focus-visible .prow__name{transform:translateX(6px)}
.prow__desc{font-size:.9rem;color:var(--w4);line-height:1.65;transition:color .25s;max-width:380px}
.prow:hover .prow__desc,.prow:focus-visible .prow__desc{color:var(--w3)}

/* ═══════════ FOOTER ═══════════ */
.foot{border-top:1px solid var(--line);padding:clamp(2rem,4vw,3.5rem) 0 1.5rem;margin-top:auto}
.foot__in{display:flex;flex-direction:column;gap:1.5rem}
.foot__credit a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--w4)}
.foot__credit a:hover{color:var(--w)}
@media(min-width:37.5em){.foot__in{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.foot__l,.foot__r{font-family:var(--mono);font-size:.7rem;color:var(--w4);line-height:2}
.foot__r{font-family:var(--sans);font-size:.8rem}
.foot__logo{display:inline-block;margin-bottom:1.25rem;transition:opacity .2s}
.foot__logo:hover{opacity:.7}
.foot__logo img{height:72px;width:auto}
.foot__r{text-align:left}
@media(min-width:37.5em){.foot__r{text-align:right}}
.foot__r a{color:var(--w4);transition:color .2s;display:inline-block;padding:.35rem 0}
.foot__r a:hover{color:var(--w)}

/* ═══════════ INNER PAGES ═══════════ */
/* Text-only page header: compact, content follows the title (photo headers use .sede__hero at hero height) */
.phdr{padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,6rem));padding-bottom:clamp(1.5rem,4vw,3rem)}
.phdr__bc{font-family:var(--mono);font-size:.7rem;color:var(--w4);margin-bottom:1.25rem}
.phdr__bc a{position:relative;transition:color .2s}
.phdr__bc a::after{content:'';position:absolute;inset:-5px -4px}
.phdr__bc li:first-child a::after{inset:-5px -9px}
.phdr__bc a:hover{color:var(--w)}
.phdr__title{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}

.prose{max-width:34em;font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.85;color:var(--w3);overflow-wrap:break-word}
.prose p{margin-bottom:1.5em}
.prose strong{color:var(--w);font-weight:600}
.prose a{color:var(--w);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--w4);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--w)}
.prose ul,.prose ol{padding-left:1.5em;margin-bottom:1.5em}
.prose li{margin-bottom:.5em}

/* calendar bar */
.calbar{display:flex;flex-direction:column;gap:1rem}
@media(min-width:40em){.calbar{flex-direction:row;align-items:center;justify-content:space-between}}
.calbar__info{display:flex;align-items:center;gap:.75rem}
.calbar__t{font-weight:500;font-size:.9rem}
.calbar__d{font-size:.75rem;color:var(--w4)}
.calbar__btns{display:flex;gap:.4rem;flex-wrap:wrap}
.gbtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.78rem;padding:.45rem .85rem;border:1px solid var(--line);color:var(--w3);transition:color .2s,border-color .2s;background:transparent;text-decoration:none}
.gbtn:hover{border-color:var(--w);color:var(--w)}

/* events */
.evlist{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:1fr;gap:.5rem;padding:clamp(1rem,2vw,1.5rem) 0;border-bottom:1px solid var(--line);transition:background-color .2s;text-decoration:none;color:inherit}
@media(min-width:40em){.ev{grid-template-columns:90px 1fr auto;gap:1.5rem;align-items:start}}
.ev:hover,.ev:focus-visible{background:var(--surface);margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.ev__date{font-family:var(--mono);font-size:.8rem;color:var(--w4);white-space:nowrap;padding-top:2px}
.ev__title{font-size:1.05rem;font-weight:500;margin-bottom:3px;transition:transform .25s var(--ease)}
.ev:hover .ev__title,.ev:focus-visible .ev__title{transform:translateX(4px)}
.ev__meta{font-family:var(--sans);font-size:.78rem;color:var(--w4);display:flex;flex-wrap:wrap;gap:.75rem}
.ev__meta span{display:inline-flex;align-items:center;gap:4px}
.ev__badge{font-family:var(--sans);font-size:.72rem;padding:3px 8px;white-space:nowrap;align-self:start;justify-self:start}
.ev__badge--up{background:var(--green-tint);color:var(--green)}
/* Home lists: the same rows as Attività and Progetti with the names a step up (Headline small), so the front page
   is not the small print of its own sections; the empty state speaks at Lead small */
.evlist--home .ev__title{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:.4rem}
@media(min-width:40em){.evlist--home .ev__date{padding-top:.5em}}
.empty--lead{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.65;color:var(--w2)}


/* board */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:var(--gap)}
.bcard{padding:1.25rem 0;border-bottom:1px solid var(--line);transition:background-color .2s}
.bcard:hover{background:var(--surface);margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.bcard__name{font-size:.95rem;font-weight:500;margin-bottom:3px}
.bcard__nick{font-family:var(--mono);font-size:.8rem;color:var(--w4);margin-bottom:.4rem}
.bcard__role{font-size:.85rem;color:var(--w3);margin-bottom:.6rem}
.bcard__mail{font-family:var(--mono);font-size:.7rem;color:var(--w4);transition:color .2s;display:block}
.bcard__mail:hover{color:var(--w)}

.actbtns{display:flex;gap:.75rem;margin-top:2.5rem;flex-wrap:wrap}
/* Button standard — three weights, one per kind of action (DESIGN.md → Buttons):
   .obtn--solid  commits the visitor (join); one per page
   .obtn         a distinct action beside the reading flow, often leaving the site (↗); hairline is too faint
                 to read as a button on black, so the border sits at Text 46 and the label at full white
   .cta          continue within the site to a section or its full list (→) */
.obtn{display:inline-block;font-family:var(--sans);font-size:.85rem;font-weight:500;padding:.8rem 1.75rem;border:1px solid var(--w4);color:var(--w);transition:color .2s,border-color .2s,background-color .2s;text-decoration:none}
.obtn:hover{border-color:var(--w);color:var(--w);background:var(--surface)}

/* ═══════════ SEDE ═══════════ */
.sede__hero{position:relative;overflow:hidden;min-height:clamp(280px,40vw,420px);display:flex;align-items:flex-end;padding-bottom:clamp(2rem,4vw,3.5rem)}
.sede__map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85;pointer-events:none}
.sede__hero-over{position:absolute;inset:0;background:linear-gradient(to top,var(--veil) 30%,var(--veil-soft) 100%);pointer-events:none}
.sede__hero-in{position:relative;z-index:1;width:100%}
.sede__title{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;margin:.5rem 0 .25rem}
.sede__addr{font-family:var(--sans);font-size:.85rem;color:var(--w3)}
/* Sede pages: the live state completes the title ("Pescara è aperta") at the same size and weight */
.sede__sep{color:var(--w4);font-weight:400}
.status--title{display:inline;font:inherit;font-weight:400;letter-spacing:inherit;color:var(--w4)}
.status--title[data-state=open]{color:var(--green)}
.status--title[data-state=closed]{color:var(--red)}

.sede__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
@media(min-width:40em){.sede__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sede__info-block{padding:clamp(1.25rem,2.5vw,2rem);border:1px solid var(--line);margin:-1px 0 0 -1px}
.sede__info-label{font-family:var(--sans);font-size:.72rem;color:var(--w4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.sede__info-val{font-size:clamp(.9rem,1.4vw,1rem);font-weight:500;margin-bottom:.3rem;overflow-wrap:anywhere}
.sede__info-val a{color:var(--w);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--w4);transition:text-decoration-color .2s}
.sede__info-val a:hover{text-decoration-color:var(--w)}
.sede__info-sub{font-size:.8rem;color:var(--w4);line-height:1.5}






/* ═══════════ HUGO PORT ADDITIONS ═══════════ */
main{flex:1;display:block}
.phdr__bc ol{display:flex;flex-wrap:wrap;gap:.4rem}
.phdr__bc li+li::before{content:"/";margin-right:.4rem;color:var(--w4)}
.phdr__bc li[aria-current]{color:var(--w3)}
/* Over a photo or map the layer behind the breadcrumb is not pure black (map lines reach ~3:1 at Text 46): step up one tier */
.sede__hero .phdr__bc,.sede__hero .phdr__bc li+li::before{color:var(--w3)}
.sede__hero .phdr__bc li[aria-current]{color:var(--w2)}
.phdr__sub{max-width:62ch;margin-top:1rem;font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.6;color:var(--w2)}
.phdr__title{text-wrap:balance;overflow-wrap:anywhere}

/* rows without a mark (generic lists) */
.prow--plain{grid-template-columns:1fr}
@media(min-width:48em){.prow--plain{grid-template-columns:1fr 1.1fr}}
.prow__ext{font-family:var(--mono);font-size:.8em;color:var(--w4);margin-left:.25em}

/* event row extras */
.ev__sum{margin-top:.4rem;font-size:.9rem;color:var(--w3);line-height:1.6;max-width:60ch}
.recurring-event{font-family:var(--sans);font-size:.78rem;color:var(--w3);margin-top:.35rem}
.recurring-event strong{color:var(--w);font-weight:600}
.recurring-event .loading{font-style:italic}
.empty{font-size:.95rem;color:var(--w3);max-width:56ch}

/* facts lattice (event + sede details) */
.facts .sede__info-val a{color:var(--w)}
.facts .recurring-event{margin-top:.5rem}

/* calendar subscribe */
.calbar__note{font-size:.8rem;color:var(--w4);margin-top:.75rem}
.calbar__note a{text-decoration:underline;text-underline-offset:3px}
.calbar__note a:hover{color:var(--w)}

/* side-column table of contents */
.toc{font-family:var(--sans);font-size:.85rem;line-height:1.5}
@media(min-width:48em){.toc{position:sticky;top:5rem;align-self:start;max-height:calc(100vh - 6rem);overflow-y:auto;scrollbar-width:thin;padding-right:.5rem}}
.toc ul{display:flex;flex-direction:column;gap:.45rem}
.toc ul ul{padding:.45rem 0 0 .9rem;border-left:1px solid var(--line)}
.toc a{color:var(--w3);transition:color .2s}
.toc a:hover{color:var(--w)}

/* long-form content from markdown */
.prose--wide{max-width:36em}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--w);margin:2.2em 0 .7em}
.prose h3{font-size:1.1rem;font-weight:500;color:var(--w);margin:1.8em 0 .5em}
.prose h4{font-size:1rem;font-weight:500;color:var(--w);margin:1.5em 0 .4em}
.prose>*:first-child{margin-top:0}
.prose ul{list-style:square}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--w4)}
.prose em{color:var(--w2)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.prose blockquote{border-left:1px solid var(--w4);padding-left:1.25rem;margin:1.5em 0;color:var(--w2)}
.prose code{font-family:var(--mono);font-size:.88em;color:var(--w);background:var(--surface);padding:.1em .35em}
.prose pre{font-family:var(--mono);font-size:.85rem;background:var(--surface);border:1px solid var(--line);padding:1rem 1.25rem;overflow-x:auto;margin:1.5em 0;line-height:1.6}
.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.9rem}
.prose th,.prose td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--sans);font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--w4)}
.prose img{max-width:100%;height:auto;margin:0 0 1.25rem;border-radius:0;box-shadow:none}
.prose::after{content:"";display:table;clear:both}
/* utility classes that existing content embeds (formerly Tailwind) */
.prose img.w-full{width:100%}
@media(min-width:48em){
  .prose img.md\:w-auto{width:auto}
  .prose img.md\:float-right{float:right;margin:.35rem 0 1.25rem 2rem}
  .prose img.md\:float-left{float:left;margin:.35rem 2rem 1.25rem 0}
  .prose img.md\:max-w-sm,.prose img.max-w-sm{max-width:min(24rem,45%)}
  .prose img.max-w-lg{max-width:min(32rem,55%)}
}
/* buttons written as raw HTML in markdown (Associati): .obtn keeps its own colour and no underline */
.prose a.obtn{text-decoration:none}
.prose a.obtn--solid,.prose a.obtn--solid:hover{color:var(--black)}

/* photo gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
@media(min-width:40em){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(min-width:64em){.gallery{grid-template-columns:repeat(5,1fr)}}
.gallery a{display:block;aspect-ratio:1;overflow:hidden;background:var(--surface)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery a:hover img,.gallery a:focus-visible img{transform:scale(1.04)}

/* board */
.bcard__mail{overflow-wrap:anywhere}


/* shop copy */
.christmas-lights-wrapper{position:relative}

/* 404 */
.nf{min-height:50vh}

/* footer easter egg (static/js/main.js) */
.hugo-text{display:inline-block;position:relative}
.letter{display:inline-block;transition:transform .3s,opacity .3s}
.letter.rotate{animation:flipLetter .6s ease-out}
@keyframes flipLetter{0%{transform:rotateX(0);opacity:1}50%{transform:rotateX(90deg);opacity:0}51%{transform:rotateX(270deg);opacity:0}100%{transform:rotateX(360deg);opacity:1}}

@media(prefers-reduced-motion:reduce){.letter.rotate{animation:none!important}}
.list__intro{margin-bottom:var(--sec)}
.prose ul,.prose ol{display:flow-root}
.sede__map--pescara{transform:scale(3);transform-origin:60% 52%}
.sede__map--photo{filter:grayscale(1) contrast(1.1);opacity:.55;object-position:center 65%}

/* ═══════════ SHOP ═══════════
   Side heading like every home section; in columns 4–12, photo on the left and the slogan block on the right
   (from ideas/ideashop.jpeg). The body is its own 9-column grid on the section's gutter. */
.shop__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2rem) var(--gap);align-items:start}
.shop__text{container-type:inline-size}
@media(min-width:48em){
  .shop__in{grid-template-columns:repeat(9,minmax(0,1fr))}
  .shop__media{grid-column:1/5}
  .shop__text{grid-column:6/-1}
}
.shop__photo{aspect-ratio:1;overflow:hidden;background:var(--surface)}
.shop__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .5s var(--ease),transform .5s var(--ease)}
.shop__photo:hover img{filter:none;transform:scale(1.03)}
/* The fleece print: mono bold caps, every line justified to the width of INFORMATION (11ch) */
.shop__print{font-family:var(--mono);font-weight:700;font-size:min(clamp(1.9rem,4.2vw,3.3rem),14.5cqi);line-height:1.2;width:11ch;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.shop__line{display:flex;justify-content:space-between;align-items:baseline}
.shop__free{background:var(--w);color:var(--black);padding:0 .12em;margin-right:-.12em}
.shop__intro{max-width:46ch;color:var(--w3);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.7;margin-bottom:.5rem}
.shop__intro strong{color:var(--w)}
.shop__deal{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;color:var(--w3);font-size:clamp(.95rem,1.4vw,1.05rem);margin-bottom:clamp(1.75rem,3vw,2.25rem)}
.shop__price{font-family:var(--mono);color:var(--w);font-size:1.15em}

/* Photo/map page headers sit a clear step below the home mosaic (about three quarters of its height): the mosaic
   opens the front page, these open its sections */
.sede__hero{min-height:calc(var(--nav-h) + clamp(14rem,26vw,22rem))}

/* ═══════════ PROGETTI ═══════════  one sheet per project, Attività's rhythm */
.proj__side{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
@media(max-width:47.9375em){.proj__side{flex-direction:row;align-items:center}}
.proj__mark{color:var(--w3)}
.proj__mark svg{display:block;width:32px;height:32px}
.proj__name{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;margin-bottom:clamp(.75rem,1.5vw,1.1rem)}
.proj__name a{transition:color .2s}
.proj__name a:hover{color:var(--w2)}
.proj__sub{max-width:58ch;color:var(--w2);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.65;margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.proj__links{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.proj__cta{width:min(320px,100%)}
.proj__ext{font-family:var(--mono);font-size:.85rem;min-width:0;overflow-wrap:anywhere;color:var(--w3);border-bottom:1px solid var(--w4);padding-bottom:2px;transition:color .2s,border-color .2s}
.proj__ext:hover{color:var(--w);border-color:var(--w)}
.proj:hover .proj__mark{color:var(--w)}

/* Photogallery: album cards. The card itself says "open me" at rest (cover, title, count, arrow); hover only reinforces. */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(1.5rem,3vw,2.25rem) var(--gap)}
.acard{position:relative;display:flex;flex-direction:column}
.acard__img{aspect-ratio:3/2;overflow:hidden;margin-bottom:.9rem;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px}
.acard__img img:first-child{grid-row:1/3}
.acard__img--single{display:block;background:var(--surface)}
.acard__img--single img:not(:first-child){display:none}
.acard__img img{width:100%;height:100%;min-height:0;object-fit:cover;background:var(--surface);transition:transform .5s var(--ease)}
.acard__title{font-size:1.1rem;font-weight:500;line-height:1.3;margin-bottom:.3rem}
.acard__title a::after{content:"";position:absolute;inset:0;z-index:0}
.acard__title a:focus-visible{outline:none}
.acard:has(.acard__title a:focus-visible){outline:2px solid var(--w);outline-offset:6px}
.acard__desc{font-size:.88rem;color:var(--w3);line-height:1.55;margin-bottom:.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.78rem;color:var(--w3)}
.acard__go{font-family:var(--sans);font-size:1.1rem;color:var(--w);transition:transform .3s var(--ease)}
.acard:hover .acard__img img,.acard:has(.acard__title a:focus-visible) .acard__img img{transform:scale(1.04)}
.acard:hover .acard__go,.acard:has(.acard__title a:focus-visible) .acard__go{transform:translateX(5px)}
.acard__sub{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.6rem;font-size:.82rem}
.acard__sub a{color:var(--w3);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--w4)}
.acard__sub a:hover{color:var(--w);text-decoration-color:var(--w)}

/* Phone: a real mosaic that fills the hero edge to edge under the nav bar (75svh in all) — 4 columns × 6 rows, mixed tile sizes, all 10 tiles,
   ten different photos (data/mosaic.json). */
@media(max-width:37.4375em){
  :root{--hero-h:75svh}
  .mosaic__grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);grid-auto-rows:auto;padding:0;height:calc(var(--hero-h) - var(--nav-h) - 5px)}
  .mosaic__grid>*{display:block!important}
  .mosaic__grid>.m1{grid-column:1/3!important;grid-row:1/3!important}
  .mosaic__grid>.m2{grid-column:3/5!important;grid-row:1/2!important}
  .mosaic__grid>.m3{grid-column:3/4!important;grid-row:2/3!important}
  .mosaic__grid>.m4{grid-column:4/5!important;grid-row:2/5!important}
  .mosaic__grid>.m5{grid-column:1/2!important;grid-row:3/5!important}
  .mosaic__grid>.m6{grid-column:2/4!important;grid-row:3/4!important}
  .mosaic__grid>.m7{grid-column:2/3!important;grid-row:4/5!important}
  .mosaic__grid>.m8{grid-column:3/4!important;grid-row:4/5!important}
  .mosaic__grid>.m9{grid-column:3/5!important;grid-row:5/7!important}
  .mosaic__grid>.m10{grid-column:1/3!important;grid-row:5/7!important}
}

/* Inline SVG icons (partials/icon.html) sit on the text baseline like the old icon font */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}
.soc .ico{width:1.05em;height:1.05em}
.calbar__info>.ico{font-size:1.15rem;color:var(--w4)}

/* Small uppercase label naming a sub-part inside a section ("Le nostre sedi" under L'associazione,
   "Prossimi eventi" under Attività): the label-section voice of the type scale */
.sec__sub{font-family:var(--sans);font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--w4);margin-bottom:1rem}

/* BBS: the sentence ends on a colon and the command answers it — machine text, prompted like a terminal */
.bbs__intro{margin-bottom:1.25rem}
.bbs__cmd{display:inline-flex;align-items:baseline;font-family:var(--mono);font-size:clamp(1rem,1.8vw,1.2rem);color:var(--w);border-bottom:1px solid var(--w3);padding-bottom:3px;transition:color .2s,border-color .2s}
.bbs__cmd:hover,.bbs__cmd:focus-visible{border-color:var(--w)}
.bbs__prompt{color:var(--w4);margin-right:.5em}

/* Associati: joining carries more weight than the Shop below it — the fees in one line (Plex Sans:
   a sentence, not machine text) and the page's only filled button, the inverted variant of .obtn */
.join__fees{color:var(--w3);font-size:clamp(.95rem,1.4vw,1.05rem);margin-bottom:clamp(1.75rem,3vw,2.25rem)}
.obtn--solid{border-color:var(--w);background:var(--w);color:var(--black)}
.obtn--solid:hover{border-color:var(--w2);background:var(--w2);color:var(--black)}

/* The Associati marquee: the reasons to join in display type, running edge to edge between two hairlines
   (full bleed like the mosaic: the section's own width, never 100vw). The track holds two identical groups
   and slides by half its width, so the loop has no seam. The band takes the place of the section's top rule.
   It moves for longer than five seconds next to other content, so hover pauses it and a button stops it
   (WCAG 2.2.2); under reduced motion it stands still on the column's left edge and the button goes. */
.join .sec__in::before{display:none}
.join .sec__in{padding-top:clamp(2rem,4vw,3rem)}
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee__track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee__track,.marquee.is-stopped .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee__group{display:flex;flex-shrink:0}
.marquee__group li{font-size:clamp(2.5rem,7vw,5.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap;padding:clamp(1rem,2vw,1.5rem) 0}
/* the separator is a Bauhaus square, not a glyph */
.marquee__group li::after{content:'';display:inline-block;width:.28em;height:.28em;background:var(--w);margin:0 .55em;vertical-align:.12em}
.marquee__stop{display:none}
.js .marquee__stop{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;width:clamp(3rem,6vw,4.5rem);background:var(--black);border-left:1px solid var(--line);color:var(--w3);transition:color .2s,background-color .2s}
.marquee__stop:hover{color:var(--w);background:var(--surface)}
/* the band clips overflow, so the ring sits inside the button */
.marquee__stop:focus-visible{outline-offset:-5px}
.marquee__stop svg{width:1rem;height:1rem;fill:currentColor}
.marquee__play,.marquee__stop[aria-pressed=true] .marquee__pause{display:none}
.marquee__stop[aria-pressed=true] .marquee__play{display:inline}

/* Reduced motion. Colour, border and tone changes stay: they are the hover and focus feedback.
   Movement goes: nudges, zooms, the line that draws across a CTA, the chevron and the skip link sliding in. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .skip,.dd svg,.cta__line::after{transition:none}
  .mmenu__body>a:not(.on):hover,
  .prow:hover .prow__name,.prow:focus-visible .prow__name,
  .ev:hover .ev__title,.ev:focus-visible .ev__title,
  .cta:hover .cta__arrow,.cta:focus-visible .cta__arrow,
  .acard:hover .acard__go,.acard:has(.acard__title a:focus-visible) .acard__go,
  .mosaic__grid>*:hover img,.shop__photo:hover img,.gallery a:hover img,.gallery a:focus-visible img,
  .acard:hover .acard__img img,.acard:has(.acard__title a:focus-visible) .acard__img img{transform:none}
  .marquee__track{animation:none;margin-left:max(clamp(1.25rem,4vw,2.5rem),calc((100% - var(--max))/2 + clamp(1.25rem,4vw,2.5rem)))}
  .js .marquee__stop{display:none}
}

/* Forced colours (Windows High Contrast). The burger, the hairlines and the filled shapes are drawn with
   background, which that mode overrides, so they get system colours; borders and text already follow the palette. */
@media(forced-colors:active){
  .nav__burger span,.cta__line::after{background:CanvasText}
  .cta__line,.sec+.sec .sec__in::before{background:GrayText}
  .obtn--solid{background:ButtonText;color:ButtonFace;border-color:ButtonText}
  .obtn--solid:hover,.prose a.obtn--solid:hover{background:Highlight;color:HighlightText;border-color:Highlight}
  .prose a.obtn--solid{color:ButtonFace}
  .shop__free{background:CanvasText;color:Canvas}
  .marquee__group li::after{background:CanvasText}
  .ev__badge--up{border:1px solid currentColor}
}
/* The MX logo files are white: on a light forced palette they would vanish */
@media(forced-colors:active) and (prefers-color-scheme:light){
  .nav__mark img,.mmenu__top img,.foot__logo img{filter:invert(1)}
}