/* floristeriazaragoza.com — editorial floral archive
   Hard edges. No radius. Black, bone, carnation red. */
@import url("/fonts/fonts.css");

:root{
  --ink:#0b0b0b;
  --bone:#efebe3;
  --paper:#f7f4ee;
  --red:#c4161c;
  --ash:#8b857c;
  --line:2px solid var(--ink);
  --hair:1px solid rgba(11,11,11,.22);
  --serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut:clamp(16px, 3vw, 44px);
  --max:1680px;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--red);color:var(--paper)}

/* ---------- type ---------- */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.display{font-family:var(--serif);font-weight:500;line-height:.86;letter-spacing:-.035em;margin:0}
.display em{font-style:italic;font-weight:400}
.xl{font-size:clamp(64px, 13.5vw, 240px)}
.l{font-size:clamp(48px, 8vw, 150px)}
.m{font-size:clamp(38px, 5vw, 86px)}
.s{font-size:clamp(28px, 3vw, 46px)}
.red{color:var(--red)}
.lede{font-family:var(--serif);font-size:clamp(22px, 2.1vw, 32px);line-height:1.25;font-weight:400;max-width:28ch}
.prose{max-width:62ch}
.prose p{margin:0 0 1.1em}
.prose a,.cites a{text-decoration-thickness:1px;text-underline-offset:3px}
.num{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line);display:grid;grid-template-columns:auto 1fr auto;align-items:stretch}
.top .mark{display:flex;align-items:center;gap:12px;padding:12px var(--gut);border-right:var(--line);text-decoration:none;font-family:var(--serif);font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.top .mark b{display:inline-block;width:14px;height:14px;background:var(--red)}
.top nav{display:flex;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{display:flex;align-items:center;padding:0 18px;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-right:var(--hair);white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{background:var(--ink);color:var(--paper)}
.top .ed{display:flex;align-items:center;padding:0 var(--gut);border-left:var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.16em}
@media (max-width:860px){.top{grid-template-columns:1fr}.top .mark{border-right:0;border-bottom:var(--hair)}.top .ed{display:none}.top nav a{padding:12px 14px}}

/* ---------- figures & credits ---------- */
figure{margin:0;position:relative}
figure .ph{overflow:hidden;background:var(--ink)}
figure .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.1,1), filter .6s}
figure:hover .ph img{transform:scale(1.035)}
figcaption{display:flex;justify-content:space-between;gap:16px;padding:8px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;line-height:1.45;color:var(--ash)}
figcaption .t{color:var(--ink);text-transform:uppercase;letter-spacing:.12em}
figcaption a{color:var(--ash)}
.ai-tag{display:inline-block;background:var(--red);color:var(--paper);padding:1px 6px;margin-right:6px;letter-spacing:.14em}
.on-dark figcaption,.on-dark figcaption a{color:#a9a39a}
.on-dark figcaption .t{color:var(--paper)}

/* ---------- sections ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.band{border-bottom:var(--line)}
.dark{background:var(--ink);color:var(--paper)}
.dark .kicker{color:#a9a39a}
.bone{background:var(--bone)}
.redbg{background:var(--red);color:var(--paper)}
.pad{padding-top:clamp(56px, 9vw, 140px);padding-bottom:clamp(56px, 9vw, 140px)}
.rule{border:0;border-top:var(--line);margin:0}

.sec-head{display:grid;grid-template-columns:120px 1fr;gap:var(--gut);align-items:end;padding:28px 0;border-bottom:var(--line)}
.sec-head .n{font-family:var(--serif);font-style:italic;font-size:64px;line-height:.8;color:var(--red)}
@media (max-width:700px){.sec-head{grid-template-columns:1fr}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-bottom:var(--line);background:var(--ink);color:var(--paper);white-space:nowrap}
.marquee div{display:inline-block;padding:14px 0;animation:mq 38s linear infinite;font-family:var(--serif);font-size:clamp(26px,3.4vw,52px);font-style:italic}
.marquee span{margin:0 .6em;color:var(--red);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee div{animation:none}figure .ph img{transition:none}}

/* ---------- HERO 1 — home: masthead over staggered triptych ---------- */
.h-home{position:relative;border-bottom:var(--line);overflow:hidden}
.h-home .tri{display:grid;grid-template-columns:1.1fr .8fr 1.25fr;gap:0;height:min(92vh,1000px);min-height:560px}
.h-home .tri figure{height:100%;border-right:var(--line)}
.h-home .tri figure:last-child{border-right:0}
.h-home .tri figure:nth-child(2){margin-top:14vh;height:calc(100% - 14vh);border-top:var(--line)}
.h-home .tri .ph{height:100%}
.h-home .tri figcaption{position:absolute;left:0;bottom:0;right:0;flex-direction:column;gap:2px;color:#ddd;padding:30px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.h-home .tri figcaption .t,.h-home .tri figcaption a{color:#fff}
.h-home .mast{position:absolute;left:0;right:0;top:0;padding:clamp(18px,3vw,40px) var(--gut) 60px;pointer-events:none;color:var(--paper);background:linear-gradient(rgba(0,0,0,.45),transparent);text-shadow:0 2px 30px rgba(0,0,0,.35)}
.h-home .mast em{color:var(--paper)}
.h-home .mast .display .red{color:var(--red)}
.h-home .mast .display{font-size:clamp(58px, 12.6vw, 232px)}
.h-home .card{position:absolute;right:var(--gut);bottom:var(--gut);width:min(420px, calc(100% - 2*var(--gut)));background:var(--paper);border:var(--line);padding:22px 24px}
.h-home .card p{margin:10px 0 0;font-family:var(--serif);font-size:21px;line-height:1.25}
@media (max-width:860px){
  .h-home .tri{grid-template-columns:1fr 1fr;height:auto}
  .h-home .tri figure{height:52vh}
  .h-home .tri figure:nth-child(2){margin-top:0;height:52vh}
  .h-home .tri figure:nth-child(3){grid-column:1/-1;height:44vh;border-top:var(--line);border-right:0}
  .h-home .card{position:relative;right:auto;bottom:auto;width:auto;margin:0;border:0;border-top:var(--line)}
}

/* ---------- HERO 2 — panorama with vertical title band (Ofrenda) ---------- */
.h-pano{display:grid;grid-template-columns:clamp(88px,10vw,170px) 1fr;border-bottom:var(--line);min-height:88vh}
.h-pano .spine{background:var(--red);color:var(--paper);border-right:var(--line);display:flex;align-items:flex-end;justify-content:center;padding:24px 0}
.h-pano .spine h1{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-weight:500;font-size:clamp(56px,7.4vw,136px);line-height:.85;margin:0;letter-spacing:-.03em;white-space:nowrap}
.h-pano .spine h1 em{font-weight:400}
.h-pano .stage{position:relative;display:grid;grid-template-rows:1fr auto}
.h-pano .stage figure{position:relative;min-height:60vh}
.h-pano .stage .ph{position:absolute;inset:0}
.h-pano .stage figcaption{position:absolute;left:16px;bottom:12px;color:#eee;text-shadow:0 1px 6px #000}
.h-pano .stage figcaption .t,.h-pano .stage figcaption a{color:#fff}
.h-pano .facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--line);background:var(--paper)}
.h-pano .facts div{padding:18px 22px;border-right:var(--hair)}
.h-pano .facts div:last-child{border-right:0}
.h-pano .facts b{display:block;font-family:var(--serif);font-size:clamp(34px,3.6vw,58px);line-height:1;font-weight:500}
@media (max-width:760px){.h-pano{grid-template-columns:64px 1fr;min-height:auto}.h-pano .stage figure{height:62vh}.h-pano .facts{grid-template-columns:1fr}.h-pano .facts div{border-right:0;border-bottom:var(--hair)}}

/* ---------- HERO 3 — split index (España) ---------- */
.h-split{display:grid;grid-template-columns:minmax(320px,.9fr) 1.1fr;border-bottom:var(--line);min-height:90vh}
.h-split .left{background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,64px) var(--gut);display:flex;flex-direction:column;justify-content:space-between;gap:40px;border-right:var(--line)}
.h-split ol{list-style:none;margin:0;padding:0;counter-reset:i}
.h-split li{counter-increment:i;border-top:1px solid #333}
.h-split li:last-child{border-bottom:1px solid #333}
.h-split li a{display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;padding:14px 0;text-decoration:none;font-family:var(--serif);font-size:clamp(22px,2.2vw,34px);transition:color .2s,padding .3s}
.h-split li a::before{content:counter(i, decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--red)}
.h-split li a span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#8d877e;text-transform:uppercase}
.h-split li a:hover{color:var(--red);padding-left:10px}
.h-split .right{position:relative}
.h-split .right figure{position:absolute;inset:0}
.h-split .right .ph{position:absolute;inset:0}
.h-split .right figcaption{position:absolute;left:16px;bottom:12px;color:#eee;text-shadow:0 1px 6px #000}
.h-split .right figcaption .t,.h-split .right figcaption a{color:#fff}
.h-split .right .stamp{position:absolute;top:var(--gut);right:var(--gut);background:var(--red);color:var(--paper);padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em}
@media (max-width:900px){.h-split{grid-template-columns:1fr}.h-split .right{height:70vh}.h-split .left{border-right:0;border-bottom:var(--line)}}

/* ---------- HERO 4 — filmstrip (Mundo) ---------- */
.h-film{position:relative;border-bottom:var(--line);background:var(--ink)}
.h-film .strip{display:grid;grid-template-columns:repeat(5,1fr);height:min(86vh,940px);min-height:520px}
.h-film .strip figure{border-right:2px solid var(--paper);height:100%}
.h-film .strip figure:last-child{border-right:0}
.h-film .strip figure:nth-child(even){transform:translateY(7%)}
.h-film .strip .ph{height:100%}
.h-film .strip .ph img{filter:grayscale(1) contrast(1.1)}
.h-film .strip figure:hover .ph img{filter:none}
.h-film .strip figcaption{display:none}
.h-film .title{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,6vh,70px);color:var(--red);pointer-events:none}
.h-film .title .display{font-size:clamp(64px,12vw,220px);text-shadow:0 0 1px rgba(0,0,0,.15)}
.h-film .title .kicker{color:var(--paper);display:inline-block;background:var(--ink);padding:6px 10px;margin-bottom:12px}
@media (max-width:760px){.h-film .strip{grid-template-columns:repeat(3,1fr);height:70vh}.h-film .strip figure:nth-child(n+4){display:none}}

/* ---------- HERO 5 — black stage with numerals (Estudio IA) ---------- */
.h-stage{background:var(--ink);color:var(--paper);border-bottom:var(--line);position:relative;overflow:hidden}
.h-stage .grid{display:grid;grid-template-columns:1fr minmax(260px,34vw) 1fr;align-items:center;min-height:94vh;gap:var(--gut);padding:clamp(28px,4vw,60px) var(--gut)}
.h-stage .big{font-family:var(--serif);font-style:italic;font-size:clamp(90px,17vw,320px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.h-stage .big.r{text-align:right;-webkit-text-stroke-color:var(--red)}
.h-stage figure .ph{aspect-ratio:3/4;outline:1px solid #3a3a3a;outline-offset:14px}
.h-stage .meta{display:flex;justify-content:space-between;align-items:end;gap:var(--gut);padding:0 var(--gut) var(--gut);flex-wrap:wrap}
@media (max-width:820px){.h-stage .grid{grid-template-columns:1fr;min-height:auto}.h-stage .big{font-size:96px}.h-stage .big.r{text-align:left}}

/* ---------- HERO 6 — archive / sepia document ---------- */
.h-arch{background:#e6dccb;border-bottom:var(--line);display:grid;grid-template-columns:1fr 1fr;min-height:84vh}
.h-arch .doc{padding:clamp(28px,4vw,64px) var(--gut);display:flex;flex-direction:column;justify-content:space-between;border-right:var(--line);background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(11,11,11,.08) 31px 32px)}
.h-arch figure{display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,60px);background:#d8ccb7}
.h-arch figure > div{border:var(--line);box-shadow:14px 14px 0 var(--ink);max-height:72vh}
.h-arch figure .ph{background:#d8ccb7}
.h-arch figure .ph img{filter:sepia(.35) contrast(1.05);max-height:70vh;width:auto;object-fit:contain}
.h-arch figcaption{position:absolute;left:var(--gut);bottom:12px}
@media (max-width:860px){.h-arch{grid-template-columns:1fr}.h-arch .doc{border-right:0;border-bottom:var(--line)}}

/* ---------- HERO 7 — pure type (credits) ---------- */
.h-type{border-bottom:var(--line);padding:clamp(48px,8vw,120px) 0 clamp(28px,4vw,48px)}
.h-type .display{font-size:clamp(56px,11vw,200px)}
.h-type .strip{display:grid;grid-template-columns:repeat(12,1fr);height:64px;margin-top:40px;border:var(--line)}
.h-type .strip div{border-right:var(--line);background-size:cover;background-position:center}
.h-type .strip div:last-child{border-right:0}

/* ---------- layouts ---------- */
.full figure .ph{height:min(92vh,980px)}
.full figcaption{padding:8px var(--gut) 10px}

.duo{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--line)}
.duo > *{border-right:var(--line)}
.duo > *:last-child{border-right:0}
.duo figure .ph{height:min(84vh,900px)}
.duo figcaption{padding:8px 16px 12px}
.duo .txt{padding:clamp(28px,4vw,64px) var(--gut);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
@media (max-width:820px){.duo{grid-template-columns:1fr}.duo > *{border-right:0;border-bottom:var(--line)}.duo figure .ph{height:62vh}}

.asym{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);padding:clamp(40px,6vw,100px) var(--gut);max-width:var(--max);margin:0 auto}
.asym .a{grid-column:1/8}
.asym .b{grid-column:8/13;align-self:end}
.asym .c{grid-column:3/7;margin-top:-10vh}
.asym .d{grid-column:8/12}
.asym .a .ph{aspect-ratio:4/3}
.asym .b .ph{aspect-ratio:3/4}
.asym .c .ph{aspect-ratio:1}
.asym .d .ph{aspect-ratio:4/5}
@media (max-width:820px){.asym{grid-template-columns:1fr}.asym > *{grid-column:auto !important;margin:0 !important}}

.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(180px,22vw,340px);border-top:var(--line);border-left:var(--line)}
.mosaic figure{border-right:var(--line);border-bottom:var(--line);overflow:hidden}
.mosaic figure .ph{height:100%}
.mosaic figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:var(--paper);border-top:var(--line);transform:translateY(101%);transition:transform .35s}
.mosaic figure:hover figcaption,.mosaic figure:focus-within figcaption{transform:none}
.mosaic .w2{grid-column:span 2}
.mosaic .h2{grid-row:span 2}
@media (max-width:820px){.mosaic{grid-template-columns:1fr 1fr}.mosaic .w2{grid-column:span 2}.mosaic figure figcaption{position:static;transform:none;border-top:var(--hair)}}

.cut figure .ph{clip-path:polygon(0 0,100% 0,100% 86%,82% 100%,0 100%)}
.cut-l figure .ph{clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 14%)}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--line)}
.cols3 > *{padding:28px var(--gut) 34px;border-right:var(--line)}
.cols3 > *:last-child{border-right:0}
@media (max-width:820px){.cols3{grid-template-columns:1fr}.cols3 > *{border-right:0;border-bottom:var(--line)}}

.chapter-head{display:grid;grid-template-columns:auto 1fr auto;gap:var(--gut);align-items:end;padding:clamp(40px,6vw,90px) var(--gut) 24px;border-bottom:var(--line);max-width:var(--max);margin:0 auto}
.chapter-head .n{font-family:var(--serif);font-style:italic;font-size:clamp(80px,10vw,180px);line-height:.75;color:var(--red)}
.chapter-head .where{text-align:right}
@media (max-width:760px){.chapter-head{grid-template-columns:1fr}.chapter-head .where{text-align:left}}

.cites{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ash);margin-top:22px;padding-top:12px;border-top:var(--hair)}
.cites ol{margin:0;padding-left:18px}
sup a{font-family:var(--mono);font-size:10px;color:var(--red);text-decoration:none;margin-left:1px}

/* lookbook (estudio) */
.look{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,32px);padding:clamp(40px,6vw,90px) var(--gut);max-width:var(--max);margin:0 auto}
.look figure{grid-column:span 2}
.look figure.w3{grid-column:span 3}
.look figure.w4{grid-column:span 4}
.look figure.w6{grid-column:span 6}
.look figure.push{margin-top:12vh}
.look .ph{border:var(--line)}
.look .idx{position:absolute;top:-2px;left:-2px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;padding:6px 9px;z-index:2;letter-spacing:.12em}
@media (max-width:820px){.look{grid-template-columns:1fr 1fr}.look figure,.look figure.w3,.look figure.w4,.look figure.w6{grid-column:span 2}.look figure.push{margin-top:0}}

/* index tiles (home) */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:var(--line)}
.tiles a{position:relative;display:block;text-decoration:none;border-right:var(--line);aspect-ratio:3/5;overflow:hidden;background:var(--ink)}
.tiles a:last-child{border-right:0}
.tiles a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .4s,transform 1.2s}
.tiles a:hover img{opacity:1;transform:scale(1.05)}
.tiles a .lab{position:absolute;left:0;right:0;bottom:0;padding:16px;color:var(--paper);background:linear-gradient(transparent,rgba(0,0,0,.75))}
.tiles a .lab b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,40px);line-height:.95}
.tiles a .no{position:absolute;top:0;left:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11px;padding:6px 9px;border-right:var(--line);border-bottom:var(--line)}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}.tiles a{aspect-ratio:3/4;border-bottom:var(--line)}.tiles a:last-child{grid-column:1/-1;aspect-ratio:16/9}}

/* credits table */
table.cred{width:100%;border-collapse:collapse;font-size:14px}
table.cred th,table.cred td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:var(--hair)}
table.cred th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:var(--line)}
table.cred td img{width:96px;height:72px;object-fit:cover;border:1px solid var(--ink)}
table.cred td.f{font-family:var(--mono);font-size:11.5px;word-break:break-word}
@media (max-width:760px){table.cred thead{display:none}table.cred tr{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;padding:12px 0;border-bottom:var(--hair)}table.cred td{border:0;padding:0}table.cred td:first-child{grid-row:span 4}}

/* footer */
footer.foot{background:var(--ink);color:var(--paper);border-top:var(--line)}
footer.foot .big{font-family:var(--serif);font-size:clamp(46px,9.6vw,184px);line-height:.85;letter-spacing:-.04em;padding:clamp(40px,6vw,90px) var(--gut) 18px;border-bottom:1px solid #333;margin:0;font-weight:500}
footer.foot .big em{color:var(--red)}
footer.foot .row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gut);padding:28px var(--gut) 40px;font-size:14px;color:#bbb4aa}
footer.foot .row a{display:block;text-decoration:none;color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:3px 0}
footer.foot .row a:hover{color:var(--red)}
@media (max-width:760px){footer.foot .row{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.1,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:8px}

/* full-bleed with overlay headline */
.full-over{position:relative}
.full-over figure .ph{height:min(96vh,1040px)}
.full-over figure .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 62%)}
.full-over figcaption{position:absolute;right:16px;bottom:10px;color:#ddd}
.full-over figcaption .t,.full-over figcaption a{color:#fff}
.full-over .over{position:absolute;left:var(--gut);bottom:clamp(40px,8vh,100px);color:var(--paper);max-width:900px}
.full-over .over .display{margin:14px 0 26px}
.btn{display:inline-block;padding:14px 22px;border:2px solid currentColor;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.stat .display{margin:10px 0 6px}
.stat .cites,.stat .cites a{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.3)}
.stat sup a{color:var(--paper)}

/* palmarés */
.palmares{border-top:var(--line);margin-top:var(--gut)}
.pal{display:grid;grid-template-columns:clamp(110px,16vw,260px) 1fr;gap:var(--gut);padding:26px 0;border-bottom:var(--line)}
.pal .y{font-family:var(--serif);font-style:italic;font-size:clamp(56px,8vw,130px);line-height:.8;color:var(--red)}
.pal h3{margin:0 0 10px;font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.8vw,44px);line-height:1}
.pal p{margin:0;max-width:62ch}
@media (max-width:640px){.pal{grid-template-columns:1fr}}

/* timeline */
.timeline{list-style:none;margin:var(--gut) 0 0;padding:0}
.timeline li{display:grid;grid-template-columns:clamp(110px,14vw,220px) 1fr;gap:var(--gut);align-items:baseline;padding:18px 0;border-bottom:var(--hair)}
.timeline .y{font-family:var(--serif);font-size:clamp(42px,5vw,84px);line-height:.9}
.timeline li:nth-child(4) .y,.timeline li:last-child .y{color:var(--red);font-style:italic}
.timeline li > span:last-child{font-size:clamp(17px,1.5vw,22px)}
.h-arch figure{position:relative}
.h-arch figure .ph{height:auto}
.h-arch figure .ph img{height:auto}
@media (max-width:760px){.h-pano .spine h1{font-size:44px}.h-pano .spine{align-items:flex-start;padding-top:18px}}
@media (max-width:860px){.h-home .tri figcaption .t{display:none}.h-home .tri figcaption{font-size:9.5px}}
@media (max-width:600px){.h-split li a{grid-template-columns:40px 1fr}.h-split li a span{grid-column:2;margin-top:4px}}