html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

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

/* include everything above in every css file */


/* BODY */

body {
    margin: 10%;
}


@font-face {
  font-family: 'Mansalva';
  src: url('mansalva-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* HEADER */

.title-stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}
.title-label {
  background: #8D3A16;
  color: #fdf5ee;
  font-family: Times, serif;
  font-size: clamp(.7rem, 2vw, .85rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  display: inline-block;
  align-self: flex-start;
  transform: rotate(-.5deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.12);
}
.title-main {
  background: #faf6ee;
  padding: .4rem 1.4rem .5rem 1rem;
  box-shadow: 5px 5px 0 rgba(0,0,0,.1);
  border-left: 5px solid #8D3A16;
  transform: rotate(.4deg);
  align-self: flex-start;
}
.title-main-text {
  font-family: Times, serif;
  font-size: clamp(2.8rem, 9vw, 4.6rem);
  font-weight: 700;
  font-style: italic;
  line-height: .95;
  color: #1a1008;
  letter-spacing: -.02em;
  display: block;
}
.title-aside {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: #a07850;
  transform: rotate(-1deg);
  align-self: flex-end;
  margin-right: 1rem;
  opacity: .85;
}


/* NAVIGATION */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-start;
  position: relative;
}

  .nav-item {
    position: relative;
    display: inline-block;
  }

  /* tape strip above each link */
  .nav-item::before {
    content: '';
    position: absolute;
    top: -9px; left: 50%;
    transform: translateX(-50%) rotate(var(--tape-rot, -1.5deg));
    width: 52px; height: 16px;
    background: rgba(255,240,180,.72);
    border-top: 1px solid rgba(200,180,80,.22);
    border-bottom: 1px solid rgba(200,180,80,.22);
    z-index: 2;
    pointer-events: none;
  }

  .nav-item:nth-child(1) { --tape-rot: -2deg;   transform: rotate(-.8deg); margin-top: 6px; }
  .nav-item:nth-child(2) { --tape-rot:  1.5deg; transform: rotate(.5deg);  margin-top: 0; }
  .nav-item:nth-child(3) { --tape-rot: -1deg;   transform: rotate(-1.2deg); margin-top: 8px; }
  .nav-item:nth-child(4) { --tape-rot:  2.5deg; transform: rotate(.9deg);  margin-top: 2px; }

  .nav-link {
    display: block;
    background: #faf6ee;
    color: #1a1008;
    text-decoration: none;
    font-family: Times, serif;
    font-weight: 700;
    font-size: clamp(.8rem, 2vw, .95rem);
    letter-spacing: .06em;
    padding: .55rem 1.1rem .5rem;
    box-shadow: 3px 3px 0 rgba(0,0,0,.1);
    border-left: 3px solid #8D3A16;
    white-space: nowrap;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .18s;
  }

  .nav-link:hover {
    background: #fff9f5;
    box-shadow: 6px 6px 0 rgba(0,0,0,.13);
    transform: translateY(-3px);
    color: #8D3A16;
  }

  /* add .active to active page */
  .nav-link.active {
    background: #8D3A16;
    color: #fdf5ee;
    border-left-color: #8a3010;
  }

  .nav-note {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: .78rem;
    color: #a07850;
    text-align: center;
    margin-top: .35rem;
    opacity: .7;
  }


/* CONTAINER */

div.content {
  padding: 5%;
  width: 100%;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 25px;
}

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: #f0e8d8;
    font-family: 'Lora', Georgia, serif;
    color: #2c2016;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  /* paper texture via repeating pattern */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(180,150,100,.07) 25px),
      repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(180,150,100,.04) 25px);
    pointer-events: none;
  }

  .page {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    position: relative; z-index: 1;
  }

  /* TITLE */
  .page-title-wrap {
    position: relative;
    margin-bottom: 3.5rem;
    padding: 0 .5rem;
  }

  .tape {
    display: block;
    position: absolute;
    background: rgba(255,240,180,.62);
    border-top: 1px solid rgba(200,180,80,.25);
    border-bottom: 1px solid rgba(200,180,80,.25);
    height: 22px;
  }
  .tape-h { width: 110px; left: -12px; top: 14px; transform: rotate(-2deg); }
  .tape-v { width: 80px; right: 20px; top: -6px; transform: rotate(3deg); }

  h1 {
    font-family: Times, serif;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    line-height: 1.05;
    font-weight: 700;
    color: #1a1008;
    position: relative;
    display: inline-block;
    background: #faf6ee;
    padding: .6rem 1.2rem .6rem 1.4rem;
    border-left: 4px solid #8D3A16;
    box-shadow: 3px 3px 0 rgba(0,0,0,.09);
    transform: rotate(-.5deg);
  }

  /* INTRO */
  .intro-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 2rem;
    margin-bottom: 3.5rem;
    align-items: start;
  }

  .intro-text-block {
    background: #faf6ee;
    padding: 1.6rem 1.8rem;
    box-shadow: 4px 4px 0 rgba(0,0,0,.08);
    transform: rotate(.3deg);
    position: relative;
  }
  .intro-text-block::after {
    content: '';
    position: absolute; bottom: -2px; right: -2px;
    width: 100%; height: 100%;
    border: 1.5px solid rgba(0,0,0,.07);
    z-index: -1;
    transform: translate(4px,4px);
  }

  .intro-text-block p {
    font-size: 1rem;
    line-height: 1.8;
    color: #2c2016;
  }

  .side-note {
    background: #fff9c4;
    padding: 1.2rem 1.1rem;
    transform: rotate(2.5deg);
    box-shadow: 3px 3px 0 rgba(0,0,0,.1);
    position: relative;
    font-family: 'Mansalva', Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #3a2800;
    align-self: start;
    margin-top: 1.2rem;
  }


  /* Q&A SECTIONS */
  .sections-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
  }

  /* WHAT */
  .qa-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.4rem;
    align-items: start;
    margin-bottom: 1rem;
  }

  .qa-q {
    font-family: Times, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1008;
    background: #8D3A16;
    color: #fdf5ee;
    padding: .5rem 1rem;
    white-space: nowrap;
    align-self: start;
    box-shadow: 3px 3px 0 rgba(0,0,0,.15);
    transform: rotate(-.7deg);
    letter-spacing: -.01em;
    line-height: 1.3;
  }

  .qa-a {
    background: #faf6ee;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 3px 3px 0 rgba(0,0,0,.07);
    font-size: .98rem;
    line-height: 1.8;
    color: #2c2016;
    transform: rotate(.2deg);
    position: relative;
  }


  /* tape on qa blocks */
  .qa-a .tape-sm {
    position: absolute;
    top: -9px; left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 55px; height: 16px;
    background: rgba(255,240,180,.7);
    border-top: 1px solid rgba(200,180,80,.2);
    border-bottom: 1px solid rgba(200,180,80,.2);
  }


  /* WHY */
  .qa-block.alt { grid-template-columns: 1fr; }
  .qa-block.alt .qa-q {
    display: inline-block;
    margin-bottom: 1rem;
    transform: rotate(.6deg);
  }
  .qa-block.alt .qa-a { transform: rotate(-.3deg); }


  /* WHERE + IMAGE */
  .sub-block {
    position: relative;
    margin-bottom: 1rem;
  }
  .sub-text-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    align-items: start;
  }
  .image-card {
    background: #fff;
    padding: .8rem .8rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 5px 5px 0 rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    transform: rotate(2.5deg);
    position: relative;
  }
  .image-card .tape-img {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
    width: 60px; height: 18px;
    background: rgba(255,240,180,.75);
    border-top: 1px solid rgba(200,180,80,.2);
    border-bottom: 1px solid rgba(200,180,80,.2);
  }
  .image-card img {
    display: block;
    width: 100%; height: auto;
    border: 1px solid #e0d8cc;
    filter: sepia(.08);
  }
  .image-card .img-caption {
    font-family: 'Mansalva', Arial, Helvetica, sans-serif;
    font-size: .95rem;
    color: #6b5840;
    text-align: center;
    margin-top: .9rem;
    line-height: 1.4;
  }

    .collage-image-card .img-caption {
    font-family: 'Mansalva', Arial, Helvetica, sans-serif;
    font-size: .95rem;
    color: #6b5840;
    text-align: center;
    margin-top: .9rem;
    line-height: 1.4;
  }


  /* HOVER LIFTS */
  .intro-text-block, .image-card, .qa-q, .qa-a, .side-note {
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
    cursor: default;
  }
  .intro-text-block:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 7px 7px 0 rgba(0,0,0,.1); }
  .image-card:hover { transform: rotate(1deg) translateY(-5px); box-shadow: 9px 9px 0 rgba(0,0,0,.15); }
  .qa-a:hover { box-shadow: 6px 6px 0 rgba(0,0,0,.1); }
  .side-note:hover { transform: rotate(1.5deg) translateY(-3px); }


  /* RESPONSIVE */
  @media (max-width: 620px) {
    .intro-grid { grid-template-columns: 1fr; }
    .sub-text-img { grid-template-columns: 1fr; }
    .qa-block { grid-template-columns: 1fr; }
    .qa-q { display: inline-block; margin-bottom: .8rem; }
    .image-card { transform: rotate(1deg); }
  }


/* THUMBNAILS */


.thumbnail img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
.thumbnail img:hover {
  box-shadow: 0 0 2px 1px #8D3A16;
}


  .collage-block {
    position: relative;
  }
  .collage-spread {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.6rem;
    align-items: start;
  }
  .collage-image-card {
    background: #fff;
    padding: .8rem .8rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 5px 5px 0 rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    position: relative;
  }
  .collage-image-card .tape-img {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
    width: 60px; height: 18px;
    background: rgba(255,240,180,.75);
    border-top: 1px solid rgba(200,180,80,.2);
    border-bottom: 1px solid rgba(200,180,80,.2);
  }
  .collage-image-card img {
    display: block;
    width: 100%; height: auto;
    border: 1px solid #e0d8cc;
    filter: sepia(.08);
  }
  .collage-image-card .collage-img-caption {
    font-family: Times, serif;
    font-size: .95rem;
    color: #6b5840;
    text-align: center;
    margin-top: .9rem;
    line-height: 1.4;
  }



/* RESEARCH */

  .citation {
    font-family: Times, serif;
    font-size: .95rem;
    color: #6b5840;
    text-align: center;
    margin-top: .9rem;
    line-height: 1.4;
  }


/* TRY COLLAGE */

.canvas {
  border: 5px solid #8D3A16;
  box-sizing: border-box; /* ensures border does not hide content */
}

/* FOOTER */

p.footer { color: #803414;
    font-size: 16px;
    text-align: center;
    margin-top: 5%;
    margin-left: 0;
}

p.script { color: #803414;
    font-size: 16px;
    text-align: center;
    margin: 0;
}