/* 리셋, 타이포 기본, 바탕 질감, 접근성 기본값 */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
  /* 한국어는 낱말 중간에서 끊으면 안 읽힌다. 어절 단위로 넘긴다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 종이·천 결. 거의 안 보일 정도로만. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='0.13'/></svg>");
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance;line-height:1.3}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
figure,dl,dd{margin:0}
img{display:block;max-width:100%}

a{color:var(--clay);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--clay-deep)}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
::selection{background:var(--line);color:var(--ink)}

/* .page 는 좌우 여백만 맡는다. 위아래 여백은 각 구획이 padding-block 으로 정한다.
   같은 padding 속기형을 두 군데서 쓰면 한쪽이 다른 쪽을 통째로 지운다. */
.page{max-width:var(--page);margin:0 auto;padding-inline:var(--s5);position:relative;z-index:2}

/* 손가락으로 누르기에 44px 보다 작은 글자 링크들.
   보이는 모양은 그대로 두고 눌리는 범위만 넓힌다. 여백을 주면 밑줄이 글자에서 떨어진다. */
.brand,
.masthead-nav a,
.chapter-year,
.backlink,
.about-line a{position:relative}
.brand::after,
.masthead-nav a::after,
.chapter-year::after,
.backlink::after,
.about-line a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* 화면에는 안 보이고 스크린리더만 읽는 텍스트 */
/* 머리띠가 고정이라 앵커로 뛰면 제목이 가려진다. 그만큼 미리 멈춘다. */
section[id], [id^="cv-"]{scroll-margin-top:84px}

.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;
}

/* 섹션 머리 */
.eyebrow{
  font-family:var(--font-body);font-size:12px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--clay);
  display:block;margin-bottom:var(--s4);
}
.section-title{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em}

/* 움직임을 끈 사용자에게는 전부 정지 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}