/* ============================================================
   Bryan "Beege" Berry / 문미르 — introduction page
   Earthy palette: deep moss and forest floor, with the warm ochre and clay
   that land on it. Bone-white text.
   ============================================================ */

:root{
  /* Earthy green ground — forest floor, moss, and the warm light that lands on it */
  --ink:        #121a15;
  --ink-2:      #19241c;
  --ink-3:      #223029;
  --line:       #31443a;
  --bone:       #f1ece0;
  --muted:      #9bab9c;
  --ember:      #e8a34e;
  --clay:       #cf8163;
  --on-accent:  #101711;

  /* Latin faces have no hangul, so the KR face sits in every stack as the
     fallback — stray Korean in body copy renders instead of showing tofu. */
  /* None of the text faces carry emoji either, so the colour emoji fonts sit
     at the end of each stack rather than leaving the pick to the browser. */
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-display: "Bricolage Grotesque", "IBM Plex Sans KR", system-ui, var(--emoji);
  --font-body:    "Instrument Sans", "IBM Plex Sans KR", system-ui, -apple-system, var(--emoji);
  --font-kr:      "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", var(--emoji);

  --wrap: 62rem;
  --gap:  clamp(3.5rem, 8vw, 6.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* keep-all breaks Korean lines at spaces instead of mid-word, which is what
   Korean typography expects; the looser leading suits hangul too. */
[lang="ko"]{
  font-family:var(--font-kr);
  word-break:keep-all;
}
html[data-lang="ko"] .prose,
html[data-lang="ko"] .hero__deck,
html[data-lang="ko"] .love p,
html[data-lang="ko"] .warnings li,
html[data-lang="ko"] .sheet dd{ line-height:1.75; }
/* Hangul has no uppercase and reads badly when letterspaced */
html[data-lang="ko"] .eyebrow,
html[data-lang="ko"] .org__role,
html[data-lang="ko"] .sheet dt,
html[data-lang="ko"] .timeline__when{
  text-transform:none;
  letter-spacing:.02em;
}

img,video,svg{ max-width:100%; display:block; }

a{ color:var(--ember); }

::selection{ background:var(--clay); color:var(--on-accent); }

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Language ───────────────────────────────────────── */

/* Only ever hide the inactive variant — never set display to show one, so each
   element keeps whatever display its own rules give it. */
html[data-lang="en"] .t[lang="ko"],
html[data-lang="ko"] .t[lang="en"]{ display:none; }

.langswitch{
  position:fixed;
  top:.9rem; right:.9rem;
  z-index:30;
  display:flex; gap:1px;
  padding:1px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(18,26,21,.75);
  backdrop-filter:blur(10px);
}
.langswitch button{
  border:0;
  border-radius:999px;
  padding:.4rem .85rem;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-kr);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.langswitch button:hover{ color:var(--bone); }
.langswitch button[aria-pressed="true"]{
  background:var(--ember);
  color:var(--on-accent);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:20;
  background:var(--ember); color:var(--on-accent); padding:.6rem 1rem;
  border-radius:.4rem; font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{ top:1rem; }

.wrap{
  width:min(100% - 2.5rem, var(--wrap));
  margin-inline:auto;
}

/* ── Hero ───────────────────────────────────────────── */

.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(4.5rem, 12vw, 8.5rem) clamp(3rem, 7vw, 5rem);
  isolation:isolate;
}

/* Low sun moving through the canopy. Warm light over green goes muddy fast, so
   the ochre band is narrow and a green band carries the rest of the sweep. */
.hero__glow{
  position:absolute;
  z-index:-1;
  top:-45%; left:50%;
  width:min(150vw, 78rem); aspect-ratio:1;
  translate:-50% 0;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(207,129,99,.00) 40deg,
    rgba(207,129,99,.12) 100deg,
    rgba(232,163,78,.26) 150deg,
    rgba(124,166,128,.20) 205deg,
    rgba(124,166,128,.06) 245deg,
    transparent 295deg);
  filter:blur(80px);
  opacity:.75;
  animation:sweep 44s linear infinite;
}
@keyframes sweep{ to{ rotate:360deg; } }

.hero__grid{
  position:relative;
  display:grid;
  gap:clamp(2.5rem, 6vw, 4rem);
  align-items:center;
}
@media (min-width: 62rem){
  .hero__grid{ grid-template-columns:1fr minmax(0, 24rem); }
}

.hero__inner{ position:relative; min-width:0; }
.hero__media{ min-width:0; }

.eyebrow{
  margin:0 0 1.6rem;
  font-family:var(--font-kr);
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.hero__name{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 6.5vw, 4.5rem);
  font-weight:800;
  font-variation-settings:"opsz" 48;
  line-height:.95;
  letter-spacing:-.035em;
  text-wrap:balance;
}
/* the nickname stays glued to the first name; "Berry" takes the next line */
.hero__first{ white-space:nowrap; }

.hero__nick{
  font-weight:400;
  font-style:italic;
  color:var(--ember);
}

.hero__alt{
  margin:.5rem 0 0;
  font-size:clamp(1.4rem, 4.5vw, 2.1rem);
  font-weight:300;
  letter-spacing:.12em;
  color:var(--muted);
}

.hero__deck{
  margin:2rem 0 0;
  max-width:34rem;
  font-size:clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height:1.6;
}

.hero__facts{
  display:flex; flex-wrap:wrap; gap:.55rem .9rem;
  margin:2.2rem 0 0; padding:0; list-style:none;
  font-family:var(--font-kr);
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--muted);
}
.hero__facts li{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.3rem .85rem;
  background:rgba(34,48,41,.55);
}

/* ── Sections ───────────────────────────────────────── */

.section{ padding-block:0 var(--gap); }
.section--last{ padding-bottom:calc(var(--gap) * .8); }
/* the hero used to be followed by the photos section; now it butts straight
   onto the first sheet, which needs its own breathing room */
main > .section:first-child{ padding-top:clamp(2.5rem, 6vw, 4rem); }

.section__h{
  position:relative;
  margin:0 0 2rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem);
  font-weight:600;
  font-variation-settings:"opsz" 32;
  letter-spacing:-.02em;
}
/* short ember segment over the left of the rule */
.section__h::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:2.75rem; height:1px;
  background:var(--ember);
}

.prose{
  max-width:38rem;
  margin:0 0 1.15rem;
  color:#e2ddd0;
}
.prose:last-child{ margin-bottom:0; }
.prose--lead{ font-size:1.15rem; color:var(--bone); }

/* ── Fill-in markers ────────────────────────────────── */

.todo{
  font-family:var(--font-kr);
  font-size:.88em;
  color:var(--clay);
  border-bottom:1px dashed rgba(207,129,99,.55);
  padding-bottom:.05em;
}

/* ── Carousel ───────────────────────────────────────── */

/* Portrait frame at every size — phone photos and phone video are both
   vertical, and a wide frame letterboxes them into a sliver. */
.carousel{
  position:relative;
  width:min(100%, 26rem);
  margin-inline:auto;
}

.carousel__frame{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  border:1px solid var(--line);
  background:var(--ink-2);
  aspect-ratio:4/5;
}

.carousel__track{
  display:flex;
  height:100%;
  transition:transform .45s cubic-bezier(.22,.75,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .carousel__track{ transition:none; }
}

.slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
}

/* blurred fill so square photos and 16:9 video share one frame */
.slide__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(28px) saturate(1.25) brightness(.55);
  transform:scale(1.15);
}
/* Fill the frame and let object-fit do the letterboxing. Sizing the element
   itself with max-height:100% fails here — the grid row is auto-sized, so the
   percentage has nothing definite to resolve against and the media overflows. */
.slide__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.slide__play{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  z-index:2;
  width:4.25rem; height:4.25rem;
  display:grid; place-items:center;
  padding:0;
  border:1px solid rgba(241,236,224,.35);
  border-radius:999px;
  background:rgba(18,26,21,.55);
  backdrop-filter:blur(6px);
  color:var(--bone);
  cursor:pointer;
  transition:background .2s ease, scale .2s ease, opacity .2s ease;
}
.slide__play svg{ width:1.9rem; height:1.9rem; fill:currentColor; translate:.1rem 0; }
.slide__play:hover{ background:rgba(232,163,78,.92); color:var(--on-accent); scale:1.06; }
.slide.is-playing .slide__play{ opacity:0; pointer-events:none; }

.carousel__date{
  position:absolute;
  left:.85rem; bottom:.85rem;
  margin:0;
  z-index:3;
  font-family:var(--font-kr);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.09em;
  color:var(--bone);
  background:rgba(18,26,21,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(241,236,224,.14);
  border-radius:.35rem;
  padding:.28rem .55rem;
  pointer-events:none;
}
.carousel__date:empty{ display:none; }

.carousel__arrow{
  position:absolute; top:50%; translate:0 -50%;
  z-index:4;
  width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border:1px solid rgba(241,236,224,.2);
  border-radius:999px;
  background:rgba(18,26,21,.62);
  backdrop-filter:blur(8px);
  color:var(--bone);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, scale .18s ease;
}
.carousel__arrow:hover{
  background:rgba(232,163,78,.9);
  border-color:transparent;
  color:var(--on-accent);
  scale:1.06;
}
.carousel__arrow[disabled]{ opacity:.3; cursor:default; scale:1; }
.carousel__arrow[disabled]:hover{ background:rgba(18,26,21,.62); color:var(--bone); }
.carousel__arrow--prev{ left:.75rem; }
.carousel__arrow--next{ right:.75rem; }
.carousel__arrow svg{
  width:1.15rem; height:1.15rem;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

.carousel__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  margin-top:.9rem;
  min-height:1.5rem;
}
.carousel__caption{
  margin:0;
  min-width:0;
  font-size:.9rem;
  color:var(--muted);
}

@media (max-width: 34rem){
  .carousel__bar{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:.6rem;
  }
}
.carousel__dots{ display:flex; gap:.4rem; flex:none; }
.carousel__dots button{
  width:.5rem; height:.5rem; padding:0;
  border:0; border-radius:999px;
  background:#55705d;
  cursor:pointer;
  transition:background .2s ease, width .2s ease;
}
.carousel__dots button:hover{ background:var(--clay); }
.carousel__dots button[aria-selected="true"]{
  width:1.4rem;
  background:var(--ember);
}

/* ── Profile sheet (the 프로필 표) ───────────────────── */

.sheet{ margin:0; }
.sheet__row{
  display:grid;
  grid-template-columns:11rem 1fr;
  gap:1.5rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(49,68,58,.6);
  align-items:baseline;
}
.sheet--wide .sheet__row{ grid-template-columns:13rem 1fr; }
.sheet__row:first-child{ border-top:1px solid rgba(49,68,58,.6); }

.sheet dt{
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
html[data-lang="ko"] .sheet dt{
  font-size:.95rem;
  font-weight:500;
  color:var(--bone);
}
.sheet dd{ margin:0; }
.sheet__note{ color:var(--muted); font-size:.9em; }

@media (max-width: 34rem){
  .sheet__row,
  .sheet--wide .sheet__row{ grid-template-columns:1fr; gap:.2rem; }
}

/* ── Orgs ───────────────────────────────────────────── */

.orgs{
  display:grid; gap:1px;
  margin:0 0 2.5rem; padding:0; list-style:none;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:.85rem;
  overflow:hidden;
}
@media (min-width: 48rem){
  .orgs{ grid-template-columns:repeat(3,1fr); }
}

.org{
  background:var(--ink-2);
  padding:1.6rem 1.4rem;
}
.org__role{
  margin:0 0 .9rem;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
}
.org__name{
  margin:0 0 .6rem;
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:600;
  font-variation-settings:"opsz" 24;
  letter-spacing:-.02em;
}
.org__what{
  margin:0;
  font-size:.95rem;
  color:#d6d1c4;
}

/* ── Career history collapsible ─────────────────────── */

.history{
  border:1px solid var(--line);
  border-radius:.85rem;
  background:var(--ink-2);
}
.history__summary{
  display:flex; align-items:center; gap:.8rem;
  padding:1.1rem 1.4rem;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
}
.history__summary::-webkit-details-marker{ display:none; }
.history__hint{
  font-family:var(--font-kr);
  font-size:.78rem;
  font-weight:400;
  color:var(--muted);
}
.history__chev{
  width:1.1rem; height:1.1rem;
  margin-left:auto;
  fill:none; stroke:var(--ember); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:rotate .2s ease;
}
.history[open] .history__chev{ rotate:180deg; }

.timeline{
  margin:0; padding:0 1.4rem 1.5rem 1.4rem;
  list-style:none;
  border-top:1px solid var(--line);
  padding-top:1.4rem;
}
.timeline__item{
  position:relative;
  padding:0 0 1.4rem 1.4rem;
  border-left:1px solid var(--line);
}
.timeline__item:last-child{ padding-bottom:0; border-left-color:transparent; }
.timeline__item::before{
  content:"";
  position:absolute; left:-3.5px; top:.55rem;
  width:7px; height:7px; border-radius:999px;
  background:var(--ember);
}
.timeline__when{
  margin:0 0 .15rem;
  font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.timeline__what{ margin:0; }
.timeline__org{ color:var(--bone); }
.timeline__org::before{ content:" · "; color:var(--muted); }
.timeline__where{ color:var(--muted); }
.timeline__where::before{ content:" · "; }
.timeline__note{ margin:.3rem 0 0; font-size:.92rem; color:var(--muted); }

/* ── Love languages ─────────────────────────────────── */

.loves{
  display:grid; gap:1.25rem;
  margin:0; padding:0; list-style:none;
}
@media (min-width: 44rem){
  .loves{ grid-template-columns:1fr 1fr; }
}

.love{
  position:relative;
  padding:1.5rem 1.5rem 1.5rem 1.6rem;
  border-radius:.85rem;
  background:linear-gradient(160deg, rgba(207,129,99,.16), rgba(232,163,78,.06));
  border:1px solid rgba(207,129,99,.3);
}
.love h3{ margin:0 0 .6rem; }
.love__name{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.love__kr{
  display:block;
  margin-top:.15rem;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--clay);
}
.love p{ margin:0; font-size:.95rem; color:#dfdacd; }

.loves__foot{
  margin:1.25rem 0 0;
  font-size:.95rem;
  color:var(--muted);
}

/* ── Warnings ───────────────────────────────────────── */

.warnings{
  display:grid; gap:.9rem;
  margin:0; padding:0; list-style:none;
  max-width:42rem;
}
.warnings li{
  position:relative;
  padding-left:1.5rem;
  color:#ddd8cb;
}
.warnings li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:.5rem; height:1px;
  background:var(--ember);
}

/* ── Footer ─────────────────────────────────────────── */

.foot{
  border-top:1px solid var(--line);
  padding-block:2.25rem 3rem;
}
.foot__inner{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  justify-content:space-between; align-items:baseline;
}
.foot__name{
  margin:0;
  font-family:var(--font-kr);
  font-size:.9rem;
}
.foot__note{
  margin:0;
  font-size:.8rem;
  color:var(--muted);
}

/* ── Page-load settle ───────────────────────────────── */

@media (prefers-reduced-motion: no-preference){
  .hero__inner > *{
    animation:rise .7s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .hero__inner > :nth-child(1){ animation-delay:.05s; }
  .hero__inner > :nth-child(2){ animation-delay:.12s; }
  .hero__inner > :nth-child(3){ animation-delay:.19s; }
  .hero__inner > :nth-child(4){ animation-delay:.26s; }
  .hero__inner > :nth-child(5){ animation-delay:.33s; }
  .hero__media{ animation:rise .7s cubic-bezier(.2,.7,.3,1) .4s backwards; }
}
@keyframes rise{
  from{ opacity:0; translate:0 .9rem; }
  to{ opacity:1; translate:0 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero__glow{ animation:none; }
  *{ transition-duration:.01ms !important; }
}