@import url('https://fonts.googleapis.com/css2?family=Dekko&family=DM+Mono:wght@400;500&display=swap');

:root{--ink:#3c3333;--paper:#f8f6ed;--cork:#bb8965;--hand:'Dekko',cursive;--mono:'DM Mono',monospace}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-width:280px;color:var(--ink);font-family:Georgia,serif}
img{display:block;width:100%;height:100%;object-fit:contain}
a{color:inherit}
button{font:inherit}
.skip-link{position:fixed;z-index:100;top:-5rem;left:1rem;padding:.7rem 1rem;background:#fff}
.skip-link:focus{top:1rem}

/* Each empty asset shows its filename. Upload that filename into /assets to swap it. */
.asset{position:relative;display:grid;place-items:center;overflow:visible}
.asset>img{position:absolute;inset:0;opacity:0;pointer-events:none}
.asset.is-ready>img{opacity:1}
.asset-fallback,.asset-hint{font:500 clamp(.55rem,.8vw,.75rem)/1.4 var(--mono);letter-spacing:.01em;text-align:center}
.asset-fallback{padding:.65rem;border:1px dashed rgba(67,44,41,.48);color:#473b39;background:rgba(255,250,245,.7)}
.asset-hint{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);padding:.2rem .4rem;color:#3c3333;background:rgba(255,255,255,.75);white-space:nowrap}
.asset.is-ready>.asset-fallback,.asset.is-ready>.asset-hint{display:none}

/* Bulletin board. The image slots are deliberately simple until the originals are added. */
.cover-page{background:#ab7859}
.board{position:relative;isolation:isolate;width:100%;min-height:max(735px,100svh);overflow:hidden;background-color:var(--cork);background-image:url('assets/corkboard.jpg'),radial-gradient(rgba(75,41,23,.08) .8px,transparent .8px),linear-gradient(130deg,rgba(255,244,227,.12),rgba(79,41,23,.12));background-size:cover,5px 5px,100% 100%;background-position:center}
.lace,.hearts,.flower{position:absolute;z-index:0;pointer-events:none}
.lace{top:0;bottom:0;left:0;width:clamp(110px,23vw,320px);height:100%;background:repeating-linear-gradient(90deg,rgba(255,238,238,.5) 0 11px,rgba(223,157,170,.28) 11px 22px)}
.hearts{top:0;right:0;width:min(38vw,430px);height:90px}
.flower{right:4%;top:47%;width:17%;height:210px;transform:rotate(-8deg)}
.lace.is-ready,.hearts.is-ready,.flower.is-ready{background:none}
.lace>img{object-fit:cover;object-position:left top}
.lace .asset-fallback{writing-mode:vertical-rl}
.bead-name{position:absolute;z-index:5;top:9%;left:26%;width:32%;height:100px;transform:rotate(-2deg)}
.bead-fallback{font:700 clamp(2.8rem,5.5vw,5.5rem)/1 var(--hand);letter-spacing:.1em;color:#f5c1d0;text-shadow:1px 2px 0 #fff6f9,3px 5px 3px #684b4b}
.bead-name.is-ready .bead-fallback,.works-beads.is-ready h1{display:none}
.tabs{position:absolute;z-index:6;top:30%;left:4.5%;display:grid;gap:1.1rem;width:min(23%,300px)}
.tab{display:block;min-height:65px;text-decoration:none;cursor:pointer;filter:drop-shadow(4px 5px 2px rgba(49,27,24,.2));transition:transform 240ms cubic-bezier(.2,.75,.22,1.2),filter 240ms ease}
.tab:nth-child(1){transform:rotate(-3deg)}
.tab:nth-child(2){transform:rotate(2deg)}
.tab:nth-child(3){transform:rotate(-1deg)}
.tab-art{height:70px;background:#fff5e7;clip-path:polygon(0 0,87% 0,100% 50%,87% 100%,0 100%,3% 50%)}
.tab-art.is-ready{background:none;clip-path:none}
.tab-label{font:clamp(1.7rem,3.1vw,3.3rem)/1 var(--hand);text-align:center;white-space:nowrap}
.tab-art.is-ready .tab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(hover:hover) and (pointer:fine){.tab:hover{transform:translate(8px,-6px) rotate(2deg);filter:drop-shadow(6px 10px 4px rgba(49,27,24,.24))}.note:hover{transform:translateY(-5px) rotate(-1deg)}.polaroid:hover{transform:translateY(-7px) rotate(3deg)}.contact:hover{transform:translateY(-5px) rotate(-2deg)}}
.tab:active{transform:translate(3px,2px) scale(.97)}
.tab:focus-visible,.contact a:focus-visible,.inner-header a:focus-visible,.video-card:focus-visible,.reel-poster:focus-visible{outline:3px solid #44224b;outline-offset:4px}
.note{position:absolute;z-index:3;top:27%;left:29%;width:36%;height:60%;max-height:550px;min-height:345px;padding:10% 6% 7%;background:#a67294;clip-path:polygon(1% 2%,97% 0,100% 95%,4% 100%);filter:drop-shadow(7px 8px 3px rgba(55,27,35,.24));transition:transform 250ms ease}
.note.is-ready{background:none;clip-path:none}
.note>img,.contact>img{object-fit:fill}
.note h1{position:relative;z-index:1;margin:0;color:#fff9ef;font:clamp(2.2rem,4.5vw,5rem)/.95 var(--hand);text-align:center;text-wrap:balance}
.polaroid{position:absolute;z-index:4;top:8%;right:5%;width:27%;max-width:390px;margin:0;padding:.7rem .7rem 2.2rem;background:#fffcf8;box-shadow:5px 8px 8px rgba(49,27,24,.25);transform:rotate(2deg);transition:transform 250ms ease}
.photo{height:auto;aspect-ratio:3/4;background:#e5d1c5}
.photo>img{object-fit:cover}
.contact{position:absolute;z-index:5;right:4.5%;bottom:5%;width:34%;max-width:450px;height:225px;padding:2rem 1rem;background:#f6e9f2;clip-path:polygon(2% 3%,96% 0,100% 94%,5% 100%);filter:drop-shadow(5px 7px 3px rgba(55,27,35,.2));transition:transform 250ms ease;font-style:normal}
.contact.is-ready{background:none;clip-path:none}
.contact-copy{position:relative;z-index:1;display:grid;gap:.1rem;width:100%;justify-content:center;font:clamp(1.3rem,2.35vw,2.5rem)/1.08 var(--hand);transform:rotate(-3deg)}
.contact-copy span{text-align:center;font-size:1.12em}
.contact-copy a{text-decoration:none;white-space:nowrap}
.contact-copy a:hover{text-decoration:underline;text-underline-offset:.15em}

/* Works */
.inner-page{min-height:100svh;background:var(--paper)}
.inner-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,4rem);border-bottom:1px solid #cbbdc1;font:1.2rem var(--hand)}
.inner-header nav{display:flex;gap:1.3rem}
.inner-header a{text-decoration:none}
.inner-header a:hover,.inner-header a[aria-current]{text-decoration:underline;text-underline-offset:.2em}
.works-page{background:#f6e4e9}
.works-main{width:min(1200px,100%);margin:auto;padding:1.4rem clamp(1rem,4vw,3rem) 5rem}
.works-beads{height:115px;width:min(500px,90%);margin:0 auto 1.4rem}
.works-beads h1{margin:0;color:#ba6684;font:clamp(2.3rem,6vw,4.6rem)/1 var(--hand)}
.works-panel{padding:clamp(1.3rem,4vw,3rem);border:1px solid #b88c9a;background:#fffafc;box-shadow:8px 8px 0 rgba(146,92,110,.15)}
.works-panel h2{margin:0 0 1.5rem;font:1.2rem var(--mono)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,3vw,3rem)}
.video-card,.reel-poster{position:relative;cursor:pointer}
.video-card{width:100%;aspect-ratio:9/16;padding:0;border:9px solid #211c20;border-radius:1.35rem;box-shadow:4px 6px 0 #b596a0;background:#d9d2d6;transition:transform 220ms ease}
.video-card img,.reel-poster img{object-fit:cover}
.video-card:hover,.reel-poster:hover{transform:translateY(-5px)}
.play-icon{position:absolute;z-index:2;top:50%;left:50%;display:grid;place-items:center;width:3rem;aspect-ratio:1;border-radius:50%;color:#fff;background:rgba(28,20,25,.7);transform:translate(-50%,-50%)}
.reel-panel{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:center;margin-top:4rem;padding:clamp(1rem,3vw,2rem);border:5px solid #17202a;background:#95bdde}
.reel-panel h2{margin:0;font:clamp(1.8rem,4vw,3rem)/1.1 var(--mono)}
.reel-panel p{font:clamp(1rem,2vw,1.6rem)/1.65 var(--mono)}
.reel-poster{width:100%;aspect-ratio:16/9;border:0;background:#e6d4db;transition:transform 220ms ease}
.video-dialog{width:min(92vw,900px);max-height:90svh;padding:0;border:0;background:#171216;color:white}
.video-dialog::backdrop{background:rgba(16,13,15,.8)}
.video-dialog header{display:flex;justify-content:space-between;align-items:center;padding:.45rem 1rem}
.video-dialog h2{margin:0;font:1.1rem var(--mono)}
.close-video{border:0;color:inherit;background:none;font:2rem Arial;cursor:pointer}
.video-dialog video{display:block;max-width:100%;max-height:78svh;margin:auto}

/* Original newspaper structure, reflowed for a phone. */
.resume-page{background:#e9e5dc}
.resume-paper{width:min(1200px,calc(100% - 2rem));margin:2rem auto;padding:clamp(1rem,4vw,4rem);background:#f8f6ed;box-shadow:6px 9px 15px rgba(41,30,25,.13);font-family:Georgia,'Times New Roman',serif}
.resume-paper h1{margin:0;border-bottom:3px solid #1f1b1a;font-size:clamp(2.5rem,6vw,6.8rem);line-height:1.05;text-align:center}
.resume-details{margin:.65rem 0 2rem;padding-bottom:.65rem;border-bottom:1px solid;font-size:clamp(.8rem,1.7vw,1.2rem);text-align:center}
.resume-columns{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1.6fr);gap:clamp(1.2rem,4vw,3.5rem)}
.resume-sidebar{padding-right:clamp(.8rem,3vw,2rem);border-right:1px solid #242120}
.resume-paper h2{margin:1.2rem 0 .55rem;border-bottom:1px solid #36302e;font-size:clamp(1.4rem,2.5vw,2rem)}
.resume-paper h3{display:flex;justify-content:space-between;gap:.5rem;margin:0;font-size:1.2rem}
.resume-paper time{font:400 .76rem/1.5 var(--mono);white-space:nowrap}
.resume-paper article{margin:1.4rem 0 2rem;break-inside:avoid}
.resume-paper p,.resume-paper li{line-height:1.45}
.resume-paper ul{margin:.5rem 0;padding-left:1.3rem}
.resume-paper li+li{margin-top:.3rem}
.role{margin:.3rem 0;font-style:italic}

@media(max-width:700px){
  .board{min-height:max(790px,100svh)}
  .lace{width:34%;opacity:.75}.hearts{width:50%;height:65px}
  .bead-name{top:2.5%;left:5%;width:63%;height:85px}.bead-fallback{font-size:clamp(2.9rem,10vw,4.2rem)}
  .tabs{top:18%;left:3%;gap:.8rem;width:47%}
  .tab{min-height:55px}.tab-art{height:57px}.tab-label{font-size:clamp(1.35rem,5.3vw,2rem)}
  .polaroid{top:13%;right:4%;width:43%;padding:.35rem .35rem 1rem}
  .note{top:43%;left:3%;width:72%;height:285px;min-height:0;max-height:none;padding:3.4rem 1rem 2rem}
  .note h1{font-size:clamp(2.1rem,8.7vw,3.4rem)}
  .flower{top:49%;right:-2%;width:28%;height:130px}
  .contact{right:3%;bottom:4%;width:72%;height:172px;padding:1.2rem .4rem}
  .contact-copy{font-size:clamp(1.12rem,5vw,1.7rem)}
  .inner-header{flex-wrap:wrap}.resume-columns{grid-template-columns:1fr}.resume-sidebar{border-right:0;border-bottom:1px solid #242120;padding:0 0 1rem}.resume-paper h3{display:block}.resume-paper time{display:block;margin-top:.15rem}
  .reel-panel{grid-template-columns:1fr}
}
@media(max-width:375px){.board{min-height:760px}.tabs{top:18%;gap:.4rem}.tab-art{height:48px}.polaroid{top:16%}.note{top:41%;height:270px}.contact{width:82%;height:160px;bottom:3%}.contact-copy{font-size:1.12rem}}
@media(max-width:520px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-card:last-child{grid-column:1/-1;width:calc(50% - .4rem);justify-self:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}