/*
Theme Name: STLIU Portfolio
Template: blocksy
Version: 2.0.1
Description: Editorial portfolio child theme for the STLIU artist-researcher site.
*/

:root { --stliu-ink:#171923; --stliu-paper:#ebe3d4; --stliu-signal:#91a9ff; --stliu-vermilion:#d66d50; --stliu-ash:#686b76; --stliu-line:rgba(23,25,35,.23); --stliu-serif:Georgia, 'Times New Roman', serif; }
body { background:var(--stliu-paper); color:var(--stliu-ink); }
.entry-content > .stliu-home { margin-top:calc(-1 * var(--theme-content-vertical-spacing, 60px)); }
.stliu-home { margin-inline:calc(50% - 50vw); max-width:100vw; overflow:hidden; }
.stliu-home a { color:inherit; text-decoration:none; }
.stliu-kicker { margin:0 0 1rem; color:var(--stliu-ash); font-size:10px; font-weight:700; letter-spacing:.14em; line-height:1.3; text-transform:uppercase; }
.stliu-hero { position:relative; display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(280px, .98fr); min-height:min(790px, 91vh); overflow:hidden; background:var(--stliu-ink); color:var(--stliu-paper); }
.stliu-hero::before { position:absolute; z-index:0; inset:0; background-image:linear-gradient(rgba(145,169,255,.11) 1px, transparent 1px),linear-gradient(90deg, rgba(145,169,255,.11) 1px, transparent 1px); background-size:42px 42px; content:''; mask-image:linear-gradient(90deg,#000,transparent 67%); pointer-events:none; }
.stliu-hero > * { position:relative; z-index:1; }
.stliu-hero__masthead { display:flex; min-height:470px; flex-direction:column; justify-content:space-between; padding:clamp(2rem,5vw,5.5rem); }
.stliu-hero__masthead::after { position:absolute; right:clamp(-8rem,-7vw,-3rem); bottom:7%; width:clamp(12rem,26vw,28rem); aspect-ratio:1; border:1px solid rgba(145,169,255,.28); border-radius:50%; content:''; pointer-events:none; }
.stliu-hero .stliu-kicker { color:var(--stliu-signal); }
.stliu-display { margin:clamp(3rem,8vw,9rem) 0 2rem; font-size:clamp(1rem,1.2vw,1.3rem); font-weight:500; letter-spacing:-.09em; line-height:.72; }
.stliu-display span { display:block; }
.stliu-display span:last-child { margin-left:clamp(1.6rem,9vw,11rem); font-family:var(--stliu-serif); font-style:italic; font-weight:400; }
.stliu-hero__coordinates { margin:0; color:#b9b8b0; font-size:11px; letter-spacing:.04em; line-height:1.6; text-transform:uppercase; }
.stliu-hero__visual { position:relative; min-height:430px; margin:0; overflow:hidden; }
.stliu-hero__visual::before { position:absolute; z-index:2; top:17%; left:16%; width:clamp(6.5rem,12vw,12rem); aspect-ratio:1; border:1px solid var(--stliu-vermilion); border-radius:50%; box-shadow:0 0 0 12px rgba(214,109,80,.08); content:''; mix-blend-mode:screen; pointer-events:none; }
.stliu-hero__visual::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,15,28,.12),rgba(12,15,28,.62)),linear-gradient(90deg,transparent 74%,rgba(145,169,255,.45) 74%,rgba(145,169,255,.45) calc(74% + 1px),transparent calc(74% + 1px)); content:''; }
.stliu-hero__visual img { width:100%; height:100%; min-height:430px; object-fit:cover; object-position:center; filter:saturate(.78) contrast(1.06); }
.stliu-hero__visual figcaption { position:absolute; z-index:1; right:1.25rem; bottom:1rem; left:1.25rem; display:flex; justify-content:space-between; color:#fff; font-size:9px; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; }
.stliu-hero__statement { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(280px,.98fr); gap:2rem; align-items:start; padding:clamp(1.75rem,3.4vw,3.5rem) clamp(2rem,5vw,5.5rem); border-top:1px solid rgba(255,255,255,.22); }
.stliu-hero__text { grid-column:2; max-width:31rem; }
.stliu-hero__text > p:last-child { margin:.6rem 0 0; font-family:var(--stliu-serif); font-size:clamp(1.45rem,2.2vw,2.3rem); line-height:1.16; }
.stliu-hero__chinese { margin:0; color:var(--stliu-vermilion); font-size:13px; font-weight:700; letter-spacing:.2em; }
.stliu-hero__links { grid-column:2; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.stliu-hero__links a { border-bottom:1px solid rgba(255,255,255,.48); padding-bottom:.32rem; font-size:11px; letter-spacing:.07em; text-transform:uppercase; transition:color .2s ease; }
.stliu-hero__links a:hover { color:var(--stliu-signal); }
.stliu-hero__links span { margin-left:.4rem; }
.stliu-section { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:clamp(2rem,8vw,11rem); padding:clamp(4rem,9vw,9rem) max(2rem, calc((100vw - 1280px)/2)); border-bottom:1px solid var(--stliu-line); }
.stliu-section h2 { margin:.25rem 0 0; font-family:var(--stliu-serif); font-size:clamp(3.05rem,6.8vw,7.2rem); font-weight:400; letter-spacing:-.075em; line-height:.82; }
.stliu-section__body { padding-top:.15rem; }
.stliu-lead { max-width:43rem; margin:0; font-size:clamp(1.25rem,2.08vw,2rem); letter-spacing:-.03em; line-height:1.25; }
.stliu-theme-list { margin-top:clamp(3rem,7vw,7rem); border-top:1px solid var(--stliu-line); }
.stliu-theme-list a { display:grid; grid-template-columns:3rem 1fr 1rem; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--stliu-line); font-size:clamp(1rem,1.5vw,1.35rem); letter-spacing:-.025em; }
.stliu-theme-list span { color:var(--stliu-ash); font-size:10px; letter-spacing:.08em; }
.stliu-theme-list b { font-size:1.1rem; font-weight:400; text-align:right; }
.stliu-theme-list a:hover { background:#cfd2df; }
.stliu-section--works { background:#c7c8d4; }
.stliu-text-link { display:inline-block; margin-top:3rem; border-bottom:1px solid; padding-bottom:.3rem; font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.stliu-text-link span { margin-left:.5rem; }
.stliu-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--stliu-line); }
.stliu-card { position:relative; min-height:260px; padding:1rem 1rem 3.25rem; border-right:1px solid var(--stliu-line); border-bottom:1px solid var(--stliu-line); background:transparent; transition:background .25s ease; }
.stliu-card:nth-child(even) { border-right:0; }
.stliu-card:hover { background:var(--stliu-paper); }
.stliu-card__index { margin:0 0 clamp(2.5rem,6vw,5rem); color:var(--stliu-ash); font-size:10px; letter-spacing:.08em; }
.stliu-card h3 { max-width:16rem; margin:0; font-family:var(--stliu-serif); font-size:clamp(1.5rem,2.25vw,2.5rem); font-weight:400; letter-spacing:-.055em; line-height:.95; }
.stliu-card__excerpt { max-width:23rem; margin:1.25rem 0 0; color:#4d4c47; font-size:12px; line-height:1.55; }
.stliu-card__arrow { position:absolute; right:1rem; bottom:1rem; font-size:1.45rem; }
.stliu-section--portfolio { display:block; padding-bottom:0; background:var(--stliu-ink); color:var(--stliu-paper); }
.stliu-section--portfolio .stliu-kicker { color:var(--stliu-signal); }
.stliu-portfolio-links { margin-top:clamp(3rem,7vw,7rem); border-top:1px solid rgba(255,255,255,.28); }
.stliu-portfolio-links a { display:grid; grid-template-columns:minmax(150px,.75fr) minmax(0,1.7fr) 1rem; gap:1rem; align-items:center; padding:1.45rem 0; border-bottom:1px solid rgba(255,255,255,.28); transition:padding .2s ease,color .2s ease; }
.stliu-portfolio-links a:hover { padding-inline:1rem; color:var(--stliu-signal); }
.stliu-portfolio-links span { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.stliu-portfolio-links b { font-family:var(--stliu-serif); font-size:clamp(1.35rem,2vw,2.15rem); font-weight:400; letter-spacing:-.04em; }
.stliu-portfolio-links i { font-size:1.2rem; font-style:normal; text-align:right; }
/* Inner portfolio pages retain the same editorial rhythm. */
.entry-content > h1 { font-family:var(--stliu-serif); font-size:clamp(3rem,6vw,6rem); font-weight:400; letter-spacing:-.07em; line-height:.85; }
.entry-content > h1 + p { max-width:50rem; font-size:1.2rem; line-height:1.55; }
.entry-content .stliu-grid:not(.stliu-grid--works) { margin-top:3rem; }
@media (max-width: 767px) { .stliu-hero,.stliu-section { grid-template-columns:1fr; } .stliu-hero__masthead { min-height:390px; } .stliu-display { font-size:clamp(1rem,3vw,1.3rem); } .stliu-hero__statement { grid-template-columns:1fr; } .stliu-hero__text,.stliu-hero__links { grid-column:auto; } .stliu-hero__text > p:last-child { font-size:1.6rem; } .stliu-section { gap:2.5rem; } .stliu-section h2 { font-size:clamp(3.5rem,16vw,5.5rem); } .stliu-grid { grid-template-columns:1fr; } .stliu-card,.stliu-card:nth-child(even) { min-height:220px; border-right:0; } .stliu-portfolio-links a { grid-template-columns:1fr auto; } .stliu-portfolio-links b { grid-column:1; grid-row:2; } .stliu-portfolio-links i { grid-column:2; grid-row:1 / span 2; } }

/* 1.4 — White gallery system: restrained technology, image-led art direction. */
:root { --stliu-ink:#17212b; --stliu-paper:#fff; --stliu-signal:#a4322b; --stliu-vermilion:#a4322b; --stliu-ash:#70757b; --stliu-line:rgba(23,33,43,.18); }
body { background:#fff; }
.stliu-hero { min-height:auto; border-bottom:1px solid var(--stliu-line); background:#fff; color:var(--stliu-ink); }
.stliu-hero::before { background-image:linear-gradient(rgba(42,64,79,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(42,64,79,.055) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,#000,transparent 58%); }
.stliu-hero__masthead { min-height:clamp(460px,66vw,760px); border-right:1px solid var(--stliu-line); }
.stliu-hero__masthead::after { border-color:rgba(164,50,43,.2); }
.stliu-hero .stliu-kicker { color:var(--stliu-vermilion); }
.stliu-display { color:#17212b; }
.stliu-hero__coordinates { color:var(--stliu-ash); }
.stliu-hero__visual { margin:clamp(.8rem,1.8vw,1.75rem); min-height:500px; }
.stliu-hero__visual img { min-height:500px; filter:saturate(.82) contrast(1.04); }
.stliu-hero__visual::after { background:linear-gradient(180deg,transparent 60%,rgba(10,18,24,.45)); }
.stliu-hero__visual::before { top:12%; left:10%; width:clamp(4rem,8vw,7rem); border-color:var(--stliu-vermilion); box-shadow:none; mix-blend-mode:normal; }
.stliu-hero__statement { border-color:var(--stliu-line); }
.stliu-hero__text > p:last-child { color:#283a49; }
.stliu-hero__links a { border-color:var(--stliu-line); }
.stliu-hero__links a:hover { color:var(--stliu-vermilion); }
.stliu-image-index { display:grid; grid-template-columns:1.45fr .8fr .75fr; gap:clamp(.55rem,1vw,1rem); padding:clamp(.8rem,1.6vw,1.5rem); background:#fff; border-bottom:1px solid var(--stliu-line); }
.stliu-image-index figure { position:relative; margin:0; overflow:hidden; background:#eef0f1; }
.stliu-image-index img { width:100%; height:clamp(300px,39vw,600px); object-fit:cover; transition:transform .7s cubic-bezier(.2,.65,.25,1),filter .4s ease; }
.stliu-image-index__portrait img { object-position:48% center; }
.stliu-image-index__detail img { object-position:56% center; }
.stliu-image-index figure:hover img { transform:scale(1.025); filter:saturate(.8); }
.stliu-image-index figcaption { position:absolute; right:0; bottom:0; left:0; display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:end; padding:3.5rem 1rem 1rem; background:linear-gradient(transparent,rgba(12,18,22,.72)); color:#fff; font-size:9px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.stliu-image-index figcaption b { font-family:var(--stliu-serif); font-size:clamp(.9rem,1.2vw,1.15rem); font-weight:400; letter-spacing:0; text-transform:none; }
.stliu-image-index figcaption i { color:#df6a5c; font-style:normal; }
.stliu-section { background:#fff; }
.stliu-section--works { background:#f4f5f4; }
.stliu-card:hover { background:#fff; box-shadow:inset 3px 0 0 var(--stliu-vermilion); }
.stliu-section--portfolio { background:#fff; color:var(--stliu-ink); }
.stliu-section--portfolio .stliu-kicker { color:var(--stliu-vermilion); }
.stliu-portfolio-links { border-color:var(--stliu-line); }
.stliu-portfolio-links a { border-color:var(--stliu-line); }
.stliu-portfolio-links a:hover { color:var(--stliu-vermilion); }
@media (max-width:767px) { .stliu-hero__masthead { min-height:420px; border-right:0; border-bottom:1px solid var(--stliu-line); } .stliu-hero__visual { min-height:64vh; margin:.65rem; } .stliu-hero__visual img { min-height:64vh; } .stliu-image-index { grid-template-columns:1fr 1fr; } .stliu-image-index__wide { grid-column:1 / -1; } .stliu-image-index img { height:46vw; min-height:210px; } .stliu-image-index__wide img { height:68vw; } .stliu-image-index figcaption { grid-template-columns:1fr auto; } .stliu-image-index figcaption span { display:none; } }

/* 1.5 — Compact information system. */
.site-title { font-size:clamp(1rem,1.5vw,1.25rem) !important; font-weight:650 !important; letter-spacing:-.035em; }
.stliu-hero { grid-template-columns:minmax(0,.88fr) minmax(360px,1.12fr); }
.stliu-hero__masthead { min-height:clamp(380px,48vw,590px); padding:clamp(1.5rem,3.4vw,3.75rem); }
.stliu-display { margin:clamp(2rem,5vw,5rem) 0 1.5rem; font-size:clamp(1rem,1.2vw,1.3rem); line-height:1.2; }
.stliu-display span:last-child { margin-left:clamp(1rem,6vw,6rem); }
.stliu-hero__visual { min-height:390px; margin:.75rem; }
.stliu-hero__visual img { min-height:390px; }
.stliu-hero__statement { gap:1rem 2rem; padding:clamp(1.25rem,2vw,2rem) clamp(1.5rem,3.4vw,3.75rem); }
.stliu-hero__text > p:last-child { font-size:clamp(1.25rem,1.75vw,1.75rem); }
.stliu-image-index { gap:.6rem; padding:.6rem; }
.stliu-image-index img { height:clamp(230px,29vw,430px); }
.stliu-section { grid-template-columns:minmax(190px,.62fr) minmax(0,1.38fr); gap:clamp(2rem,5vw,6rem); padding:clamp(3.5rem,6vw,6rem) max(1.5rem,calc((100vw - 1360px)/2)); }
.stliu-section h2 { font-size:clamp(2.7rem,5.1vw,5.5rem); line-height:.86; }
.stliu-lead { max-width:48rem; font-size:clamp(1.1rem,1.55vw,1.55rem); line-height:1.34; }
.stliu-theme-list { margin-top:clamp(2rem,4vw,3.5rem); }
.stliu-theme-list a { padding:.8rem 0; font-size:clamp(.95rem,1.15vw,1.1rem); }
.stliu-text-link { margin-top:2rem; }
.stliu-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stliu-card,.stliu-card:nth-child(even) { min-height:210px; border-right:1px solid var(--stliu-line); }
.stliu-card:nth-child(3n) { border-right:0; }
.stliu-card__index { margin-bottom:clamp(1.75rem,3vw,3rem); }
.stliu-card h3 { font-size:clamp(1.25rem,1.65vw,1.85rem); line-height:1; }
.stliu-card__excerpt { font-size:11px; line-height:1.45; }
.stliu-portfolio-links { margin-top:clamp(2rem,4vw,4rem); }
.stliu-portfolio-links a { padding:1rem 0; }
.stliu-portfolio-links b { font-size:clamp(1.15rem,1.6vw,1.65rem); }
@media (min-width:768px) and (max-width:1024px) { .stliu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stliu-card:nth-child(3n) { border-right:1px solid var(--stliu-line); } .stliu-card:nth-child(even) { border-right:0; } }
@media (max-width:767px) { .stliu-hero { grid-template-columns:1fr; } .stliu-hero__masthead { min-height:350px; } .stliu-display { font-size:clamp(1rem,3vw,1.3rem); } .stliu-hero__visual,.stliu-hero__visual img { min-height:52vh; } .stliu-section { grid-template-columns:1fr; padding-block:3.5rem; } .stliu-section h2 { font-size:clamp(3rem,14vw,4.5rem); } .stliu-grid { grid-template-columns:1fr; } .stliu-card,.stliu-card:nth-child(even),.stliu-card:nth-child(3n) { min-height:185px; border-right:0; } }

/* 1.6 — Expandable waterfall for recent research and outcomes. */
.stliu-now { padding:clamp(3.5rem,6vw,6rem) max(1.5rem,calc((100vw - 1360px)/2)); border-bottom:1px solid var(--stliu-line); background:#f4f5f4; }
.stliu-now__header { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(240px,1.15fr); gap:clamp(2rem,6vw,7rem); align-items:end; margin-bottom:clamp(2rem,4vw,4rem); }
.stliu-now__header h2 { margin:0; font-family:var(--stliu-serif); font-size:clamp(2.8rem,5vw,5.25rem); font-weight:400; letter-spacing:-.07em; line-height:.87; }
.stliu-now__header > p { max-width:28rem; margin:0 0 .25rem; color:var(--stliu-ash); font-size:.95rem; line-height:1.65; }
.stliu-waterfall { column-count:3; column-gap:clamp(.7rem,1.2vw,1.15rem); }
.stliu-tile { position:relative; display:inline-block; width:100%; margin:0 0 clamp(.7rem,1.2vw,1.15rem); overflow:hidden; break-inside:avoid; background:#fff; border:1px solid var(--stliu-line); vertical-align:top; }
.stliu-tile a { display:block; color:inherit; text-decoration:none; }
.stliu-tile img { display:block; width:100%; height:auto; transition:transform .65s cubic-bezier(.2,.65,.25,1),filter .35s ease; }
.stliu-tile--portrait img { aspect-ratio:4/5; object-fit:cover; }
.stliu-tile--landscape img { aspect-ratio:5/6; object-fit:cover; }
.stliu-tile--detail img { aspect-ratio:4/3; object-fit:cover; }
.stliu-tile--image:hover img { transform:scale(1.025); filter:saturate(.82); }
.stliu-tile__caption { padding:1rem; border-top:1px solid var(--stliu-line); }
.stliu-tile span { display:block; margin-bottom:clamp(2rem,4vw,4rem); color:var(--stliu-vermilion); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.stliu-tile__caption span { margin-bottom:.75rem; }
.stliu-tile h3 { margin:0; font-family:var(--stliu-serif); font-size:clamp(1.45rem,2vw,2rem); font-weight:400; letter-spacing:-.045em; line-height:1; }
.stliu-tile p { margin:1.25rem 0 2.5rem; color:var(--stliu-ash); font-size:.82rem; line-height:1.6; }
.stliu-tile b { display:block; margin-top:1rem; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.stliu-tile--text a { min-height:clamp(300px,30vw,430px); padding:clamp(1.25rem,2.2vw,2rem); }
.stliu-tile--text h3 { font-size:clamp(2rem,3.4vw,3.8rem); }
.stliu-tile--text b { position:absolute; right:clamp(1.25rem,2.2vw,2rem); bottom:clamp(1.25rem,2.2vw,2rem); left:clamp(1.25rem,2.2vw,2rem); }
.stliu-tile--red { border-color:#a4322b; background:#a4322b; color:#fff; }
.stliu-tile--red span,.stliu-tile--red p { color:rgba(255,255,255,.74); }
.stliu-tile--dark { background:#17212b; color:#fff; }
.stliu-tile--dark span { color:#dc6d62; }
.stliu-tile--dark p { color:rgba(255,255,255,.68); }
@media (max-width:960px) { .stliu-waterfall { column-count:2; } }
@media (max-width:600px) { .stliu-now__header { grid-template-columns:1fr; } .stliu-waterfall { column-count:1; } .stliu-tile--text a { min-height:300px; } }

/* 1.7 — Recent research waterfall lives inside the hero right panel. */
.stliu-hero__waterfall { display:grid; grid-template-columns:1.08fr .92fr; grid-template-rows:repeat(6,minmax(0,1fr)); gap:.55rem; height:clamp(380px,48vw,590px); padding:.75rem; overflow:hidden; background:#f1f2f1; }
.stliu-hero-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--stliu-line); background:#fff; }
.stliu-hero-card a { display:block; width:100%; height:100%; padding:clamp(.65rem,1vw,1rem); color:inherit; text-decoration:none; }
.stliu-hero-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.65,.25,1); }
.stliu-hero-card::after { position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(9,15,19,.75)); content:''; pointer-events:none; }
.stliu-hero-card span,.stliu-hero-card h2,.stliu-hero-card b { position:relative; z-index:1; }
.stliu-hero-card span { display:block; color:var(--stliu-vermilion); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.stliu-hero-card h2 { margin:.45rem 0 0; font-family:var(--stliu-serif); font-size:clamp(1.05rem,1.8vw,2rem); font-weight:400; letter-spacing:-.045em; line-height:.94; }
.stliu-hero-card b { position:absolute; right:.8rem; bottom:.7rem; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.stliu-hero-card--lead { grid-column:1; grid-row:1 / 4; color:#fff; }
.stliu-hero-card--topic { grid-column:2; grid-row:1 / 3; border-top:3px solid var(--stliu-vermilion); }
.stliu-hero-card--topic::after,.stliu-hero-card--paper::after { display:none; }
.stliu-hero-card--topic h2 { font-size:clamp(1.1rem,1.85vw,2rem); }
.stliu-hero-card--hcii { grid-column:2; grid-row:3 / 5; color:#fff; }
.stliu-hero-card--hcii img { object-position:center 30%; }
.stliu-hero-card--field { grid-column:1; grid-row:4 / 7; color:#fff; }
.stliu-hero-card--paper { grid-column:2; grid-row:5 / 7; background:#e9eaeb; }
.stliu-hero-card:hover img { transform:scale(1.035); }
.stliu-hero-card--lead h2,.stliu-hero-card--field h2,.stliu-hero-card--hcii h2 { position:absolute; right:.8rem; bottom:.7rem; left:.8rem; }
.stliu-hero-card--lead span,.stliu-hero-card--field span,.stliu-hero-card--hcii span { color:#ef776b; }
@media (max-width:767px) { .stliu-hero__waterfall { height:620px; grid-template-columns:1.05fr .95fr; grid-template-rows:repeat(6,minmax(0,1fr)); padding:.55rem; } .stliu-hero-card h2 { font-size:1.15rem; } .stliu-hero-card--topic h2 { font-size:1.1rem; } }

/* 1.8 — Full-width nine-item research banner. */
.stliu-banner { padding:clamp(1.5rem,3vw,3rem) max(1rem,calc((100vw - 1440px)/2)) 0; border-bottom:1px solid var(--stliu-line); background:#fff; }
.stliu-banner__intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:3rem; align-items:end; padding:0 0 clamp(1.25rem,2.5vw,2.25rem); }
.stliu-banner__intro h1 { max-width:850px; margin:0; font-family:var(--stliu-serif); font-size:clamp(2.8rem,5.7vw,6rem); font-weight:400; letter-spacing:-.075em; line-height:.86; }
.stliu-banner__intro > p { max-width:30rem; margin:0; color:var(--stliu-ash); font-size:.8rem; line-height:1.55; }
.stliu-banner__intro > p span { display:block; margin-bottom:.75rem; color:var(--stliu-vermilion); font-size:10px; font-weight:700; letter-spacing:.18em; }
.stliu-banner__grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(145px,1fr)); gap:.5rem; min-height:530px; padding:.5rem; background:#eef0ef; }
.stliu-banner__grid .stliu-hero-card a { padding:.75rem; }
.stliu-banner__grid .stliu-hero-card h2 { font-size:clamp(1rem,1.45vw,1.55rem); }
.stliu-banner__grid .stliu-hero-card p { position:relative; z-index:1; margin:.65rem 0 0; color:var(--stliu-ash); font-size:10px; line-height:1.45; }
.stliu-banner__grid .stliu-hero-card:not(:has(img))::after { display:none; }
.stliu-banner-card--lead { grid-column:1 / 5; grid-row:1 / 3; color:#fff; }
.stliu-banner-card--embodied { grid-column:5 / 8; grid-row:1; border-top:3px solid var(--stliu-vermilion); }
.stliu-banner-card--hcii { grid-column:8 / 11; grid-row:1 / 3; color:#fff; }
.stliu-banner-card--hcii img { object-position:center 28%; }
.stliu-banner-card--mindfulness { grid-column:11 / 13; grid-row:1; background:#e5e7e8; }
.stliu-banner-card--field { grid-column:5 / 8; grid-row:2 / 4; color:#fff; }
.stliu-banner-card--field img { object-position:center; }
.stliu-banner-card--making { grid-column:11 / 13; grid-row:2; color:#fff; }
.stliu-banner-card--cmiot { grid-column:1 / 5; grid-row:3; }
.stliu-banner-card--cmiot h2 { font-size:clamp(1.35rem,2.1vw,2.25rem) !important; }
.stliu-banner-card--astronomy { grid-column:8 / 11; grid-row:3; background:#f8f8f6; }
.stliu-banner-card--adaptive { grid-column:11 / 13; grid-row:3; border-bottom:3px solid var(--stliu-vermilion); }
.stliu-banner__footer { display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:end; padding:clamp(1.25rem,2.5vw,2.25rem) 0; }
.stliu-banner__footer p { max-width:48rem; margin:0; font-family:var(--stliu-serif); font-size:clamp(1.2rem,1.8vw,1.75rem); line-height:1.2; }
.stliu-banner__footer nav { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:flex-end; }
.stliu-banner__footer a { border-bottom:1px solid var(--stliu-line); color:inherit; font-size:9px; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
@media (max-width:960px) { .stliu-banner__grid { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(5,150px); } .stliu-banner-card--lead { grid-column:1 / 4; grid-row:1 / 3; } .stliu-banner-card--embodied { grid-column:4 / 7; grid-row:1; } .stliu-banner-card--hcii { grid-column:4 / 7; grid-row:2 / 4; } .stliu-banner-card--mindfulness { grid-column:1 / 4; grid-row:3; } .stliu-banner-card--field { grid-column:1 / 4; grid-row:4 / 6; } .stliu-banner-card--making { grid-column:4 / 7; grid-row:4; } .stliu-banner-card--cmiot { grid-column:1 / 3; grid-row:6; } .stliu-banner-card--astronomy { grid-column:3 / 5; grid-row:6; } .stliu-banner-card--adaptive { grid-column:5 / 7; grid-row:5 / 7; } }
@media (max-width:600px) { .stliu-banner__intro,.stliu-banner__footer { grid-template-columns:1fr; gap:1.25rem; } .stliu-banner__intro h1 { font-size:clamp(2.8rem,14vw,4.5rem); } .stliu-banner__grid { display:flex; overflow-x:auto; min-height:0; padding:.5rem; scroll-snap-type:x mandatory; } .stliu-banner__grid .stliu-hero-card { flex:0 0 78vw; height:390px; scroll-snap-align:start; } .stliu-banner__footer nav { justify-content:flex-start; } }

/* 1.9 — Eighteen-item extended research field. */
.stliu-banner__grid { grid-template-rows:repeat(6,minmax(125px,1fr)); min-height:850px; }
.stliu-banner-card--monster { grid-column:1 / 4; grid-row:4; border-left:3px solid var(--stliu-vermilion); }
.stliu-banner-card--idiom { grid-column:4 / 7; grid-row:4; background:#f8f8f6; }
.stliu-banner-card--agentic { grid-column:7 / 10; grid-row:4; }
.stliu-banner-card--air { grid-column:10 / 13; grid-row:4; background:#e6e8e9; }
.stliu-banner-card--mass { grid-column:1 / 5; grid-row:5; }
.stliu-banner-card--data { grid-column:5 / 8; grid-row:5; border-bottom:3px solid var(--stliu-vermilion); }
.stliu-banner-card--culture { grid-column:8 / 10; grid-row:5 / 7; background:#17212b; color:#fff; }
.stliu-banner-card--culture p { color:rgba(255,255,255,.64) !important; }
.stliu-banner-card--starts { grid-column:10 / 13; grid-row:5; }
.stliu-banner-card--aesthetic { grid-column:1 / 8; grid-row:6; background:#f8f8f6; }
.stliu-banner-card--aesthetic h2 { font-size:clamp(1.35rem,2.2vw,2.4rem) !important; }
@media (max-width:960px) and (min-width:601px) { .stliu-banner__grid { grid-template-rows:repeat(10,145px); min-height:1480px; } .stliu-banner-card--monster { grid-column:1 / 4; grid-row:7; } .stliu-banner-card--idiom { grid-column:4 / 7; grid-row:7; } .stliu-banner-card--agentic { grid-column:1 / 4; grid-row:8; } .stliu-banner-card--air { grid-column:4 / 7; grid-row:8; } .stliu-banner-card--mass { grid-column:1 / 4; grid-row:9; } .stliu-banner-card--data { grid-column:4 / 7; grid-row:9; } .stliu-banner-card--culture { grid-column:1 / 3; grid-row:10; } .stliu-banner-card--starts { grid-column:3 / 5; grid-row:10; } .stliu-banner-card--aesthetic { grid-column:5 / 7; grid-row:10; } }
@media (max-width:600px) { .stliu-banner__grid { min-height:0; } }

/* 2.0 — Stable compact title treatment across wide displays. */
.home .hero-section { display:none; }
.stliu-banner { padding-top:clamp(1.25rem,2vw,2rem); }
.stliu-banner__intro { grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:clamp(2rem,5vw,6rem); }
.stliu-banner__intro h1 { max-width:720px; font-size:clamp(1rem,1.2vw,1.3rem); line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
@media (max-width:600px) { .stliu-banner__intro h1 { font-size:clamp(1rem,3vw,1.3rem); line-height:1.2; } }

/* 2.0.1 — Final mobile containment reset; keep this after desktop overrides. */
@media (max-width:600px) {
    .entry-content > .stliu-home,
    .stliu-home { width:100%; max-width:100%; margin-inline:0; overflow:hidden; }
    .stliu-banner { width:100%; max-width:100%; padding:1.25rem .75rem 0; }
    .stliu-banner__intro { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; width:100%; }
    .stliu-banner__intro > div,
    .stliu-banner__intro > p { width:100%; min-width:0; max-width:100%; }
    .stliu-banner__intro h1 { width:100%; max-width:100%; margin:0; font-size:clamp(1rem,3vw,1.3rem); line-height:1.2; overflow-wrap:normal; word-break:normal; }
    .stliu-banner__grid { display:flex; width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; grid-template-columns:none; grid-template-rows:none; -webkit-overflow-scrolling:touch; }
    .stliu-banner__grid .stliu-hero-card { flex:0 0 min(78vw,310px); width:min(78vw,310px); min-width:0; height:390px; }
    .stliu-banner__footer { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; width:100%; }
    .stliu-banner__footer > * { min-width:0; }
}

/* Course archive (/course/xxx/) lists old blog posts whose featured images
   were uploaded at full size with no fixed aspect ratio. Cap them down to a
   consistent thumbnail and clamp the excerpt so the grid reads as clean
   cards instead of a stack of oversized photos. */
.tax-stliu_course .entries { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1.25rem 1rem; }
.tax-stliu_course .entry-card { display:flex; flex-direction:column; }
.tax-stliu_course .entry-card .ct-media-container { order:-1; margin-bottom:.5rem; aspect-ratio:1/1; overflow:hidden; border-radius:2px; }
.tax-stliu_course .entry-card .ct-media-container img { width:100%; height:100%; object-fit:cover; aspect-ratio:auto; }
.tax-stliu_course .entry-card .entry-meta { font-size:.72rem; margin-bottom:.15rem; }
.tax-stliu_course .entry-card .entry-title { font-size:.92rem; line-height:1.3; margin-bottom:.25rem; }
.tax-stliu_course .entry-card .entry-excerpt { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--stliu-ash); font-size:.82rem; line-height:1.4; margin-bottom:.25rem; }
.tax-stliu_course .entry-card .entry-meta:last-child { font-size:.72rem; opacity:.75; }
.tax-stliu_course .archive-pagination,
.tax-stliu_course nav.pagination { margin-top:2.5rem; }
@media (max-width:600px) {
    .tax-stliu_course .entries { grid-template-columns:repeat(2, 1fr); gap:1rem .75rem; }
}

/* Course archive filter pills (課程說明 / 材料包 / 實作作業 / ...), injected
   via get_the_archive_description into Blocksy's archive-description slot
   — sits between the archive title and the entry grid. */
.stliu-filter-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.stliu-filter-pill { display:inline-block; padding:.35rem .9rem; border:1px solid var(--stliu-line); border-radius:999px; font-size:.82rem; letter-spacing:.02em; color:var(--stliu-ink); text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.stliu-filter-pill:hover { border-color:var(--stliu-ink); }
.stliu-filter-pill.is-active { background:var(--stliu-ink); border-color:var(--stliu-ink); color:var(--stliu-paper); }