/* /new — one system for the whole page.
   Ground: white. Colour: one blue, used as a solid block (the cover, one block in About, the footer)
   and for small accents. Every section opens the same way: a handwritten English word in blue,
   a bold Korean title over it, one line under it. One left line, one type scale, one spacing scale. */
.nx{
  --v:#1f4ea3; --v-d:#163a7a; --v-l:#c4d4f4; --paper:#f4f6fa;
  --hand:"Mr Dafoe","Brush Script MT",cursive;
  --t-display:clamp(32px,4.2vw,52px); --t-h3:22px; --t-lead:18px; --t-body:16px; --t-small:14px;
  --sec:136px; --head-gap:56px; --pad:32px; --gap:20px; --r:20px;
  /* the page's shared colours follow the blue */
  --rose:var(--v); --pink-50:#eef3fb; --pink-100:#dde7f7; --pink-200:var(--v-l); --card:var(--paper);
  --mark-a:#3d72d1; --mark-b:#163a7a;
}
@media (max-width:719px){.nx{--sec:88px;--head-gap:36px;--pad:24px;--t-lead:17px}}
.nx .wrap{max-width:1120px}
/* wide monitors: use more of the screen so the page doesn't sit in a narrow column */
@media (min-width:1440px){.nx .wrap{max-width:1320px;padding-inline:40px}}
@media (min-width:1800px){.nx .wrap{max-width:1480px}}
/* the handwritten word never breaks onto a second line */
.nx .scr,.nx .sec-head .kicker,.nx .c-head .kicker{white-space:nowrap}
.nx main>section{background:#fff!important}

/* ---------- the section opening, used everywhere ---------- */
.nx .head,.nx .sec-head{position:relative;margin-bottom:var(--head-gap)}
.nx .scr,.nx .sec-head .kicker{display:block;margin:0 0 -.26em -.04em;font-family:var(--hand);font-style:normal;font-weight:400;font-size:clamp(56px,6vw,84px);line-height:1;letter-spacing:0;text-transform:none;color:var(--v);opacity:.9;transform:rotate(-4deg);transform-origin:left bottom;pointer-events:none}
.nx .ttl,.nx .sec-head h2{position:relative;margin:0;font-size:var(--t-display);font-weight:900;line-height:1.22;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.nx .lead,.nx .sec-head p{margin:18px 0 0;max-width:640px;font-size:var(--t-lead);line-height:1.7;color:var(--ink-2)}
.nx .lead b{color:var(--ink)}
.nx .sx,.nx .sec{padding-block:var(--sec)}
.nx .sub{margin:0 0 20px;font-size:var(--t-h3);font-weight:800;letter-spacing:-.03em}

/* ---------- 1. cover: one white ground. Same opening as every section, bigger; the photo stands
   on the right and fades into the white at its foot, so there is no edge. ---------- */
.cv{position:relative;padding-top:56px;overflow-x:clip}
.cv-grid{display:grid;gap:32px}
@media (min-width:900px){.cv-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:end}}
/* wide screens: the copy keeps its width and the photo sits in the middle of what is left, close to the copy */
@media (min-width:1440px){.cv-grid{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:40px}.cv .cv-fig{justify-self:center}}
.cv-top{display:grid;gap:36px;align-self:center;padding-bottom:24px}
.cv .head{margin-bottom:0}
/* the script word block is as wide as the title's first line, at every screen size */
.cv{--cvh:clamp(36px,4.8vw,60px)}
.cv .scr.big{font-size:calc(var(--cvh) * 2.36);margin-left:.13em}
/* two lines that cross a little: the second sits up into the first and steps right */
.cv .scr.big>span{display:block}
.cv .scr.big .l2{margin-top:-.42em;padding-left:.9em}
.cv h1.ttl{font-size:var(--cvh);line-height:1.18}
.cv .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cv .tlink{color:var(--ink)}
.cv-fig{margin:0;justify-self:end;min-width:0}
.cv-cut{display:block;width:auto;max-width:100%;height:min(calc(100svh - 120px),720px);min-height:480px;object-fit:contain;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
/* a flat blue silhouette behind the person, offset up and to the right; it fades with the photo at the foot */
.cv{--sh-x:7px;--sh-y:-5px;--sh-blur:0px;--sh-c:var(--v-l)}
.cv-cut{filter:drop-shadow(var(--sh-x) var(--sh-y) var(--sh-blur) var(--sh-c))}
@media (max-width:899px){
  .cv{padding-top:36px}

  .cv-fig{justify-self:center}
  .cv-cut{height:auto;min-height:0;width:100%;max-width:420px}
}

/* ---------- 2. about ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--head-gap)}
.nums b{display:block;font-size:clamp(40px,4.4vw,56px);font-weight:900;letter-spacing:-.045em;line-height:1}
.nums small{font-size:.4em;font-weight:700;letter-spacing:-.02em;margin-left:2px}
.nums span{display:block;margin-top:12px;font-size:var(--t-small);color:var(--ink-3)}
@media (max-width:859px){.nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
.blk{display:grid;gap:28px;padding:48px;border-radius:var(--r);background:var(--v);color:#fff}
@media (min-width:960px){.blk{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}}
.blk h3{margin:0;font-size:28px;font-weight:900;line-height:1.35;letter-spacing:-.04em}
.blk-list{list-style:none;margin:0;padding:0;display:grid}
.blk-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.22);font-size:var(--t-body)}
.blk-list li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.blk-list span{color:rgba(255,255,255,.72);text-align:right}
@media (max-width:719px){.blk{padding:var(--pad)}.blk h3{font-size:22px}}
.cos{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--t-body);font-weight:700;color:var(--ink-2)}
.cos span{color:var(--ink-3);font-weight:400}

/* ---------- 3. profile ---------- */
.pf{display:grid;gap:var(--head-gap)}
@media (min-width:960px){.pf{grid-template-columns:400px minmax(0,1fr);gap:72px;align-items:start}}
.pf-photo{margin:0;max-width:400px}
.pf-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;border-radius:var(--r)}
.rows{list-style:none;margin:0;padding:0;display:grid}
.rows li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--line);font-size:var(--t-body);line-height:1.6}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows li>span{color:var(--v);font-weight:700;font-size:var(--t-small);padding-top:2px;font-variant-numeric:tabular-nums}
.rows li b{font-weight:700}
.rows li small{display:block;color:var(--ink-3);font-size:var(--t-small)}
@media (max-width:519px){.rows li{grid-template-columns:84px minmax(0,1fr);gap:12px}}

/* ---------- 4. menu: numbered list ---------- */
.nx .menu-grid{display:block!important;counter-reset:m;border-top:2px solid var(--ink)}
.nx .mrow,.nx [data-bg] .mrow{background:transparent!important;box-shadow:none!important;border-radius:0;border-bottom:1px solid var(--line);counter-increment:m}
.nx .mrow summary{padding:28px 0;gap:24px;align-items:center}
.nx .mrow summary::before{content:counter(m,decimal-leading-zero);flex:none;width:44px;font-size:var(--t-small);font-weight:800;color:var(--v);font-variant-numeric:tabular-nums}
.nx .mrow .mic{display:none}
.nx .mrow .mt{gap:6px}
.nx .mrow .mt b{font-size:var(--t-h3);font-weight:800;letter-spacing:-.03em}
.nx .mrow .mt small{font-size:var(--t-body);line-height:1.6;max-width:640px}
.nx .mrow.pick .mt b{color:var(--v)}
.nx .mrow .pill.pin{background:var(--v);color:#fff}
.nx .mrow .mbody{padding:0 0 28px 68px}
.nx .mrow .mbody ul{font-size:var(--t-body)}
.nx .mrow .fit{font-size:var(--t-small)}
@media (max-width:519px){.nx .mrow summary{gap:12px;padding:22px 0}.nx .mrow summary::before{width:28px}.nx .mrow .mt b{font-size:18px}.nx .mrow .mbody{padding:0 0 22px 40px}}

/* ---------- columns: same cards, on white (main page and the /column pages) ---------- */
.nx .mag{--m-bg:#fff;--m-fg:var(--ink);--m-2:var(--ink-2);--m-3:var(--ink-3);--m-line:var(--line);color:var(--ink)}
.nx .mag .sec-head h2,.nx .mag .c-head h1,.nx .mag .c-head h2{color:var(--ink)}
.nx .mag .sec-head p,.nx .mag .c-head p{color:var(--ink-2)}
.nx .mag .kicker{color:var(--v)!important}
/* the /column pages open the same way as every section */
.nx .c-head{display:block;max-width:none;margin-bottom:40px}
.nx .c-head .kicker{display:block;margin:0 0 -.26em -.04em;font-family:var(--hand);font-weight:400;font-size:clamp(56px,6vw,84px);line-height:1;letter-spacing:0;transform:rotate(-4deg);transform-origin:left bottom;opacity:.9}
.nx .c-head h1,.nx .c-head h2{position:relative;margin:0;font-size:var(--t-display);font-weight:900;line-height:1.22;letter-spacing:-.04em;text-wrap:balance}
.nx .c-head p{margin:18px 0 0;max-width:640px;font-size:var(--t-lead);line-height:1.7}
.nx .sec:has(.c-head){padding-block:64px var(--sec)}
.nx .sec:has(.art){padding-block:64px 96px}
.nx .back{color:var(--ink-2);margin-bottom:32px}
.nx .mag .c-tab{background:var(--paper);color:var(--ink-2)}
.nx .mag .c-tab span{color:var(--ink-3)}
.nx .mag .c-tab:hover{color:var(--ink)}
.nx .mag .c-tab[aria-current="page"]{background:var(--v);color:#fff}
.nx .mag .c-tab[aria-current="page"] span{color:rgba(255,255,255,.7)}
.nx .mag .c-empty{background:var(--paper)}
.nx .c-grid{gap:48px var(--gap)}
.nx .mag-head{margin-bottom:var(--head-gap);align-items:end}
.nx .mag-head .sec-head{margin-bottom:0}
.nx .mag-head:has(+ .c-grid[hidden]){margin-bottom:0}
.nx .mag-all{color:var(--ink);border-color:var(--ink-3)}

/* ---------- 5. field ---------- */
.fld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.fld a{display:grid;gap:14px;color:var(--ink);text-decoration:none}
.fld img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);transition:transform .6s var(--ease-out)}
.fld a:hover img{transform:scale(1.02)}
.fld b{font-size:var(--t-body);font-weight:700}
@media (max-width:719px){.fld{grid-template-columns:1fr}.fld img{aspect-ratio:16/10}}
.nx .more{display:inline-block;margin-top:28px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-3);padding-bottom:2px}
.nx #gallery{display:none}

/* ---------- portfolio: heading row like the columns, the same cards as /gallery ---------- */
.nx .mag-head .head{margin-bottom:0}
.nx #portfolio{padding-top:0}
.nx .g-work{border-radius:var(--r);grid-template-rows:auto 1fr}
.nx .g-work .g-body{display:flex;flex-direction:column;gap:8px}
.nx .g-work .g-body a{margin-top:auto}
/* fixed slots: one row of tall detail-page frames (2:3, shown from the top), one row of squares */
.pf-rows{display:grid;gap:56px}
.pf-label{margin:0 0 16px;font-size:var(--t-small);font-weight:800;letter-spacing:.02em;color:var(--v)}
.pf-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.pf-slot{display:grid;gap:12px;align-content:start;padding:0;border:0;background:none;font:inherit;text-align:left;color:var(--ink);cursor:zoom-in;min-width:0}
.pf-slot.empty{cursor:default}
.pf-frame{display:block;overflow:hidden;border-radius:14px;background:var(--paper);max-width:100%}
.pf-slots.tall .pf-frame{aspect-ratio:2/3}
.pf-slots.sq .pf-frame{aspect-ratio:1/1}
.pf-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.pf-slots.tall .pf-frame img{object-position:50% 0}
.pf-slot:hover .pf-frame img{transform:scale(1.03)}
.pf-cap{font-size:var(--t-body);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-slot.empty .pf-cap{font-weight:500;color:var(--ink-3)}
@media (max-width:719px){.pf-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-rows{gap:40px}}
/* /gallery: the same opening, white sections, no dashed frames */
.nx #photos{padding-block:64px var(--sec)}
.nx #photos+#portfolio{padding-top:0}
.nx .count{color:var(--ink-3);font-weight:700}
.nx .g-empty{border:0;border-radius:var(--r);background:var(--paper)}
.nx .g-filters button[aria-pressed="true"]{background:var(--v);border-color:var(--v);color:#fff}
.nx .cta{border-radius:var(--r);background:var(--paper)}

/* ---------- 6. contact: the checker and the form, same cards ---------- */
.nx #check{padding-top:0}
.nx .stepper,.nx [data-bg] .stepper,.nx .panel{background:var(--paper)!important;border:0;border-radius:var(--r);box-shadow:none}
.nx .stepper .opt .box,.nx .stepper .goal .box,.nx .stepper .ritem{background:#fff!important;border-radius:14px}
.nx .opt input:checked + .box{border-color:var(--v)}
.nx .opt input:checked + .box .ic,.nx .chip input:checked + span{background:var(--v);color:#fff}
.nx .goal input:checked + .box .tick{background:var(--v);border-color:var(--v)}
.nx .howto .em,.nx .ig-badge{background:#fff}
/* fields and chips sit on the grey panel, so they get a white fill and a visible edge */
.nx input,.nx select,.nx textarea{border-radius:12px;background:#fff;border:1.5px solid #d6dce8}
.nx input:hover,.nx select:hover,.nx textarea:hover{border-color:#b7c2d6}
.nx .chip span{background:#fff;border:1.5px solid #d6dce8}
.nx .chip:hover span{border-color:var(--v-l)}
.nx .chip input:checked + span{border-color:var(--v)}
.nx input:focus,.nx select:focus,.nx textarea:focus{border-color:var(--v);box-shadow:0 0 0 4px var(--pink-100)}

/* ---------- footer ---------- */
.nx footer{background:var(--v);color:#fff}
.nx footer .wrap{border:0}
.nx footer .f-brand b{font-size:24px;font-weight:900;letter-spacing:-.03em}
.nx footer span,.nx footer .f-contact span{color:rgba(255,255,255,.7)}
.nx footer a,.nx footer b{color:#fff}
.nx #portfolio+.sec{padding-top:0}
/* /gallery#portfolio and /gallery#field show one part only */
.nx .only-back{display:none}
.nx[data-only="portfolio"] #photos,.nx[data-only="field"] #portfolio{display:none}
.nx[data-only="portfolio"] .only-back{display:inline-flex}
.nx[data-only="portfolio"] #portfolio{padding-top:64px}
/* the photo grid on /gallery: full width (its .lead class must not pick up the text width), four to a row */
.nx .ch-photos.lead{max-width:none;margin:0;font-size:inherit;line-height:normal}
.nx #photos .ch-photos{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.nx #photos .ch-photo{border-radius:var(--r)}
@media (max-width:719px){.nx #photos .ch-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}