/* =====================================================
   DELHI DUST AND DIARIES
   STYLE SHEET
===================================================== */

/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =====================================================
   ROOT VARIABLES
===================================================== */

:root{

    --paper:#f1e7d3;

    --background:#efe1c9;

    --ink:#3f332b;

    --coffee:#8d6d55;

    --soft:#7d746d;

    --line:#d8cdbb;

}

/* ==========================================
   BODY
========================================== */

body{

    margin:0;

    background:var(--background);

    font-family:"Special Elite", monospace;

    color:var(--ink);

    min-width:1320px;

    overflow-x:auto;

    overflow-y:auto;

    padding:60px;

}

/* =====================================================
   CANVAS
===================================================== */

.canvas{

    width:1200px;

    min-height:900px;

    background-image:url("../images/F7462983-9B03-4565-B6B3-9C8DEE90B626.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

    overflow:hidden;

    padding:55px 70px;

    box-shadow:
    0 12px 28px rgba(0,0,0,.12);

}
    

/* ==========================================
   HEADER
========================================== */

header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:100px;

}

/* ---------- Branding ---------- */

.branding{

    width:320px;

}

.branding h1{

    font-family:"Cormorant Garamond", serif;

    font-size:4rem;

    font-weight:500;

    line-height:.92;

    color:var(--ink);

    margin:0;

}

.tagline{

    margin-top:14px;

    font-family:"Special Elite", monospace;

    font-size:.78rem;

    letter-spacing:2px;

    color:#8a7c69;

}

/* ---------- Navigation ---------- */

nav{

    margin-top:14px;

}

nav ul{

    display:flex;

    gap:34px;

    list-style:none;

    padding:0;

    margin:0;

}

nav a{

    text-decoration:none;

    font-family:"Special Elite", monospace;

    font-size:.72rem;

    color:var(--ink);

    transition:.25s;

}

nav a:hover{

    opacity:.55;

}
/* =====================================================
   NAVIGATION
===================================================== */

nav ul{

    display:flex;

    gap:34px;

    list-style:none;

}

nav a{

    text-decoration:none;

    font-family:"Special Elite", monospace;

    font-size:.72rem;

    color:var(--ink);

    letter-spacing:.4px;

    transition:.25s;

}

nav a:hover{

    opacity:.6;

}
/* =====================================================
   COVER
===================================================== */

.cover{

    display:grid;

    grid-template-columns:340px 1fr;

    align-items:start;

    column-gap:40px;

    margin-top:40px;

    position:relative;

}
.cover-copy{

    max-width:300px;
    padding-top:80px;

}

.cover-label{
font-size:.8rem;
    color:var(--coffee);

    margin-bottom:30px;

    letter-spacing:2px;

}
.cover-text p{

    margin-bottom:28px;

    font-size:.95rem;

    line-height:2.1;

}
.open-link{

    display:inline-block;

    margin-top:25px;

    text-decoration:none;

    color:var(--ink);

    font-size:.9rem;

    border-bottom:1px solid transparent;

    transition:.3s;

}

.open-link:hover{

    border-color:var(--ink);

}
.cover-illustration{

    position:relative;

    height:560px;

    margin-top:-20px;

}
.cover-sketch{

    width:100%;

    height:560px;

    background-image:none

    background-repeat:no-repeat;

    background-position:right center;

    background-size:100%;

    opacity:.96;

}
.field-sketch-label{

    position:absolute;

    right:10px;

    bottom:20px;

    font-size:.65rem;

    line-height:1.7;

    letter-spacing:1.5px;

    color:#8b7a67;

    text-transform:uppercase;

}
.field-note{

    width:240px;

    padding:18px;

    margin-top:70px;

}

.field-note p{
font-family:"Speacial Elite", monospace;
    line-height:2;

    font-size:.8rem;

    color:#54483d;

}
footer{

    margin-top:70px;

    text-align:center;

    font-size:.72rem;

    color:#8d7d6c;

}
/* ==========================================
   FIELD NOTE
========================================== */

.field-note{
background:

    radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 45%),

    radial-gradient(circle at 85% 80%, rgba(90,60,20,.05), transparent 45%),

    #efe2c9;
    position:relative;

    width:210px;

    margin-top:35px;

    margin-left:40px;

    padding:48px 25px 24px;

    background:#efe2c9;

    border:1px solid rgba(115,88,55,.18);
    box-shadow:

0 5px 10px rgba(0,0,0,.08),

0 0 0 1px rgba(255,255,255,.25) inset;

    transform:rotate(-4deg);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    z-index:20;

}

/* ==========================================
   MASKING TAPE
========================================== */
.masking-tape{

    position:absolute;

    width:145px;

    left:50%;

    top:-100px;

    transform:translateX(-50%) rotate(2deg);

    opacity:.96;

    z-index:30;

    pointer-events:none;

}
.feild-note p{
  font-family: "Special Elite", monospace;

    position:relative;

    z-index:40;

    margin:0;

    text-align:center;

    line-height:2;

    font-size:.82rem;
    

}