/* ============================================
   jihae.info — project page
   Loads after site.css and case.css, which own the grid, the margins
   and the type. This file only adds what those two don't have.
   ============================================ */

/* the lead beauty shot: 16:9 on every sub page, whatever the source ratio */
.cover--16{aspect-ratio:16/9;}
@media(max-width:860px){.cover--16{aspect-ratio:4/3;}}

/* a four-up figure row */
.grid.g4>*{grid-column:span 3;}
@media(max-width:860px){.grid.g4>*{grid-column:1/-1;}}

.proj-link{color:var(--link);font-weight:500;}
.proj-link:hover{text-decoration:underline;}

/* a Vimeo embed, kept at its own ratio */
.embed{position:relative;width:100%;}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* ---------- verbatim blocks: the original page's own rhythm ---------- */
.vb{--gap:30px;margin-top:var(--air);}
/* the same rhythm Overview uses: 30px inside a section, --air between them.
   A text block opens a new section, so it carries the big gap above it. */
.vb-b{margin:0 auto var(--gap);}
.vb-b + .vb-txt{margin-top:var(--air);}
/* 눈썹이 없는 텍스트 블록은 새 섹션이 아니라 앞 문단의 계속이다 */
.vb-b + .vb-txt:not(:has(.vb-eye)):not(:has(.vb-chap)){margin-top:calc(var(--air) * .38);}
.vb-b:last-child{margin-bottom:0;}
.vb-row{display:flex;justify-content:space-between;align-items:flex-start;}
.vb-row figure{margin:0;}
.vb-cap{font-size:14px;line-height:1.6;color:var(--muted);margin-top:14px;text-align:left;}
/* Every picture on its own wash container. The gap between the container and
   the picture is 14% of the picture's own width; solved against the container
   that is 0.14 / 1.28 = 10.94% padding, leaving the picture at 78.1%. */
/* 회색은 한 번만. Safety 그림은 Overview와 같이 자기 캔버스에 14% 여백을
   들고 있으므로 컨테이너는 패딩을 더하지 않는다. 배경은 그림이 아직 회색을
   들고 있지 않을 때를 위한 바탕으로만 남긴다. */
.vb-box{background:var(--wash);padding:0;
  display:flex;align-items:center;justify-content:center;}
.vb-box img,.vb-box video{display:block;width:100%;height:auto;
  max-height:62vh;object-fit:contain;}

/* text sits in the same column as the pictures, with the line length still
   held to a readable measure inside it */
.vb-txt{width:100%;}
.vb-txt>*{max-width:49.1%;}   /* 6 of the 12 columns, the measure the case studies use */
.vb-eye{margin-bottom:16px;}
.vb-chap{margin-bottom:40px;}
.vb-h{font-weight:700;font-size:20px;line-height:1.4;margin-bottom:12px;}
/* text left, picture right: the copy keeps its six-column measure and a
   small picture holds its own size instead of filling the column */
.vb-split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;width:100%;}
.vb-split__t{grid-column:1/span 6;}
.vb-split__f{grid-column:8/span 5;margin:0;}
.vb-split__f img{display:block;width:100%;height:auto;}
@media(max-width:860px){.vb-split{display:block;}.vb-split__f{margin-top:24px;}}
/* a titled group: every gap inside it is the same 24px, across and down */
.vb-group{width:100%;}
.vb-group>.vb-h{margin-bottom:12px;}
.vb-group>.vb-gbody{max-width:49.1%;margin-bottom:24px;}
.vb-group .vb-b{width:100% !important;margin:0 0 30px;}
.vb-group .vb-b:last-child{margin-bottom:0;}
@media(max-width:860px){.vb-group .vb-row{gap:24px;}}
.vb-lab{font-size:14px;line-height:1.7;color:var(--muted);}
/* the band's colour runs edge to edge, but what sits on it stays on the
   text column, so the pictures in a band share the page's one left edge */
.vb-band{padding:var(--gap) 0;margin:0 0 var(--gap);background:var(--band);
  box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);}
.vb-band .vb-b:last-child{margin-bottom:0;}
/* A chaptered verbatim page (Safety) drops .p-vb and sits on the case grid:
   columns 3–10, exactly where Overview and Desktop Windowing sit, so every
   heading, paragraph, figure and label shares one left edge and one measure.
   A page with no chapters keeps .p-vb and stays centred, since it has no rail
   to fill the offset column. */
.p-vb .case-head>*,.p-vb .case__body{grid-column:1/-1;width:70%;
  margin-left:auto;margin-right:auto;}
.p-vb .section__body>.t-body,.p-vb .section__body>.lead{grid-column:1/span 8;}
@media(max-width:1180px){
  .p-vb .case-head>*,.p-vb .case__body{width:84%;}
  .vb-txt>*{max-width:100%;}
}
@media(max-width:860px){
  .p-vb .case-head>*,.p-vb .case__body{width:100%;}
  .vb-b{width:100% !important;margin-left:0 !important;}
  .vb-row{flex-wrap:wrap;gap:24px;}
  .vb-row figure{flex:0 0 100% !important;}
  .vb-txt{width:100%;}
}

/* ---- narrow screens only (max-width:860px) ---- */
@media(max-width:860px){
  .cover--16:not(.cover--sm):not(:has(.cover__ph)){aspect-ratio:auto;}
  .vb-box img,.vb-box video{max-height:none;}
  /* rows of small pictures stay in one row and share the width equally */
  .vb-row--multi{flex-wrap:nowrap;gap:12px;}
  .vb-row--multi figure{flex:1 1 0 !important;min-width:0;}
}
@media(max-width:600px){
  /* four across becomes two by two */
  .vb-row--multi:has(> figure:nth-child(4)){flex-wrap:wrap;}
  .vb-row--multi:has(> figure:nth-child(4)) figure{flex:0 0 calc(50% - 6px) !important;}
  /* a group of rows reads as one grid, two across */
  .vb-flat2{display:flex;flex-wrap:wrap;gap:12px;}
  .vb-flat2 > .vb-row{display:contents;}
  .vb-flat2 figure{flex:0 0 calc(50% - 6px) !important;margin:0;}
  .vb-flat2 > .vb-h,.vb-flat2 > .vb-b:not(.vb-row){flex:0 0 100%;}
}

/* a group's intro text: half the column on a wide screen, the full column once
   the screen narrows (the same point where .vb-txt text goes full width) */
@media(max-width:1180px){.vb-group>.vb-gbody{max-width:100%;}}