:root{
  --navy:#1F3864;
  --navy-deep:#12203C;
  --gold:#F5A800;
  --butter:#FFD84D;
  --razor:#9D2235;
  --coral:#F26B5B;
  --sky:#BFD7F2;
  --mint:#CDE7D7;
  --cream:#FFF8EC;
  --pink:#F7DADF;
  --paper:#F7F3EB;
  --card:#FFFFFF;
  --ink:#171A24;
  --ink-mid:#525A6B;
  --rule:#DED8CD;
  --shadow:0 18px 35px -22px rgba(18,32,60,.42);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    radial-gradient(circle at 12% 10%, rgba(245,168,0,.09) 0 2px, transparent 2.5px),
    radial-gradient(circle at 90% 28%, rgba(157,34,53,.06) 0 2px, transparent 2.5px),
    var(--paper);
  background-size:48px 48px, 62px 62px, auto;
  color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
}

a{color:inherit;}

.wrap{
  width:min(1080px, calc(100% - 40px));
  margin:0 auto;
}

::selection{
  background:var(--butter);
  color:var(--navy-deep);
}

/* ---------- reusable type ---------- */
.eyebrow{
  font-family:"DM Mono",monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0;
}

h1,h2,h3,h4,p{max-width:100%;}

h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:850;
  line-height:.98;
  letter-spacing:-.035em;
  margin:0;
}

.hand{
  font-family:"Caveat",cursive;
  font-weight:700;
}

/* ---------- hero / magazine cover ---------- */
header.masthead{
  position:relative;
  overflow:hidden;
  background:var(--cream);
  color:var(--navy-deep);
  border-top:10px solid var(--razor);
  border-bottom:0;
}

header.masthead::before{
  content:"ITALIA  •  EST. 1996  •  ARKANSAS";
  position:absolute;
  top:86px;
  right:-72px;
  z-index:1;
  font-family:"DM Mono",monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  color:rgba(18,32,60,.55);
  transform:rotate(90deg);
}

header.masthead::after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-28px;
  height:58px;
  background:var(--razor);
  transform:rotate(-1.5deg);
  transform-origin:left center;
}

.hero{
  position:relative;
  z-index:2;
  min-height:600px;
  padding:78px 0 100px;
}

.hero-copy{
  position:relative;
  z-index:3;
  max-width:840px;
}

.hero .eyebrow{
  display:inline-block;
  color:var(--razor);
  background:#fff;
  border:1px solid rgba(157,34,53,.16);
  padding:8px 12px;
  box-shadow:4px 4px 0 var(--pink);
  transform:rotate(-1deg);
}

h1{
  font-family:"Fraunces",Georgia,serif;
  font-weight:900;
  font-size:clamp(4rem,10vw,7.6rem);
  line-height:.82;
  margin:34px 0 28px;
  letter-spacing:-.065em;
  max-width:8.3ch;
  color:var(--navy-deep);
}

h1 .hog{
  position:relative;
  display:inline-block;
  color:var(--razor);
}

h1 .hog::after{
  content:"";
  position:absolute;
  left:2%;
  right:-2%;
  bottom:-.10em;
  height:.12em;
  background:var(--gold);
  border-radius:99px;
  transform:rotate(-2deg);
  z-index:-1;
}

.standfirst{
  font-size:clamp(1.08rem,2vw,1.28rem);
  color:var(--ink-mid);
  max-width:48ch;
  margin:0 0 30px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--razor);
  color:#fff;
  font-weight:800;
  font-size:1.02rem;
  padding:16px 28px;
  border-radius:2px;
  text-decoration:none;
  box-shadow:8px 8px 0 var(--gold);
  transform:rotate(-.6deg);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.cta::after{
  content:"↗";
  font-size:1.1em;
}

.cta:hover{
  background:var(--navy-deep);
  transform:translate(-2px,-2px) rotate(-.6deg);
  box-shadow:11px 11px 0 var(--gold);
}

.cta-secondary{
  font-family:"DM Mono",monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}

.hero-note{
  display:block;
  visibility:visible;
  position:absolute;
  right:7%;
  top:90px;
  width:210px;
  min-height:170px;
  padding:28px 24px;
  background:var(--butter);
  box-shadow:var(--shadow);
  transform:rotate(5deg);
  z-index:2;
}

.hero-note::before{
  content:"";
  position:absolute;
  width:72px;
  height:22px;
  left:50%;
  top:-10px;
  background:rgba(255,255,255,.58);
  transform:translateX(-50%) rotate(-3deg);
}

.hero-note strong{
  display:block;
  font-family:"Caveat",cursive;
  font-size:2.25rem;
  line-height:.9;
  color:var(--razor);
  margin-bottom:9px;
}

.hero-note span{
  display:block;
  font-family:"DM Mono",monospace;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy-deep);
}

.star{
  position:absolute;
  z-index:1;
  font-family:"Fraunces",serif;
  font-weight:900;
  line-height:1;
  user-select:none;
}

.star.one{
  left:5%;
  bottom:92px;
  color:var(--coral);
  font-size:50px;
  transform:rotate(12deg);
}

.star.two{
  right:27%;
  bottom:80px;
  color:var(--navy);
  font-size:28px;
  transform:rotate(-10deg);
}

/* ---------- anniversary / party invite ---------- */
.anniversary-shell{
  position:relative;
  z-index:4;
  margin-top:-22px;
}

.anniversary{
  position:relative;
  background:var(--sky);
  border:0;
  padding:34px 150px 34px 36px;
  box-shadow:10px 10px 0 var(--navy-deep);
  transform:rotate(.5deg);
}

.anniversary::before{
  content:"30!";
  position:absolute;
  right:32px;
  top:50%;
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--razor);
  color:#fff;
  font-family:"Caveat",cursive;
  font-weight:700;
  font-size:2.5rem;
  line-height:1;
  transform:translateY(-50%) rotate(8deg);
  box-shadow:5px 5px 0 var(--gold);
}

.anniversary .eyebrow{
  color:var(--navy-deep);
  margin-bottom:8px;
}

.anniversary h3{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.55rem,3vw,2rem);
  line-height:1;
  font-weight:850;
  margin:0 0 10px;
  color:var(--navy-deep);
  letter-spacing:-.025em;
}

.anniversary p:last-child{
  margin:0;
  color:#35435A;
  font-size:.95rem;
  max-width:68ch;
}

/* ---------- scrapbook ---------- */
.scrapbook{
  position:relative;
  margin-top:110px;
}

.scrapbook-head{
  position:relative;
  text-align:left;
  max-width:760px;
  margin:0 auto 36px;
  padding-left:90px;
}

.scrapbook-head::before{
  content:"★";
  position:absolute;
  left:18px;
  top:-12px;
  font-size:54px;
  line-height:1;
  color:var(--gold);
  transform:rotate(-8deg);
}

.scrapbook-head .eyebrow{
  color:var(--razor);
  margin-bottom:11px;
}

.scrapbook-head h2{
  color:var(--navy-deep);
}

.scrapbook-copy{
  color:var(--ink-mid);
  max-width:55ch;
  margin:15px 0 0;
  font-size:1rem;
}

.scrapbook-copy .hand{
  color:var(--razor);
  font-size:1.4em;
  line-height:0;
}

.scrapbook-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:32px 22px;
  margin-top:50px;
  padding:20px 8px 52px;
  align-items:start;
}

.photo-card,
.note-card{
  position:relative;
  min-width:0;
}

.photo-card{
  background:#fff;
  padding:9px 9px 30px;
  box-shadow:0 16px 30px -14px rgba(18,32,60,.38);
  transition:transform .22s ease, box-shadow .22s ease;
}

.photo-card:hover{
  transform:translateY(-5px) rotate(0deg) !important;
  box-shadow:0 24px 34px -15px rgba(18,32,60,.42);
  z-index:8;
}

.photo-card::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  width:60px;
  height:20px;
  background:rgba(255,216,77,.68);
  transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 1px 3px rgba(0,0,0,.10);
  z-index:2;
}

.photo-fill{
  display:block;
  overflow:hidden;
  background:#E8E3DA;
}

.photo-card.square .photo-fill{aspect-ratio:1/1;}
.photo-card.portrait .photo-fill{aspect-ratio:4/5;}
.photo-card.landscape .photo-fill{aspect-ratio:5/4;}

.photo-fill img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.photo-card.retro .photo-fill img{
  filter:sepia(14%) saturate(.92) contrast(1.025);
}

.photo-tag{
  position:absolute;
  left:14px;
  bottom:5px;
  font-family:"Caveat",cursive;
  font-size:1.15rem;
  font-weight:700;
  color:var(--navy-deep);
  transform:rotate(-2deg);
}

.note-card{
  padding:26px 24px 23px;
  box-shadow:0 15px 28px -16px rgba(18,32,60,.32);
  border:0;
}

.note-card.yellow{background:#FFF2A8;}
.note-card.pink{background:var(--pink);}
.note-card.mint{background:var(--mint);}
.note-card.blue{background:var(--sky);}

.note-card::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--razor);
  transform:translateX(-50%);
  box-shadow:0 2px 3px rgba(0,0,0,.18);
}

.note-card h4{
  font-family:"Fraunces",Georgia,serif;
  font-size:1.2rem;
  line-height:1.05;
  font-weight:850;
  color:var(--navy-deep);
  margin:2px 0 12px;
  letter-spacing:-.02em;
}

.note-card ul{
  margin:0;
  padding-left:18px;
}

.note-card li{
  font-size:.86rem;
  color:#354052;
  margin-bottom:7px;
  line-height:1.42;
}

.note-card li:last-child{margin-bottom:0;}

.scrap-1{grid-column:1 / span 4;}
.scrap-2{grid-column:5 / span 4;margin-top:44px;}
.scrap-3{grid-column:9 / span 4;margin-top:6px;}

.scrap-4{grid-column:1 / span 3;margin-top:22px;}
.scrap-5{grid-column:4 / span 4;}
.scrap-6{grid-column:8 / span 5;margin-top:36px;}

.scrap-7{grid-column:1 / span 4;margin-top:22px;}
.scrap-8{grid-column:5 / span 4;margin-top:-8px;}
.scrap-9{grid-column:9 / span 4;margin-top:38px;}

.scrap-10{grid-column:1 / span 3;}
.scrap-11{grid-column:4 / span 3;margin-top:38px;}
.scrap-12{grid-column:7 / span 3;margin-top:6px;}
.scrap-13{grid-column:10 / span 3;margin-top:44px;}
.scrap-14{grid-column:3 / span 4;margin-top:12px;}

.rotate-1{transform:rotate(-3.2deg);}
.rotate-2{transform:rotate(2.3deg);}
.rotate-3{transform:rotate(1.4deg);}
.rotate-4{transform:rotate(-2.1deg);}
.rotate-5{transform:rotate(-1.5deg);}
.rotate-6{transform:rotate(3deg);}

/* Decorative cleanup:
   The old free-floating hero scribble and scrapbook circle/arrow doodles
   were removed because they no longer anchored reliably on desktop. */

/* ---------- dates / editorial checklist ---------- */
.dates{
  position:relative;
  margin-top:90px;
  padding:70px 0 8px;
  border-top:2px solid var(--navy-deep);
}

.dates::before{
  content:"save these ↓";
  position:absolute;
  top:-28px;
  right:4%;
  font-family:"Caveat",cursive;
  font-size:1.75rem;
  font-weight:700;
  color:var(--razor);
  transform:rotate(-4deg);
  background:var(--paper);
  padding:0 10px;
}

.dates-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:34px;
  align-items:end;
  margin-bottom:36px;
}

.dates-head .eyebrow{
  color:var(--razor);
  align-self:start;
  padding-top:10px;
}

.dates-head h2{
  color:var(--navy-deep);
}

.date-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.date-card{
  position:relative;
  min-height:158px;
  border:0;
  border-radius:0;
  padding:24px;
  display:block;
  box-shadow:6px 6px 0 rgba(18,32,60,.12);
}

.date-card:nth-child(1){background:var(--butter);transform:rotate(-.7deg);}
.date-card:nth-child(2){background:var(--pink);transform:rotate(.6deg);}
.date-card:nth-child(3){background:var(--mint);transform:rotate(.35deg);}
.date-card:nth-child(4){background:var(--sky);transform:rotate(-.5deg);}

.date-when{
  display:inline-block;
  font-family:"DM Mono",monospace;
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:var(--navy-deep);
  padding:5px 8px;
  min-width:0;
  margin-bottom:16px;
}

.date-what{
  display:block;
  font-size:1rem;
}

.date-what strong{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-size:1.28rem;
  line-height:1.05;
  font-weight:850;
  color:var(--navy-deep);
  margin-bottom:8px;
  letter-spacing:-.02em;
}

.date-what span{
  color:#445065;
  font-size:.9rem;
}

/* ---------- instagram / postcard ---------- */
.follow{
  position:relative;
  margin:100px auto 0;
  max-width:900px;
  text-align:left;
  background:#fff;
  border:2px solid var(--navy-deep);
  border-radius:0;
  padding:46px 210px 46px 44px;
  box-shadow:12px 12px 0 var(--coral);
  transform:rotate(-.6deg);
  overflow:hidden;
}

.follow::after{
  content:"CIAO!";
  position:absolute;
  right:30px;
  top:32px;
  width:125px;
  height:125px;
  display:grid;
  place-items:center;
  border:3px dashed var(--razor);
  border-radius:50%;
  font-family:"DM Mono",monospace;
  font-size:1.1rem;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--razor);
  transform:rotate(12deg);
}

.follow .eyebrow{
  color:var(--razor);
  margin-bottom:10px;
}

.follow h2{
  font-size:clamp(1.8rem,4vw,2.7rem);
  max-width:14ch;
}

.follow-copy{
  color:var(--ink-mid);
  max-width:55ch;
  margin:14px 0 22px;
  font-size:.95rem;
}

.ig-link{
  display:inline-block;
  background:var(--navy-deep);
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  padding:12px 18px;
  border-radius:0;
  text-decoration:none;
  transition:transform .16s ease, background .16s ease;
}

.ig-link:hover{
  background:var(--razor);
  transform:translateY(-2px);
}

/* ---------- footer ---------- */
footer{
  margin-top:86px;
  padding:28px 0 54px;
  border-top:1px solid var(--rule);
  font-size:.85rem;
  color:var(--ink-mid);
  text-align:center;
}

.faculty{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 28px;
}

.faculty li{
  display:flex;
  flex-direction:column;
}

.faculty span{
  font-weight:800;
  color:var(--ink);
  font-size:.85rem;
}

.faculty a{
  color:var(--navy);
  font-size:.8rem;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.faculty a:hover{color:var(--razor);}

.colophon{
  font-family:"DM Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- keyboard / motion ---------- */
a:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
}

/* ---------- tablet ---------- */
@media (max-width:860px){
  .hero{
    min-height:0;
    padding:66px 0 110px;
  }

  .hero-note{
    width:180px;
    right:4%;
    top:96px;
    opacity:.95;
  }

  h1{
    font-size:clamp(4rem,12vw,6rem);
    max-width:7.5ch;
  }

  .scrapbook-grid{
    grid-template-columns:repeat(6,1fr);
    gap:28px 18px;
  }

  .scrap-1,.scrap-3,.scrap-5,.scrap-7,.scrap-9,.scrap-11,.scrap-13{
    grid-column:1 / span 3;
  }

  .scrap-2,.scrap-4,.scrap-6,.scrap-8,.scrap-10,.scrap-12,.scrap-14{
    grid-column:4 / span 3;
  }

  .scrap-1,.scrap-2,.scrap-3,.scrap-4,.scrap-5,.scrap-6,
  .scrap-7,.scrap-8,.scrap-9,.scrap-10,.scrap-11,.scrap-12,
  .scrap-13,.scrap-14{
    margin-top:0;
  }
}

/* ---------- mobile ---------- */
@media (max-width:620px){
  .wrap{
    width:min(100% - 28px, 1080px);
  }

  header.masthead::before{display:none;}

  .hero{
    padding:52px 0 88px;
  }

  .hero .eyebrow{
    font-size:9.5px;
    line-height:1.45;
    max-width:88%;
  }

  h1{
    font-size:clamp(3.45rem,18vw,5.2rem);
    max-width:7.3ch;
    margin-top:28px;
  }

  .standfirst{
    font-size:1rem;
    max-width:32ch;
  }

  .hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .hero-note{
    position:relative;
    right:auto;
    top:auto;
    width:175px;
    min-height:0;
    padding:18px 18px 20px;
    margin:44px 0 -22px auto;
    transform:rotate(4deg);
  }

  .hero-note strong{font-size:1.8rem;}

  .star.two{display:none;}

  .anniversary-shell{margin-top:-7px;}

  .anniversary{
    padding:30px 28px 92px;
    box-shadow:7px 7px 0 var(--navy-deep);
  }

  .anniversary::before{
    width:70px;
    height:70px;
    right:22px;
    top:auto;
    bottom:14px;
    transform:rotate(8deg);
    font-size:2rem;
  }

  .scrapbook{
    margin-top:86px;
  }

  .scrapbook-head{
    padding-left:0;
    margin-bottom:24px;
  }

  .scrapbook-head::before{
    position:relative;
    display:block;
    left:auto;
    top:auto;
    width:max-content;
    height:46px;
    line-height:46px;
    font-size:38px;
    margin:0 0 14px 2px;
    transform:rotate(-8deg);
  }

  .scrapbook-grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px 14px;
    padding-left:0;
    padding-right:0;
  }

  .scrap-1,.scrap-3,.scrap-5,.scrap-7,.scrap-9,
  .scrap-10,.scrap-11,.scrap-12,.scrap-13,.scrap-14{
    grid-column:auto;
  }

  .scrap-2,.scrap-4,.scrap-6,.scrap-8{
    grid-column:1 / -1;
    margin:4px 12px;
  }

  .note-card{
    padding:24px 22px;
  }

  .photo-card{
    padding:7px 7px 27px;
  }

  .photo-tag{font-size:1rem;}

  .dates{
    margin-top:70px;
    padding-top:54px;
  }

  .dates-head{
    grid-template-columns:1fr;
    gap:10px;
  }

  .dates-head .eyebrow{padding-top:0;}

  .date-list{
    grid-template-columns:1fr;
  }

  .date-card{
    min-height:0;
  }

  .follow{
    margin-top:80px;
    padding:36px 28px 165px;
    box-shadow:8px 8px 0 var(--coral);
  }

  .follow::after{
    top:auto;
    bottom:25px;
    right:28px;
    width:105px;
    height:105px;
  }

  footer{margin-top:70px;}
}