/* ══════════════════════════════════════════════════════
   University of Shittersfield
   Cut-paper prospectus. The photo is the whole background
   (blurred into texture, since it's a small portrait being
   stretched wide) and appears again crisp, framed, at
   native size so the face actually reads.
   ══════════════════════════════════════════════════════ */

:root{
  --blue:  #1f5aae;   /* from the logo */
  --pink:  #ff3fc5;   /* from the doodle */
  --ink:   #101014;
  --paper: #f5f1e6;

  --display: "Archivo Black", "Archivo", Impact, sans-serif;
  --body:    "Newsreader", Georgia, serif;
  --ui:      "Archivo", "Helvetica Neue", sans-serif;

  --gut: clamp(1rem, 5vw, 3.5rem);
}

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

body{
  margin:0;
  min-height:100vh;
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.65;
  color:var(--ink);
  background:#241b1a;
}

img{ max-width:100%; height:auto; display:block; }

/* ── background: the photo as atmosphere ────────────── */

.bg{
  position:fixed; inset:-40px;          /* overhang so the blur has no soft edge */
  z-index:-1; pointer-events:none;
  background-image:url("bg.jpg");
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
  background-color:#241b1a;
  filter:blur(9px) saturate(1.25) brightness(.62);
}

/* edge vignette */
.bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 85% at 50% 42%,
    rgba(0,0,0,0) 35%, rgba(0,0,0,.30) 75%, rgba(0,0,0,.62) 100%);
}

/* ── layout ─────────────────────────────────────────── */

.stack{
  max-width:1060px;
  margin:0 auto;
  padding:clamp(1.5rem,5vw,3rem) var(--gut) clamp(2.5rem,7vw,4rem);
  display:flex; flex-direction:column;
  gap:clamp(1.4rem,3.5vw,2.2rem);
  min-height:100vh;
}

.row{
  display:flex;
  gap:clamp(1.4rem,3.5vw,2.4rem);
  align-items:flex-start;
}

/* ── logo card ──────────────────────────────────────── */

.logo-card{
  background:#fff;
  padding:.9rem 1.4rem;
  transform:rotate(-1.1deg);
  border:2px solid var(--ink);
  box-shadow:10px 10px 0 var(--blue);
}
.logo-card img{ width:100%; max-width:440px; margin:0 auto; }

/* ── main slab ──────────────────────────────────────── */

.slab{
  flex:1 1 auto; min-width:0;
  background:var(--paper);
  padding:clamp(1.4rem,4vw,2.5rem);
  transform:rotate(.45deg);
  border:2px solid var(--ink);
  box-shadow:14px 14px 0 var(--ink);
}

.eyebrow{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.4rem; }
.eyebrow span{
  font-family:var(--ui); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; font-size:.66rem;
  background:var(--blue); color:#fff;
  padding:.35rem .7rem .3rem;
}

h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,5.2vw,3.1rem);
  line-height:.98; letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0 0 1.6rem;
}

/* pink swipe behind one word.
   isolation:isolate keeps the z-index:-1 swipe inside .mark — without it the
   swipe drops behind the slab background wherever .slab has no transform. */
.mark{ position:relative; display:inline-block; padding:0 .12em; isolation:isolate; }
.mark::before{
  content:""; position:absolute;
  left:0; right:0; top:.12em; bottom:.1em;
  background:var(--pink);
  transform:skewX(-6deg) rotate(-.8deg);
  z-index:-1;
}

.copy{ max-width:44ch; }
.copy p{ margin:0 0 1.05rem; }
.copy strong{
  font-weight:400;
  box-shadow:inset 0 -.45em 0 rgba(31,90,174,.22);
}

.pull{
  font-style:italic;
  border-left:4px solid var(--pink);
  padding-left:1rem;
  margin-bottom:0 !important;
  color:rgba(16,16,20,.7);
}

/* ── the framed portrait ────────────────────────────── */

.gallery{
  flex:0 0 auto;
  width:clamp(180px,24vw,270px);
  display:flex; flex-direction:column;
  gap:clamp(1.2rem,3vw,1.9rem);
}

.portrait{
  width:100%;
  margin:0;
  background:#fff;
  padding:.55rem .55rem 0;
  border:2px solid var(--ink);
  transform:rotate(-1.6deg);
  box-shadow:12px 12px 0 var(--pink);
}

/* the second one leans the other way, in blue */
.portrait--alt{
  transform:rotate(1.9deg);
  box-shadow:12px 12px 0 var(--blue);
}
.portrait img{ width:100%; }
.portrait figcaption{
  font-family:var(--ui); font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  font-size:.86rem; color:var(--ink);
  padding:.7rem .2rem .8rem;
  text-align:center;
}
.portrait figcaption span{
  display:block; margin-top:.3rem;
  font-weight:600; letter-spacing:.11em;
  font-size:.6rem;
  color:var(--blue);
}
.portrait--alt figcaption span{ color:#c21b96; }

/* ── footer ─────────────────────────────────────────── */

.footer{
  margin-top:auto;
  background:var(--ink);
  border:2px solid var(--ink);
  padding:.8rem 1.1rem;
  transform:rotate(-.35deg);
}
.footer p{
  margin:0;
  font-family:var(--ui); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  font-size:.64rem; color:rgba(255,255,255,.75);
}

/* ── narrow: stack the portrait under the slab ──────── */

@media (max-width:760px){
  .row{ flex-direction:column; }
  .gallery{
    width:100%;
    flex-direction:row;
    align-items:flex-start;
    justify-content:flex-end;
    gap:clamp(1rem,4vw,1.8rem);
    padding-right:.5rem;      /* room for the offset shadows */
  }
  .portrait{ width:min(200px,44%); }
}

@media (max-width:520px){
  .logo-card, .slab, .footer, .portrait{ transform:none; }
  .logo-card{ box-shadow:6px 6px 0 var(--blue); }
  .slab{ box-shadow:8px 8px 0 var(--ink); }
  .portrait{ box-shadow:6px 6px 0 var(--pink); }
  .portrait--alt{ box-shadow:6px 6px 0 var(--blue); }
  .gallery{ justify-content:space-between; }
}