@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,650&display=swap');

:root { --ink:#29231d; --muted:#70665b; --cork:#a96f3d; --cork-dark:#714523; --cream:#f8f1df; }
* { box-sizing:border-box; margin:0; padding:0; }
html { min-height:100%; background:#382518; }
body { position:relative; min-height:100vh; color:var(--ink); font-family:"DM Sans",sans-serif; border:clamp(11px,1.5vw,20px) solid #60401f; border-image:linear-gradient(90deg,#402713 0%,#76502b 9%,#4c2f18 18%,#805a31 31%,#51321a 43%,#8b6236 57%,#4b2d17 72%,#76502b 88%,#3d2513 100%) 20; background-color:#ad7445; background-image:
  radial-gradient(ellipse at 17% 23%,rgba(67,35,15,.32) 0 1px,transparent 1.7px),
  radial-gradient(ellipse at 72% 61%,rgba(255,224,175,.2) 0 1px,transparent 1.8px),
  radial-gradient(ellipse at 44% 82%,rgba(72,39,18,.2) 0 1.5px,transparent 2px),
  linear-gradient(112deg,transparent 44%,rgba(69,37,17,.2) 46% 50%,transparent 52%),
  linear-gradient(28deg,transparent 46%,rgba(244,196,137,.14) 48% 51%,transparent 53%);
  background-size:19px 23px,29px 31px,37px 41px,13px 17px,23px 19px;
  padding:clamp(24px,5vw,68px); box-shadow:inset 0 0 24px rgba(47,23,8,.5); }
body:before { content:""; position:absolute; inset:0; box-shadow:inset 0 0 14px rgba(49,25,10,.48); pointer-events:none; z-index:80; }
.board_header,main { width:min(1220px,100%); margin:auto; }
.board_header { color:#fff9e9; margin-bottom:42px; text-shadow:0 2px 2px rgba(45,21,6,.35); }
.board_header h1 { font:650 clamp(42px,7vw,82px)/.95 "Newsreader",serif; letter-spacing:-.035em; }
.board_header>p:last-child { margin-top:12px; opacity:.82; }
.kicker { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
main { display:flex; flex-direction:column; gap:62px; }
.section_title { display:flex; justify-content:space-between; gap:24px; align-items:end; color:#fff8e9; margin-bottom:22px; }
.section_title h2,.new_note_copy h2 { font:600 clamp(29px,4vw,45px)/1 "Newsreader",serif; }
.section_title>p { max-width:310px; opacity:.74; font-size:13px; }
.size_grid,.projects_grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,36px); align-items:start; }
.card { --tilt:0deg; position:relative; padding:30px 28px 24px; min-height:295px; color:var(--ink); transform:rotate(var(--tilt)); transition:transform .22s ease,box-shadow .22s ease; box-shadow:2px 6px 13px rgba(45,22,7,.3); }
.card:hover { transform:rotate(0) translateY(-5px); box-shadow:4px 12px 20px rgba(45,22,7,.34); }
.size_grid .card:nth-child(1),.projects_grid .card:nth-child(3n+1){--tilt:-1.1deg}.size_grid .card:nth-child(2),.projects_grid .card:nth-child(3n+2){--tilt:.8deg}.size_grid .card:nth-child(3),.projects_grid .card:nth-child(3n){--tilt:-.45deg}
.card h3 { font:600 31px/1 "Caveat",cursive; margin-bottom:3px; }
.note_hint { font-size:11px; color:var(--muted); margin-bottom:18px; }
.note_number { position:absolute; right:20px; top:15px; font:600 17px "Caveat",cursive; opacity:.34; }
.pushpin { position:absolute; top:9px; left:50%; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ef8f72 0 18%,#a82f24 45%,#621b18 100%); box-shadow:1px 3px 4px rgba(50,20,12,.35); transform:translateX(-50%); }
ul { list-style:none; }
ul li { position:relative; min-height:1.55em; padding:.26em 1.6em .26em 1em; font:500 15px/1.4 "Caveat",cursive; border-bottom:1px solid rgba(65,60,82,.2); }
ul li:before { content:"–"; position:absolute; left:0; opacity:.55; }
.card form { margin-top:14px; }
input[type="text"] { width:100%; border:0; border-bottom:1px solid rgba(55,45,37,.32); padding:7px 4px; background:transparent; color:var(--ink); font:500 15px "Caveat",cursive; }
input:focus { outline:2px solid rgba(56,92,112,.35); outline-offset:3px; }
.paper_effect { --bg:#f4eddb; background-color:var(--bg); background-image:linear-gradient(90deg,transparent 18px,rgba(198,96,91,.22) 18px 20px,transparent 20px),repeating-linear-gradient(transparent 0 27px,rgba(65,78,110,.15) 28px 29px); }
.red{--bg:#efc9cd}.orange{--bg:#f2d2b9}.yellow{--bg:#f4e5a9}.green{--bg:#cce2c5}.blue{--bg:#c7ddeb}.indigo{--bg:#ccd0e8}.violet{--bg:#dfcbe4}.white{--bg:#f5efdf}.grey{--bg:#d8d5cf}
.new_note_section { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(360px,1.3fr); gap:clamp(28px,6vw,90px); align-items:center; padding:clamp(25px,4vw,48px); background:rgba(70,38,17,.3); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 0 25px rgba(48,24,9,.18); }
.new_note_copy { color:#fff8e9; }.new_note_copy p:last-child{margin-top:14px;line-height:1.65;opacity:.76;font-size:13px}.new_note_copy .kicker{margin-bottom:8px}
#create_table { width:min(650px,100%); min-height:0; transform:rotate(.55deg); padding:37px 34px 28px; }
#create_table .tape { position:absolute; width:90px; height:24px; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg); background:rgba(232,220,183,.72); box-shadow:0 1px 2px rgba(0,0,0,.12); }
#create_table>label,#create_table legend { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#63594f }
#create_table fieldset { border:0;margin-top:18px } #create_table input[type=text]{font-size:24px;margin-top:8px}
.color_container { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; padding:13px 0 2px; }
.color_picker { width:31px; aspect-ratio:1; border-radius:50%; border:2px solid rgba(55,43,31,.3); cursor:pointer; box-shadow:0 2px 3px rgba(0,0,0,.15); }
.color_picker input{position:absolute;opacity:0}.color_picker:has(input:checked){outline:3px solid #3e5d48;outline-offset:3px}
#create_table button[type=submit] { margin-top:21px;border:0;background:#33291f;color:#fff7e5;padding:12px 18px;font:700 12px "DM Sans";letter-spacing:.04em;cursor:pointer }
.projects_section { padding-bottom:40px; }.projects_grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}.projects_grid:empty:after{content:"Your project notes will collect here.";color:#fff8e9;opacity:.7;font-style:italic}
.project_note { min-height:275px; }.project_note h3{padding-right:25px}.delete_btn { position:absolute;right:15px;top:18px;width:23px;aspect-ratio:1;border:0;border-radius:50%;background:url("./assets/black_x.png") center/cover;opacity:0;cursor:pointer }.card:hover>.delete_btn,li:hover>.delete_btn{opacity:.38}li .delete_btn{right:1px;top:50%;width:15px;transform:translateY(-50%)}
.sr_only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
@media(max-width:850px){.size_grid{grid-template-columns:1fr}.new_note_section{grid-template-columns:1fr}.size_grid .card{width:min(560px,100%);margin:auto}.section_title{align-items:start;flex-direction:column}.section_title>p{max-width:none}}
@media(max-width:520px){body{padding:44px 31px}.board_header h1{font-size:45px}.new_note_section{padding:22px 15px;margin-inline:-8px}.card{padding-inline:21px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}