/*
Theme Name: abby elizabeth ens — the archive
Theme URI: https://abbyelizabethens.com
Author: abby elizabeth ens
Description: A hand-annotated portfolio where every page is a different room of the same house — scrapbook, linen wall, cut-paper, handkerchief. Her handwriting is the navigation.
Version: 4.8
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: abby-archive
*/

/* abby's own handwriting, drawn on the iPad */
@font-face{
  font-family:'Abby';
  src:url('assets/fonts/Abby-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ==========================================================
   EDIT ME: fonts & colours — change once, applies everywhere
   ========================================================== */
:root{
  --font-display:'Cormorant Garamond',serif;   /* elegant headers inside */
  --font-body:'Space Grotesk',sans-serif;      /* body + labels */
  --font-hand:'Abby','Shantell Sans',cursive;  /* her hand; falls back for digits & punctuation */
  --paper:#faf7f0;
  --paper-2:#f3efe4;
  --ink:#332a1f;
  --pencil:#6b5f4e;
  --amber:#dd8a2b;
  --leak:#f3bd58;
  --sea:#87a5ab;
  --red:#a03a2e;
  --pink:#d97263;
  --chalk:#fdfcf8;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  transition:background .5s ease, color .5s ease;
  font-family:var(--font-body);
  font-weight:300;
  font-size:15.5px;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
::selection{background:var(--leak);color:var(--ink)}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding:14px 4vw 10px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;
}
.site-header.on-hero{position:fixed;left:0;right:0;background:transparent;border-bottom:none;backdrop-filter:none}
.site-header.on-hero .wordmark,.site-header.on-hero .site-nav a{color:var(--chalk);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.wordmark{font-family:var(--font-body);font-weight:500;font-size:16px;text-decoration:none;letter-spacing:.05em;text-transform:lowercase}
.site-nav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}
.site-nav a{
  text-decoration:none;font-size:14px;letter-spacing:.03em;position:relative;padding:2px 1px;
  font-family:var(--font-body);font-weight:400;text-transform:lowercase;
}
.site-nav a.active{font-weight:700}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--amber);transition:right .25s ease;border-radius:2px;transform:rotate(-.7deg)}
.site-nav a:hover::after,.site-nav a.active::after{right:0}

/* ---------- layout ---------- */
.site-main{position:relative;z-index:2}
.inner{padding:6vh 4vw 10vh;max-width:1280px;margin:0 auto}

/* ---------- shared ---------- */
.pencil{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--pencil);font-size:17px}
h2{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,4vw,54px);text-transform:lowercase}
.section-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.section-sub{max-width:60ch;color:var(--pencil);margin-bottom:44px}
.head-scrawl{font-family:var(--font-hand);font-size:15px;color:var(--red);transform:rotate(-2deg)}
.head-img{display:block;height:clamp(42px,5.4vw,66px);width:auto}
.head-img.tall{height:clamp(56px,7vw,88px)}
.photo{
  background:#fbf8ef;padding:10px 10px 14px;box-shadow:0 6px 18px rgba(51,42,31,.22);
  transition:box-shadow .35s ease;position:relative;
}
.photo img{display:block;width:100%;height:auto;filter:saturate(.96) contrast(1.01)}
.caption{font-family:var(--font-body);font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pencil);margin-top:10px;line-height:1.5}
.circled{position:relative;display:inline-block;font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--red);padding:4px 10px}
.circled svg{position:absolute;inset:-4px -6px;width:calc(100% + 12px);height:calc(100% + 8px)}
.circled svg path{fill:none;stroke:var(--red);stroke-width:1.6}
.underline-link{
  font-weight:500;text-decoration:none;font-size:15px;
  border-bottom:2px solid var(--amber);padding-bottom:2px;transition:color .2s,border-color .2s;
}
.underline-link:hover{color:var(--red);border-color:var(--red)}

/* ---------- HERO (front page) ---------- */
.hero-bleed{position:relative;min-height:100vh;overflow:hidden;display:block}
.hero-bleed > img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}
.hero-bleed.no-image{background:linear-gradient(160deg,#5b6f78 0%, #87a5ab 45%, #dd8a2b 130%)}
.hero-bleed::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(30,20,10,.34) 100%);
}
.hero-stage{position:absolute;inset:0;z-index:5}
.hero-name{
  position:absolute;left:6%;top:17%;width:clamp(350px,42vw,690px);
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.4));transform:rotate(-2deg);
}
.hero-tag{
  position:absolute;left:7%;top:35%;max-width:340px;color:var(--chalk);
  font-family:var(--font-body);font-weight:300;font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.05em;text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-nav a{position:absolute;display:block;cursor:pointer;transition:transform .25s ease}
.hero-nav a img{display:block;width:100%;filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))}
.hero-nav a:hover{transform:scale(1.07) rotate(0deg)!important}
.n1{right:14%;top:20%;width:clamp(190px,21vw,320px);transform:rotate(3deg)}
.n2{right:26%;top:39%;width:clamp(100px,11vw,170px);transform:rotate(-5deg)}
.n3{right:10%;top:53%;width:clamp(100px,11vw,170px);transform:rotate(2deg)}
.n4{right:20%;top:72%;width:clamp(180px,20vw,300px);transform:rotate(-2deg)}
.hero-hint{
  position:absolute;left:8%;bottom:9%;color:var(--chalk);
  font-family:var(--font-body);font-weight:300;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.rings{
  position:absolute;right:-6%;bottom:-12%;width:clamp(260px,30vw,460px);opacity:.5;pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.2));
}

/* ---------- work grid ---------- */
.entries{columns:2 460px;column-gap:56px;position:relative}
.entry{break-inside:avoid;margin-bottom:72px;position:relative}
.entry a{text-decoration:none}
.entry .photo{padding:0;background:none;box-shadow:0 10px 30px rgba(51,42,31,.18);transition:transform .4s ease,box-shadow .4s ease}
.entry a:hover .photo{transform:translateY(-6px);box-shadow:0 18px 44px rgba(51,42,31,.26)}
.entry-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;gap:14px}
.entry-title{font-weight:500;font-size:15px;letter-spacing:.01em;text-transform:lowercase}
.entry-medium{color:var(--pencil);font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}

/* ---------- single archive entry ---------- */
.single-entry{max-width:1000px;margin:0 auto}
.single-entry .photo{padding:0;background:none;margin:30px 0;box-shadow:0 12px 34px rgba(51,42,31,.2)}
.entry-story{max-width:60ch;margin-top:30px}
.entry-story p+p{margin-top:14px}
.back-link{margin-top:44px;display:inline-block}

/* ---------- words / notes ---------- */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:44px;align-items:start}
.note{
  background:linear-gradient(180deg,#fdfbf5 0%, #f6f1e4 100%);
  box-shadow:0 7px 20px rgba(51,42,31,.18);
  padding:34px 30px 30px;position:relative;transition:transform .3s ease;display:block;text-decoration:none;
}
.note:hover{transform:translateY(-5px) rotate(0deg)!important}
.note::before{
  content:"";position:absolute;left:0;right:0;top:52%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(51,42,31,.14),transparent);
}
.note .date{font-size:12px;letter-spacing:.14em;color:var(--red);font-weight:500;margin-bottom:16px;display:block;text-transform:uppercase}
.note-body{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:21px;line-height:1.5}
.note .sig{display:block;margin-top:22px;font-family:var(--font-hand);font-size:15px;color:var(--pencil);transform:rotate(-3deg)}
.note-photo{padding:12px;background:#fbf8ef;box-shadow:0 7px 20px rgba(51,42,31,.18);transform:rotate(1.6deg);display:block;text-decoration:none}
.note-photo img{width:100%;display:block}
.single-note{max-width:680px;margin:0 auto}
.single-note .note{transform:none}
.single-note .note-body p+p{margin-top:16px}

/* ---------- pages ---------- */
.page-content{max-width:720px}
.page-content p+p{margin-top:16px}
.page-content .big,.page-content h3{font-family:var(--font-display);font-weight:500;font-size:clamp(25px,2.7vw,35px);line-height:1.35;text-transform:lowercase;margin:24px 0 8px}
.fineprint{margin-top:38px;padding-top:20px;border-top:1px dashed color-mix(in srgb,var(--ink) 35%,transparent);color:var(--pencil);font-size:14px}

/* ---------- contact ---------- */
.contact-section .inner{text-align:center;padding-top:10vh}
.contact-head{display:flex;align-items:center;justify-content:center;gap:5vw;flex-wrap:wrap}
.contact-write{width:clamp(260px,36vw,480px);transform:rotate(-2deg)}
.contact-stamp{width:clamp(200px,24vw,320px);transform:rotate(7deg);opacity:.9}
.email{
  display:inline-block;margin-top:34px;font-size:clamp(17px,2.4vw,26px);font-weight:500;
  text-decoration:none;border-bottom:3px solid var(--amber);padding-bottom:3px;
}
.email:hover{color:var(--red);border-color:var(--red)}
.contact-note{margin-top:26px;color:var(--pencil)}
.socials{margin-top:44px;font-size:14px}
.socials a{text-decoration:none;border-bottom:1px solid var(--pencil)}
.socials a:hover{color:var(--red)}
.contact-pencil{margin-top:60px}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  padding:22px 4vw;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--pencil);position:relative;z-index:2;background:var(--paper);
}
.site-footer .h{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:14.5px}

/* ---------- 404 ---------- */
.lost{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}


/* ==========================================================
   THE ROOMS — every page is a different room of the same house
   ========================================================== */
body.room-archive{           /* THE PHOTO WALL — her photo behind, white-matted prints over */
  --paper:#2b2a26;
  --paper-2:#232219;
  --ink:#fdfaf3;
  --pencil:#e6dccb;
  --amber:#f0d3a8;
  --red:#f5e4d4;
}
body.room-words{             /* THE LINEN WALL — olive cloth, cream mats, stamped stars */
  --paper:#7d8a52;
  --paper-2:#717d4a;
  --ink:#f6efd8;
  --pencil:#ddd6b0;
  --amber:#e6b53f;
  --red:#c2603a;
}
body.room-contact{           /* THE HANDKERCHIEF — red wall, cream linen, embroidered */
  --paper:#a52a22;
  --paper-2:#96241d;
  --ink:#fbf6ec;
  --pencil:#e8cfc2;
  --amber:#f0d3a8;
  --red:#f5e4d4;
}
body.room-about{             /* THE CUT-PAPER ROOM — photo wall, words on torn strips */
  --paper:#cfc9b4;
  --paper-2:#c3bda8;
  --ink:#1c1a16;
  --pencil:#4a463c;
  --amber:#8a6b2f;
  --red:#7a2f1f;
}

/* heading ink colour swaps with the room: cream in the dark room, dark elsewhere */
.head-img.ink{display:block}
.head-img.chalk{display:none}
/* ---- room: THE PHOTO WALL (a photo pinned behind, prints floating over) ---- */
body.room-archive .archive-wall{
  position:fixed;inset:0;z-index:0;
  background-image:var(--wall-photo, none);
  background-size:cover;background-position:center;
  filter:saturate(.92) contrast(1.02);
}
body.room-archive .archive-wall::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(25,22,16,.42) 0%, rgba(25,22,16,.30) 35%, rgba(25,22,16,.55) 100%),
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(25,22,16,.35) 100%);
}
body.room-archive .site-header,
body.room-archive .site-main,
body.room-archive .site-footer{position:relative;z-index:2}
/* the wall must never sit over the chrome — or the text */
body.room-archive .archive-wall{z-index:0}
body.room-archive .room-wrap{position:relative;z-index:1}
body.room-archive .site-header{
  z-index:120;border-bottom:none;backdrop-filter:blur(2px);
  /* a soft shade at the very top so the nav always reads over any photo */
  background:linear-gradient(180deg, rgba(18,15,10,.62) 0%, rgba(18,15,10,.30) 62%, transparent 100%);
}
body.room-archive .wordmark,
body.room-archive .site-nav a{color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.75)}
body.room-archive .site-nav a.active{border-bottom:1px solid rgba(253,250,243,.75)}
body.room-archive .site-nav a::after{background:rgba(253,250,243,.9)}
body.room-archive .site-footer{
  background:linear-gradient(180deg, transparent, rgba(20,17,12,.5));border-top:none;
}

body.room-archive .inner{max-width:1180px;padding-top:6vh;padding-bottom:16vh}
body.room-archive .section-head{justify-content:center;margin-bottom:16px}
body.room-archive .head-img.ink{display:none}
body.room-archive .head-img.chalk{display:block}
body.room-archive .head-img{filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))}
body.room-archive .section-head{
  padding-top:2vh;
}
body.room-archive .section-sub{
  text-align:center;max-width:none;color:var(--ink);
  font-family:var(--font-display);font-style:italic;font-size:clamp(18px,2vw,23px);
  text-shadow:0 2px 14px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.6);
  margin-bottom:7vh;
}
/* a gentle pool of shade behind the title so it never fights the photo */
body.room-archive .room-wrap{
  background:radial-gradient(ellipse 900px 380px at 50% 0, rgba(18,15,10,.55), transparent 70%);
}

/* the prints */
body.room-archive .entries{columns:2 400px;column-gap:4vw}
body.room-archive .entry{margin-bottom:7vh;width:100%!important;margin-left:0!important}
body.room-archive .entry .photo{
  background:#fdfbf6;padding:16px 16px 18px;
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  transition:transform .45s ease, box-shadow .45s ease;
}
body.room-archive .entry a:hover .photo{transform:translateY(-7px);box-shadow:0 30px 66px rgba(0,0,0,.55)}
body.room-archive .photo img{filter:saturate(.94) contrast(1.02)}
body.room-archive .entry:nth-child(3n+1) .photo{transform:rotate(-.7deg)}
body.room-archive .entry:nth-child(3n+2){margin-top:5vh}
body.room-archive .entry:nth-child(3n+2) .photo{transform:rotate(.6deg)}
body.room-archive .entry:nth-child(3n+3) .photo{transform:rotate(-.3deg)}
body.room-archive .entry:nth-child(4n+2) .photo{padding-bottom:44px}   /* the odd mounted print */

/* captions sit inside the white mat */
body.room-archive .entry-meta{display:block;margin-top:14px;padding:0 2px}
body.room-archive .entry-title{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:17px;letter-spacing:0;color:#fdfaf3;display:block;text-transform:lowercase;
  text-shadow:0 1px 10px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5);
}
body.room-archive .entry-medium{
  font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#ece2d2;opacity:.85;display:block;margin-top:5px;white-space:normal;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}

/* ---- room: WORDS — the linen wall (cloth, cream mats, stamped stars) ---- */
body.room-words .room-wrap{
  /* woven cloth: fine warp + weft threads over the olive */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
}
body.room-words .head-img.ink{display:none}
body.room-words .head-img.chalk{display:block}
body.room-words .inner{max-width:1100px;padding-top:9vh}
body.room-words .section-head{margin-bottom:14px}
body.room-words .section-sub{
  font-family:var(--font-hand);font-style:normal;font-weight:400;
  font-size:clamp(16px,1.8vw,21px);color:var(--pencil);letter-spacing:.03em;
  max-width:34ch;line-height:1.7;margin-bottom:8vh;text-transform:uppercase;
}
body.room-words .notes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:7vh 4vw;max-width:none;align-items:start;
}
/* every scrap matted on cream card with a stamped star border */
body.room-words .note,
body.room-words .note-photo{
  background:#ece2c6;color:#2f2a1c;padding:26px 24px;
  border:22px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66'%3E%3Cg fill='%23342b18'%3E%3Cpath d='M11 2 C12.2 8.6 14.4 10.8 21 12 C14.4 13.2 12.2 15.4 11 22 C9.8 15.4 7.6 13.2 1 12 C7.6 10.8 9.8 8.6 11 2 Z'/%3E%3Cpath d='M33 2 C34.2 8.6 36.4 10.8 43 12 C36.4 13.2 34.2 15.4 33 22 C31.8 15.4 29.6 13.2 23 12 C29.6 10.8 31.8 8.6 33 2 Z'/%3E%3Cpath d='M55 2 C56.2 8.6 58.4 10.8 65 12 C58.4 13.2 56.2 15.4 55 22 C53.8 15.4 51.6 13.2 45 12 C51.6 10.8 53.8 8.6 55 2 Z'/%3E%3Cpath d='M11 24 C12.2 30.6 14.4 32.8 21 34 C14.4 35.2 12.2 37.4 11 44 C9.8 37.4 7.6 35.2 1 34 C7.6 32.8 9.8 30.6 11 24 Z'/%3E%3Cpath d='M55 24 C56.2 30.6 58.4 32.8 65 34 C58.4 35.2 56.2 37.4 55 44 C53.8 37.4 51.6 35.2 45 34 C51.6 32.8 53.8 30.6 55 24 Z'/%3E%3Cpath d='M11 46 C12.2 52.6 14.4 54.8 21 56 C14.4 57.2 12.2 59.4 11 66 C9.8 59.4 7.6 57.2 1 56 C7.6 54.8 9.8 52.6 11 46 Z'/%3E%3Cpath d='M33 46 C34.2 52.6 36.4 54.8 43 56 C36.4 57.2 34.2 59.4 33 66 C31.8 59.4 29.6 57.2 23 56 C29.6 54.8 31.8 52.6 33 46 Z'/%3E%3Cpath d='M55 46 C56.2 52.6 58.4 54.8 65 56 C58.4 57.2 56.2 59.4 55 66 C53.8 59.4 51.6 57.2 45 56 C51.6 54.8 53.8 52.6 55 46 Z'/%3E%3C/g%3E%3C/svg%3E") 22 round;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transform:none!important;
}
body.room-words .note-photo{padding:14px}
body.room-words .note-photo img{
  mix-blend-mode:normal;filter:grayscale(1) contrast(1.08);
}
body.room-words .note-body{
  font-family:var(--font-hand);font-style:normal;font-weight:400;
  font-size:20px;line-height:1.8;letter-spacing:.02em;color:#2f2a1c;
  text-transform:uppercase;
}
body.room-words .caption{color:#5c5238}

/* ---- room: ABOUT — the cut-paper room (photo wall, words on torn strips) ---- */
/* --about-photo is set inline from the About page's Featured Image.
   Without one, the room falls back to plain paper. */
body.room-about .room-wrap{
  background-image:linear-gradient(rgba(60,55,40,.18), rgba(60,55,40,.18)), var(--about-photo, none);
  background-size:cover;background-position:center;background-attachment:fixed;
}
body.room-about .inner{max-width:1000px;padding-top:11vh;padding-bottom:14vh}
body.room-about .section-head{margin-bottom:6vh;transform:rotate(-1.2deg)}
body.room-about .head-img{
  background:#f7f3e7;padding:12px 20px;box-shadow:0 3px 10px rgba(0,0,0,.22);
}
body.room-about .about-wrap{display:block;max-width:760px}
/* each paragraph sits in its own block, but its TEXT stays inline —
   that's what gives every wrapped line its own slice of paper, with no empty stubs */
body.room-about .about-copy .strip{display:block;margin-bottom:5vh}
body.room-about .about-copy .strip > *{
  display:inline;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:#f7f3e7;color:#1c1a16;
  box-shadow:0 3px 9px rgba(0,0,0,.2);
  margin:0;
}
body.room-about .about-copy .strip > .big,
body.room-about .about-copy .strip > h1,
body.room-about .about-copy .strip > h2,
body.room-about .about-copy .strip > h3{
  font-family:var(--font-display);font-style:normal;font-weight:600;
  font-size:clamp(30px,4.4vw,56px);line-height:1.85;letter-spacing:.01em;
  padding:.06em .3em;text-transform:lowercase;
}
body.room-about .about-copy .strip > p{
  font-family:var(--font-display);font-size:clamp(17px,1.6vw,21px);
  line-height:2.15;padding:.12em .34em;font-weight:500;
}
/* set down at slightly different angles, like they were pasted by hand */
body.room-about .about-copy .strip:nth-child(1){transform:rotate(-.9deg)}
body.room-about .about-copy .strip:nth-child(2){transform:rotate(.7deg);margin-left:5%}
body.room-about .about-copy .strip:nth-child(3){transform:rotate(-.5deg);margin-left:2%}
body.room-about .about-copy .strip:nth-child(4){transform:rotate(1deg);margin-left:8%}

/* ---- room: WRITE TO ME — the handkerchief ---- */
body.room-contact .room-wrap{
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
body.room-contact .inner{
  max-width:720px;margin:9vh auto 12vh;padding:9vh 7vw 8vh;position:relative;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(180,160,140,.10) 0 1px, transparent 1px 3px),
    #fbf6ec;
  color:#a3243a;
  border:20px solid transparent;
  /* eyelet lace edging — the red wall shows through the holes */
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath fill='%23fbf6ec' fill-rule='evenodd' d='M0 0h60v60H0z M10 5a5 5 0 100 10 5 5 0 100-10z M30 5a5 5 0 100 10 5 5 0 100-10z M50 5a5 5 0 100 10 5 5 0 100-10z M10 25a5 5 0 100 10 5 5 0 100-10z M50 25a5 5 0 100 10 5 5 0 100-10z M10 45a5 5 0 100 10 5 5 0 100-10z M30 45a5 5 0 100 10 5 5 0 100-10z M50 45a5 5 0 100 10 5 5 0 100-10z'/%3E%3C/svg%3E") 20 round;
  box-shadow:0 14px 40px rgba(60,8,5,.35);
}
/* everything on the cloth is stitched in the same red thread */
body.room-contact .contact-note,
body.room-contact .socials a,
body.room-contact .email,
body.room-contact .contact-pencil{
  color:#a3243a;
}
body.room-contact .contact-note,
body.room-contact .socials a{
  font-family:var(--font-body);font-weight:400;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;line-height:2.4;
}
body.room-contact .email{
  font-family:var(--font-body);font-weight:500;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px dashed #c06a72;
}
body.room-contact .email:hover{color:#7d1a2c;border-color:#7d1a2c}
body.room-contact .socials a{border-bottom:1px dashed #c06a72}
body.room-contact .contact-pencil{
  font-family:var(--font-display);font-style:italic;font-size:17px;
}
/* a small stitched heart, like the one in the corner of a hanky */
body.room-contact .contact-pencil::after{
  content:"♥";display:block;margin-top:26px;font-size:19px;color:#a3243a;
}
body.room-contact .contact-write{filter:none;width:clamp(220px,30vw,380px)}
body.room-contact .contact-head{gap:0}
body.room-contact .contact-stamp{
  width:clamp(180px,22vw,290px);margin-left:-4vw;
  align-self:flex-start;margin-top:-5vh;
  transform:rotate(7deg) translateY(calc(-3vh + 19px));
  filter:sepia(1) saturate(3.2) hue-rotate(-28deg) contrast(1.05);opacity:.85;
}

/* ---------- work grid ---------- */
.entries{columns:2 460px;column-gap:56px;position:relative}
.entry{break-inside:avoid;margin-bottom:72px;position:relative}
.entry .photo{padding:0;background:none;box-shadow:0 10px 30px rgba(51,42,31,.18)}
.entry-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;gap:14px}
.entry-title{font-weight:500;font-size:15px;letter-spacing:.01em}
.entry-medium{color:var(--pencil);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.marginalia{display:none}



/* On the About page the first block (a Heading, or the first paragraph) is the big strip. */
body.room-about .about-copy > h1,
body.room-about .about-copy > h2,
body.room-about .about-copy > h3,
body.room-about .about-copy > .big{
  display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:#f7f3e7;color:#1c1a16;box-shadow:0 3px 9px rgba(0,0,0,.2);
  font-family:var(--font-display);font-style:normal;font-weight:600;text-transform:lowercase;
  font-size:clamp(30px,4.4vw,56px);line-height:1.85;padding:.06em .3em;
}


/* ==========================================================
   MOBILE — the rooms, rebuilt for a phone
   ========================================================== */


@media (max-width:820px){
  body{font-size:15px}

  /* ---- header ---- */
  .site-header,header{padding:12px 5vw 9px;gap:4px 16px}
  .wordmark{font-size:14px}
  .site-nav,nav{margin-left:0;width:100%;gap:14px;justify-content:space-between}
  .site-nav a,nav a{font-size:12.5px}

  /* ---- hero: let the page grow instead of clipping the nav ---- */
  #home,.hero-bleed{min-height:auto;overflow:visible}
  .hero-bleed{padding:0 0 9vh}
  .hero-stage{
    position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;
    padding:20vh 6vw 6vh;gap:0;
  }
  .hero-name{position:static;width:78vw;margin:0 auto;transform:rotate(-2deg)}
  .hero-tag{position:static;max-width:80vw;margin:3.5vh auto 0;text-align:center;font-size:13px;left:auto;top:auto}
  .hero-nav{display:flex;flex-direction:column;align-items:center;gap:6.5vh;margin-top:9vh;width:100%}
  .hero-nav a{position:static;transform:none!important;right:auto;top:auto;width:58vw}
  .hero-nav a.n1,.hero-nav a.n4{width:58vw}
  .hero-nav a.n2,.hero-nav a.n3{width:34vw}
  .hero-nav a img{width:100%;height:auto}
  .hero-hint{display:none}
  .rings{right:-26%;bottom:2%;width:60vw;opacity:.35}

  /* ---- shared ---- */
  .inner{padding:5vh 6vw 9vh}
  .head-img{height:38px}
  .head-img.tall{height:46px}
  .section-head{gap:12px;margin-bottom:12px}
  .section-sub{margin-bottom:5vh}

  /* ---- room: archive (photo wall) ---- */
  body.room-archive .archive-wall{background-attachment:scroll}
  body.room-archive .entries{columns:auto}
  body.room-archive .entry .photo{padding:11px 11px 13px;transform:none!important}
  body.room-archive .entry:nth-child(4n+2) .photo{padding-bottom:30px}
  /* ---- (legacy) ---- */
  body.room-archive .entries,
  body[data-room="archive"] .entries{columns:auto;column-gap:0}
  body.room-archive .entry,
  body[data-room="archive"] .entry{
    width:100%!important;margin-left:0!important;margin-bottom:5vh;
  }
  body.room-archive .entry:nth-child(2n),
  body[data-room="archive"] .entry:nth-child(2n){transform:rotate(1.4deg)!important}
  body.room-archive .entry:nth-child(2n+1),
  body[data-room="archive"] .entry:nth-child(2n+1){transform:rotate(-1.4deg)!important}
  body.room-archive .entry-title,
  body[data-room="archive"] .entry-title{font-size:16px}

  /* ---- room: words (linen wall) — single column, slimmer star border ---- */
  body.room-words .notes,
  body[data-room="words"] .notes{grid-template-columns:1fr;gap:5vh 0}
  body.room-words .note,
  body.room-words .note-photo,
  body[data-room="words"] .note,
  body[data-room="words"] .note-photo{
    border-width:15px;border-image-slice:22;padding:20px 18px;
  }
  body.room-words .note-photo,
  body[data-room="words"] .note-photo{padding:10px}
  body.room-words .note-body,
  body[data-room="words"] .note-body{font-size:19px}

  /* ---- room: about (cut paper) — fixed backgrounds break on iOS ---- */
  body.room-about .room-wrap,
  body[data-room="about"] #about{
    background-attachment:scroll;background-position:center top;
  }
  body.room-about .inner,
  body[data-room="about"] .inner{padding:9vh 7vw 12vh;max-width:none}
  body.room-about .section-head,
  body[data-room="about"] .section-head{margin-bottom:5vh;transform:none}
  body.room-about .about-wrap,
  body[data-room="about"] .about-wrap{max-width:none}
  /* strips: straighten up, no indents, tighter leading so they don't tower */
  body.room-about .about-copy .strip,
  body[data-room="about"] .about-copy > *{
    margin-left:0!important;margin-bottom:3.5vh;transform:none!important;
  }
  body.room-about .about-copy .big,
  body.room-about .about-copy > h1,
  body.room-about .about-copy > h2,
  body.room-about .about-copy > h3,
  body[data-room="about"] .about-copy .big{
    font-size:26px!important;line-height:1.6!important;padding:.08em .28em!important;
  }
  body.room-about .about-copy p:not(.big),
  body[data-room="about"] .about-copy p:not(.big){
    font-size:15.5px!important;line-height:1.95!important;padding:.14em .3em!important;
  }

  /* ---- room: write to me (handkerchief) ---- */
  body.room-contact .inner,
  body[data-room="contact"] .inner{
    margin:5vh 4vw 8vh;padding:6vh 7vw 6vh;border-width:14px;border-image-slice:20;
  }
  body.room-contact .contact-head,
  body[data-room="contact"] .contact-head{flex-direction:column;gap:0}
  .contact-write{width:70vw!important}
  body.room-contact .contact-stamp,
  body[data-room="contact"] .contact-stamp{
    width:46vw!important;margin-left:0!important;margin-top:-2vh!important;
    align-self:center;transform:rotate(7deg)!important;
  }
  body.room-contact .contact-note,
  body.room-contact .socials a,
  body[data-room="contact"] .contact-note,
  body[data-room="contact"] .socials a{font-size:11px;letter-spacing:.16em}
  .email{font-size:14px!important;letter-spacing:.12em!important;word-break:break-word}
  .socials{margin-top:30px}
  .socials a{display:inline-block;margin:4px 0}

  /* ---- footer ---- */
  .site-footer,footer{flex-direction:column;gap:8px;padding:18px 6vw}
}